feat: add dompurify

swkeep · Aug 22, 2024 · 0964d0b · 0964d0b
1 parent 126c94d
commit 0964d0b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/interactionDUI/dui_source/package-lock.json b/interactionDUI/dui_source/package-lock.json
diff --git a/interactionDUI/dui_source/package.json b/interactionDUI/dui_source/package.json
@@ -13,9 +13,11 @@
         "format": "prettier .  --write"
     },
     "dependencies": {
+        "dompurify": "^3.1.6",
         "vue": "^3.3.12"
     },
     "devDependencies": {
+        "@types/dompurify": "^3.0.5",
         "@types/node": "^20.15.0",
         "@vitejs/plugin-vue": "^4.5.2",
         "eslint": "^9.9.0",

diff --git a/interactionDUI/dui_source/src/components/MenuOption.vue b/interactionDUI/dui_source/src/components/MenuOption.vue
@@ -2,7 +2,7 @@
     <input v-if="isRadio" class="menu__option__radio" type="radio" :name="radioName" :checked="isSelected" />
     <div class="label" :class="labelClass" :style="computedItemStyle">
         <i v-if="item.icon" :class="[item.icon, 'label__icon']"></i>
-        <span v-if="!isRadio" v-html="item.label"></span>
+        <span v-if="!isRadio" v-html="sanitizedHTML"></span>
         <div v-if="isRadio">
             {{ item.label }}
         </div>
@@ -13,12 +13,20 @@
 import { computed } from 'vue';
 import { Option } from '../types/types';
 import { itemStyle } from '../util';
+import DOMPurify from 'dompurify';
 
 const props = defineProps<{
     item: Option;
     selected?: number; // when it's radio
 }>();
 
+const sanitizedHTML = computed(() => {
+    const html = props.item.label;
+    if (html === undefined) return '';
+
+    return DOMPurify.sanitize(html);
+});
+
 const isRadio = computed(
     () => (props.item.flags?.update || props.item.flags?.action || props.item.flags?.event) ?? false,
 );