fix: Markdown editor xss attack (#4553)

ui/package.json

@@ -45,6 +45,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^3.0.1",
     "recorder-core": "^1.3.25011100",
+    "sanitize-html": "^2.17.0",
     "screenfull": "^6.0.2",
     "sortablejs": "^1.15.6",
     "svg2pdf.js": "^2.5.0",

ui/src/components/markdown/MdEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <MdEditor :language="language" noIconfont noPrettier v-bind="$attrs">
+  <MdEditor :language="language" noIconfont noPrettier v-bind="$attrs" :sanitize="sanitize">
     <template #defFooters>
       <slot name="defFooters"> </slot>
     </template>
@@ -13,14 +13,17 @@ import { getBrowserLang } from '@/locales/index'
 import './assets/markdown-iconfont.js'
 // 引入公共库中的语言配置
 import ZH_TW from '@vavt/cm-extension/dist/locale/zh-TW'
-
+import sanitizeHtml from 'sanitize-html'
 defineOptions({ name: 'MdEditor' })
 const language = computed(() => localStorage.getItem('MaxKB-locale') || getBrowserLang() || '')
 config({
   editorConfig: {
     languageUserDefined: {
-      'zh-Hant': ZH_TW
-    }
-  }
+      'zh-Hant': ZH_TW,
+    },
+  },
 })
+const sanitize = (html: any) => {
+  return sanitizeHtml(html)
+}
 </script>

ui/src/components/markdown/MdPreview.vue

@@ -1,5 +1,12 @@
 <template>
-  <MdPreview :language="language" noIconfont noPrettier :codeFoldable="false" v-bind="$attrs" />
+  <MdPreview
+    :language="language"
+    noIconfont
+    noPrettier
+    :sanitize="sanitize"
+    :codeFoldable="false"
+    v-bind="$attrs"
+  />
 </template>
 
 <script setup lang="ts">
@@ -9,7 +16,7 @@ import { getBrowserLang } from '@/locales/index'
 import useStore from '@/stores'
 // 引入公共库中的语言配置
 import ZH_TW from '@vavt/cm-extension/dist/locale/zh-TW'
-
+import sanitizeHtml from 'sanitize-html'
 defineOptions({ name: 'MdPreview' })
 
 const emit = defineEmits(['clickPreview'])
@@ -23,6 +30,9 @@ config({
     },
   },
 })
+const sanitize = (html: any) => {
+  return sanitizeHtml(html)
+}
 </script>
 
 <style lang="scss" scoped>