From b596815ea5da92e2e023745cc9bf76d7d96b009c Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Mon, 15 Jul 2024 11:23:08 +0800
Subject: [PATCH] =?UTF-8?q?fixed=EF=BC=9AFixed=20an=20issue=20where=20the?=
 =?UTF-8?q?=20user=20was=20unable=20to=20enter=20non-MD=20content?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                              |  1 +
 src/components/Widgets/MarkDown/index.vue | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 0bd8b0bf4..881e56ead 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "css-color-function": "^1.3.3",
     "decimal.js": "^10.4.3",
     "deepmerge": "^4.2.2",
+    "dompurify": "^3.1.6",
     "echarts": "4.7.0",
     "element-ui": "2.13.2",
     "eslint-plugin-html": "^6.0.0",
diff --git a/src/components/Widgets/MarkDown/index.vue b/src/components/Widgets/MarkDown/index.vue
index 7e392cfee..a05fe3814 100644
--- a/src/components/Widgets/MarkDown/index.vue
+++ b/src/components/Widgets/MarkDown/index.vue
@@ -18,14 +18,15 @@
         />
       </el-col>
       <el-col v-show="isShow" :span="span">
-        <VueMarkdown class="result-html" :source="iValue" :show="true" :html="false" />
+        <VueMarkdown class="result-html" :source="sanitizedValue" :html="false" :show="true" />
       </el-col>
     </el-row>
-    <VueMarkdown v-else class="source" :source="iValue" :html="false" />
+    <VueMarkdown v-else class="source" :html="false" :source="sanitizedValue" />
   </div>
 </template>
 
 <script>
+import DOMPurify from 'dompurify'
 import VueMarkdown from 'vue-markdown'
 import 'github-markdown-css/github-markdown-light.css'
 
@@ -56,6 +57,17 @@ export default {
       iValue: this.value
     }
   },
+  computed: {
+    sanitizedValue() {
+      // 转义特殊字符
+      let content = this.iValue.replace(/\\/g, '\\\\').replace(/\$/g, '\\$')
+
+      // 使用 DOMPurify 进行 XSS 过滤
+      content = DOMPurify.sanitize(content)
+
+      return content
+    }
+  },
   mounted() {
     this.$nextTick(() => {
       this.resizeObserver = new ResizeObserver(entries => {