From 0964d0bb6b91779b68e096a1ac6c942867c52b78 Mon Sep 17 00:00:00 2001
From: swkeep <badaosoft@gmail.com>
Date: Thu, 22 Aug 2024 20:12:20 +0330
Subject: [PATCH] feat: add dompurify

---
 interactionDUI/dui_source/package-lock.json   | 22 +++++++++++++++++++
 interactionDUI/dui_source/package.json        |  2 ++
 .../dui_source/src/components/MenuOption.vue  | 10 ++++++++-
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/interactionDUI/dui_source/package-lock.json b/interactionDUI/dui_source/package-lock.json
index 201fd99..02477a7 100644
--- a/interactionDUI/dui_source/package-lock.json
+++ b/interactionDUI/dui_source/package-lock.json
@@ -8,9 +8,11 @@
             "name": "keep_interact_dui",
             "version": "1.0.0",
             "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",
@@ -724,6 +726,15 @@
                 "win32"
             ]
         },
+        "node_modules/@types/dompurify": {
+            "version": "3.0.5",
+            "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+            "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+            "dev": true,
+            "dependencies": {
+                "@types/trusted-types": "*"
+            }
+        },
         "node_modules/@types/node": {
             "version": "20.15.0",
             "resolved": "https://registry.npmjs.org/@types/node/-/node-20.15.0.tgz",
@@ -733,6 +744,12 @@
                 "undici-types": "~6.13.0"
             }
         },
+        "node_modules/@types/trusted-types": {
+            "version": "2.0.7",
+            "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+            "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+            "dev": true
+        },
         "node_modules/@typescript-eslint/eslint-plugin": {
             "version": "8.1.0",
             "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.1.0.tgz",
@@ -1340,6 +1357,11 @@
                 "node": ">=8"
             }
         },
+        "node_modules/dompurify": {
+            "version": "3.1.6",
+            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz",
+            "integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ=="
+        },
         "node_modules/esbuild": {
             "version": "0.19.9",
             "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.9.tgz",
diff --git a/interactionDUI/dui_source/package.json b/interactionDUI/dui_source/package.json
index 4f36024..a9b8e6d 100644
--- 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
index 708219e..4c63f33 100644
--- 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,
 );