fix: update MdEditor component to prevent potential XSS attacks

Author: zhengkunwang223

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

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>

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

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