fixed：Fixed an issue where the user was unable to enter non-MD content

package.json

@@ -35,6 +35,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.15.14",
     "eslint-plugin-html": "^6.0.0",

src/components/Widgets/MarkDown/index.vue

@@ -4,28 +4,29 @@
       <div class="action-bar">
         <div class="action">
           <span>
-            <i :class="[!isShow ? 'fa-eye' : 'fa-eye-slash']" class="fa" @click="onView" />
+            <i class="fa" :class="[!isShow ? 'fa-eye' : 'fa-eye-slash']" @click="onView" />
           </span>
         </div>
       </div>
       <el-col :span="span" :style="{'height': height + 'px' }">
         <el-input
           v-model="iValue"
-          :rows="rows"
           autosize
+          :rows="rows"
           type="textarea"
           @change="onChange"
         />
       </el-col>
       <el-col v-show="isShow" :span="span">
-        <VueMarkdown :html="false" :show="true" :source="iValue" class="result-html" />
+        <VueMarkdown class="result-html" :source="sanitizedValue" :html="false" :show="true" />
       </el-col>
     </el-row>
-    <VueMarkdown v-else :html="false" :source="iValue" class="source" />
+    <VueMarkdown v-else class="source" :html="false" :source="sanitizedValue" />
   </div>
 </template>
 
 <script>
+import DOMPurify from 'dompurify'
 import VueMarkdown from 'vue-markdown'
 
 export default {
@@ -55,6 +56,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 => {