fix: use DOMPurify to prevent xss injection

package.json

@@ -43,6 +43,7 @@
   },
   "dependencies": {
     "@types/md5": "^2.3.5",
+    "dompurify": "^3.1.3",
     "md5": "^2.3.0",
     "mitt": "^3.0.1",
     "overlayscrollbars": "^2.8.0",
@@ -59,6 +60,7 @@
     "@iconify/json": "^2.2.208",
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@rollup/plugin-replace": "^5.0.5",
+    "@types/dompurify": "^3.0.5",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^20.12.11",
     "@types/webextension-polyfill": "^0.10.7",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@types/md5':
         specifier: ^2.3.5
         version: 2.3.5
+      dompurify:
+        specifier: ^3.1.3
+        version: 3.1.3
       md5:
         specifier: ^2.3.0
         version: 2.3.0
@@ -54,6 +57,9 @@ importers:
       '@rollup/plugin-replace':
         specifier: ^5.0.5
         version: 5.0.5(rollup@4.16.4)
+      '@types/dompurify':
+        specifier: ^3.0.5
+        version: 3.0.5
       '@types/fs-extra':
         specifier: ^11.0.4
         version: 11.0.4
@@ -1107,6 +1113,9 @@ packages:
   '@tootallnate/quickjs-emscripten@0.23.0':
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
 
+  '@types/dompurify@3.0.5':
+    resolution: {integrity: sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==}
+
   '@types/eslint-scope@3.7.7':
     resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
 
@@ -1146,6 +1155,9 @@ packages:
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/unist@2.0.10':
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
 
@@ -2406,6 +2418,9 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
+  dompurify@3.1.3:
+    resolution: {integrity: sha512-5sOWYSNPaxz6o2MUPvtyxTTqR4D3L77pr5rUQoWgD5ROQtVIZQgJkXbo1DLlK3vj11YGw5+LnF4SYti4gZmwng==}
+
   domutils@3.1.0:
     resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
 
@@ -7104,6 +7119,10 @@ snapshots:
 
   '@tootallnate/quickjs-emscripten@0.23.0': {}
 
+  '@types/dompurify@3.0.5':
+    dependencies:
+      '@types/trusted-types': 2.0.7
+
   '@types/eslint-scope@3.7.7':
     dependencies:
       '@types/eslint': 8.56.10
@@ -7145,6 +7164,8 @@ snapshots:
 
   '@types/semver@7.5.8': {}
 
+  '@types/trusted-types@2.0.7': {}
+
   '@types/unist@2.0.10': {}
 
   '@types/web-bluetooth@0.0.20': {}
@@ -8668,6 +8689,8 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
+  dompurify@3.1.3: {}
+
   domutils@3.1.0:
     dependencies:
       dom-serializer: 2.0.0

src/components/SearchBar/SearchBar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onKeyStroke } from '@vueuse/core'
+import DOMPurify from 'dompurify'
 
 import { useApiClient } from '~/composables/api'
 import { findLeafActiveElement } from '~/utils/element'
@@ -295,7 +296,7 @@ async function handleClearSearchHistory() {
           class="suggestion-item"
           @click="navigateToSearchResultPage(item.value)"
         >
-          <span v-html="item.name" />
+          <span v-html="DOMPurify.sanitize(item.name)" />
         </div>
       </div>
     </Transition>

src/components/Settings/components/About.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import DOMPurify from 'dompurify'
 import browser from 'webextension-polyfill'
 
 import Button from '~/components/Button.vue'
@@ -149,7 +150,7 @@ function handleExportSettings() {
           <div
             whitespace-pre-wrap lh-8 text-16.5px
             :frosted-glass="false"
-            v-html="$t('settings.just_wanna_change_the_job_desc')"
+            v-html="DOMPurify.sanitize($t('settings.just_wanna_change_the_job_desc'))"
           />
 
           <a href="mailto:hakadao2000@gmail.com" mt-2 text-16.5px color="$bew-theme-color">Gmail: hakadao2000@gmail.com</a>