From 8def011e6312910cb6ee29601925b1e3f5ffa367 Mon Sep 17 00:00:00 2001
From: CityFun <31820853+zhengkunwang223@users.noreply.github.com>
Date: Sun, 4 Jan 2026 10:51:41 +0800
Subject: [PATCH] fix: update MdEditor component to prevent potential XSS
 attacks (#11538)

---
 frontend/package.json                         |  1 +
 .../src/components/mkdown-editor/index.vue    | 23 +++++++++++++++++++
 .../src/components/system-upgrade/index.vue   |  8 +++----
 frontend/src/views/app-store/detail/index.vue |  9 +++-----
 4 files changed, 31 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/components/mkdown-editor/index.vue

diff --git a/frontend/package.json b/frontend/package.json
index 8b4692519..31cb2261a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,6 +38,7 @@
         "axios": "^1.7.2",
         "codemirror": "^6.0.1",
         "crypto-js": "^4.2.0",
+        "dompurify": "^3.3.1",
         "echarts": "^5.5.0",
         "element-plus": "2.9.9",
         "fit2cloud-ui-plus": "^1.2.0",
diff --git a/frontend/src/components/mkdown-editor/index.vue b/frontend/src/components/mkdown-editor/index.vue
new file mode 100644
index 000000000..8dc2e77dd
--- /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 { GlobalStore } from '@/store';
+import { storeToRefs } from 'pinia';
+
+const globalStore = GlobalStore();
+const { isDarkTheme } = storeToRefs(globalStore);
+const props = defineProps({
+    content: {
+        type: String,
+        default: '',
+    },
+});
+const sanitizedReadMe = computed(() => {
+    return DOMPurify.sanitize(props.content);
+});
+</script>
diff --git a/frontend/src/components/system-upgrade/index.vue b/frontend/src/components/system-upgrade/index.vue
index ded9ce9cb..881ab8e80 100644
--- a/frontend/src/components/system-upgrade/index.vue
+++ b/frontend/src/components/system-upgrade/index.vue
@@ -69,7 +69,7 @@
                     {{ upgradeInfo.testVersion }}
                 </el-radio>
             </el-radio-group>
-            <MdEditor v-model="upgradeInfo.releaseNote" previewOnly :theme="isDarkTheme ? 'dark' : 'light'" />
+            <MarkDownEditor :content="upgradeInfo.releaseNote" />
         </div>
         <template #footer>
             <span class="dialog-footer">
@@ -81,10 +81,10 @@
 </template>
 <script setup lang="ts">
 import DrawerHeader from '@/components/drawer-header/index.vue';
+import MarkDownEditor from '@/components/mkdown-editor/index.vue';
+
 import { getSettingInfo, loadReleaseNotes, loadUpgradeInfo, 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 { copyText } from '@/utils/util';
 import { onMounted, ref, computed } from 'vue';
@@ -93,7 +93,7 @@ import { ElMessageBox } from 'element-plus';
 import { storeToRefs } from 'pinia';
 
 const globalStore = GlobalStore();
-const { isDarkTheme, docsUrl } = storeToRefs(globalStore);
+const { docsUrl } = storeToRefs(globalStore);
 
 const mobile = computed(() => {
     return globalStore.isMobile();
diff --git a/frontend/src/views/app-store/detail/index.vue b/frontend/src/views/app-store/detail/index.vue
index 04d0934de..fd7f61ac4 100644
--- a/frontend/src/views/app-store/detail/index.vue
+++ b/frontend/src/views/app-store/detail/index.vue
@@ -72,21 +72,18 @@
                 </div>
             </div>
         </div>
-        <MdEditor previewOnly v-model="app.readMe" :theme="isDarkTheme ? 'dark' : 'light'" />
+        <MarkDownEditor :content="app.readMe" />
     </el-drawer>
     <Install ref="installRef"></Install>
 </template>
 
 <script lang="ts" setup>
+import MarkDownEditor from '@/components/mkdown-editor/index.vue';
+
 import { GetApp, GetAppDetail } from '@/api/modules/app';
-import MdEditor from 'md-editor-v3';
 import { ref } from 'vue';
 import Install from './install/index.vue';
 import router from '@/routers';
-import { GlobalStore } from '@/store';
-import { storeToRefs } from 'pinia';
-const globalStore = GlobalStore();
-const { isDarkTheme } = storeToRefs(globalStore);
 
 const app = ref<any>({});
 const appDetail = ref<any>({});