fix: update MdEditor component to prevent potential XSS attacks (#11538)

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",

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>

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();

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>({});