From 01ab004876c27f2e60463f28d61d030e66e160a2 Mon Sep 17 00:00:00 2001
From: CityFun <31820853+zhengkunwang223@users.noreply.github.com>
Date: Wed, 31 Dec 2025 22:33:38 +0800
Subject: [PATCH] fix: update MdEditor component to prevent potential XSS
 attacks (#11527)

---
 frontend/package.json                         |  1 +
 .../src/components/mkdown-editor/index.vue    | 23 +++++++++++++++++++
 .../system-upgrade/releases/index.vue         |  9 +++-----
 .../system-upgrade/upgrade/index.vue          | 13 +++--------
 4 files changed, 30 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/components/mkdown-editor/index.vue

diff --git a/frontend/package.json b/frontend/package.json
index bc6134412..62954df29 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -36,6 +36,7 @@
         "axios": "^1.7.2",
         "codemirror": "^6.0.2",
         "crypto-js": "^4.2.0",
+        "dompurify": "^3.3.1",
         "echarts": "^5.5.0",
         "element-plus": "2.11.9",
         "fit2cloud-ui-plus": "^1.2.3",
diff --git a/frontend/src/components/mkdown-editor/index.vue b/frontend/src/components/mkdown-editor/index.vue
new file mode 100644
index 000000000..0945dac4c
--- /dev/null
+++ b/frontend/src/components/mkdown-editor/index.vue
@@ -0,0 +1,23 @@
+<template>
+    <MdEditor previewOnly v-model="sanitizedReadMe" :theme="isDarkTheme ? 'dark' : 'light'" />
+</template>
+
+<script lang="ts" setup>
+import MdEditor from 'md-editor-v3';
+import 'md-editor-v3/lib/style.css';
+import DOMPurify from 'dompurify';
+
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { isDarkTheme } = useGlobalStore();
+
+const props = defineProps({
+    content: {
+        type: String,
+        default: '',
+    },
+});
+
+const sanitizedReadMe = computed(() => {
+    return DOMPurify.sanitize(props.content);
+});
+</script>
diff --git a/frontend/src/components/system-upgrade/releases/index.vue b/frontend/src/components/system-upgrade/releases/index.vue
index ede06c9e1..2054dfa2e 100644
--- a/frontend/src/components/system-upgrade/releases/index.vue
+++ b/frontend/src/components/system-upgrade/releases/index.vue
@@ -32,7 +32,7 @@
                             <span class="icon-span">{{ item.fixCount }}</span>
                         </template>
                         <div class="panel-MdEditor">
-                            <MdEditor v-model="item.content" previewOnly :theme="isDarkTheme ? 'dark' : 'light'" />
+                            <MarkDownEditor :content="item.content" />
                         </div>
                     </el-collapse-item>
                 </div>
@@ -57,12 +57,11 @@
 </template>
 
 <script setup lang="ts">
+import MarkDownEditor from '@/components/mkdown-editor/index.vue';
+
 import { getSettingInfo, listReleases, updateSetting } from '@/api/modules/setting';
-import MdEditor from 'md-editor-v3';
-import 'md-editor-v3/lib/style.css';
 import { ref } from 'vue';
 import { GlobalStore } from '@/store';
-import { storeToRefs } from 'pinia';
 import { FormInstance } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
@@ -73,8 +72,6 @@ const mobile = computed(() => {
     return globalStore.isMobile();
 });
 
-const { isDarkTheme } = storeToRefs(globalStore);
-
 const drawerVisible = ref(false);
 const currentVersion = ref(0);
 const notes = ref([]);
diff --git a/frontend/src/components/system-upgrade/upgrade/index.vue b/frontend/src/components/system-upgrade/upgrade/index.vue
index f9004f1a5..602c41213 100644
--- a/frontend/src/components/system-upgrade/upgrade/index.vue
+++ b/frontend/src/components/system-upgrade/upgrade/index.vue
@@ -15,12 +15,7 @@
                     {{ upgradeInfo.testVersion }}
                 </el-radio>
             </el-radio-group>
-            <MdEditor
-                v-loading="loading"
-                v-model="upgradeInfo.releaseNote"
-                previewOnly
-                :theme="isDarkTheme ? 'dark' : 'light'"
-            />
+            <MarkDownEditor v-loading="loading" :content="upgradeInfo.releaseNote" />
         </div>
         <template #footer>
             <span class="dialog-footer">
@@ -32,18 +27,16 @@
 </template>
 
 <script setup lang="ts">
+import MarkDownEditor from '@/components/mkdown-editor/index.vue';
+
 import { loadReleaseNotes, upgrade } from '@/api/modules/setting';
-import MdEditor from 'md-editor-v3';
 import i18n from '@/lang';
-import 'md-editor-v3/lib/style.css';
 import { MsgSuccess } from '@/utils/message';
 import { ref } from 'vue';
 import { GlobalStore } from '@/store';
 import { ElMessageBox } from 'element-plus';
-import { storeToRefs } from 'pinia';
 
 const globalStore = GlobalStore();
-const { isDarkTheme } = storeToRefs(globalStore);
 
 const drawerVisible = ref(false);
 const upgradeInfo = ref();