diff --git a/core/core-frontend/package.json b/core/core-frontend/package.json
index 4b3aeb3ae2..e35d2983fb 100644
--- a/core/core-frontend/package.json
+++ b/core/core-frontend/package.json
@@ -31,6 +31,7 @@
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.9",
     "dingtalk-jsapi": "^3.1.0",
+    "dompurify": "^3.4.2",
     "echarts": "^5.5.1",
     "element-plus-secondary": "^1.0.0",
     "element-resize-detector": "^1.2.4",
diff --git a/core/core-frontend/src/utils/utils.ts b/core/core-frontend/src/utils/utils.ts
index 2b6574aa5a..04f6a48773 100644
--- a/core/core-frontend/src/utils/utils.ts
+++ b/core/core-frontend/src/utils/utils.ts
@@ -2,8 +2,7 @@ import { BusiTreeNode } from '@/models/tree/TreeNode'
 import { useCache } from '@/hooks/web/useCache'
 import { loadScript } from '@/utils/RemoteJs'
 import { ElMessage } from 'element-plus-secondary'
-import { useI18n } from '@/hooks/web/useI18n'
-const { t } = useI18n()
+import DOMPurify from 'dompurify'
 
 const { wsCache } = useCache()
 export function deepCopy(target) {
@@ -57,6 +56,10 @@ export function checkAddHttp(url) {
   }
 }
 
+export const sanitizeHtml = (html: string): string => {
+  return DOMPurify.sanitize(html)
+}
+
 export const setColorName = (obj, keyword: string, key?: string, colorKey?: string) => {
   key = key || 'name'
   colorKey = colorKey || 'colorName'