🔒 使用 DOMPurify 清理公告通知 HTML 内容 (#1274)

* 🔒 使用 DOMPurify 清理公告通知的 HTML 内容 #1273

使用 DOMPurify 对服务端下发的公告 HTML 进行白名单过滤，防止潜在的
UI 注入风险。只允许基础标签和安全的 CSS 属性（颜色、字体相关）。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* code update

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: cyfung1031 <44498510+cyfung1031@users.noreply.github.com>

Author: 3 people

package.json

@@ -36,6 +36,7 @@
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.13",
     "dexie": "^4.0.10",
+    "dompurify": "^3.3.1",
     "eslint-linter-browserify": "9.26.0",
     "eventemitter3": "^5.0.1",
     "fast-xml-parser": "^5.3.6",

pnpm-lock.yaml

@@ -21,6 +21,7 @@ import { FaviconDAO } from "@App/app/repo/favicon";
 import { onRegularUpdateCheckAlarm } from "./regular_updatecheck";
 import { cacheInstance } from "@App/app/cache";
 import { InfoNotification } from "./utils";
+import { sanitizeHTML } from "@App/pkg/utils/sanitize";
 
 // service worker的管理器
 export default class ServiceWorkerManager {
@@ -115,7 +116,7 @@ export default class ServiceWorkerManager {
         .then((resp: { data: { [key: string]: any; notice: string; version: string } }) => {
           const data = resp.data;
           systemConfig
-            .getCheckUpdate()
+            .getCheckUpdate({ sanitizeHTML })
             .then((items) => {
               const isRead = items.notice !== data.notice ? false : items.isRead;
               systemConfig.setCheckUpdate({ ...data, isRead: isRead });

src/app/service/service_worker/index.ts

@@ -1,4 +1,5 @@
 import { Discord, DocumentationSite, ExtVersion, ExtServer } from "@App/app/const";
+import { sanitizeHTML } from "@App/pkg/utils/sanitize";
 import { Alert, Badge, Button, Card, Collapse, Dropdown, Menu, Switch, Tooltip } from "@arco-design/web-react";
 import {
   IconBook,
@@ -270,7 +271,7 @@ function App() {
     const checkScriptEnableAndUpdate = async () => {
       const [isEnableScript, checkUpdate] = await Promise.all([
         systemConfig.getEnableScript(),
-        systemConfig.getCheckUpdate(),
+        systemConfig.getCheckUpdate({ sanitizeHTML }),
       ]);
       if (!hookMgr.isMounted) return;
       setIsEnableScript(isEnableScript);
@@ -374,13 +375,16 @@ function App() {
       ]).then(([resp]: [{ data: { notice: string; version: string } } | null | undefined, any]) => {
         let newCheckUpdateState = 0;
         if (resp?.data) {
+          let notice = "";
+          if (typeof resp.data.notice === "string") notice = sanitizeHTML(resp.data.notice);
+          const version = resp.data.version;
           setCheckUpdate((items) => {
-            if (resp.data.version === items.version) {
+            if (version === items.version) {
               newCheckUpdateState = 2;
               return items;
             }
-            const isRead = items.notice !== resp.data.notice ? false : items.isRead;
-            const newCheckUpdate = { ...resp.data, isRead };
+            const isRead = items.notice !== notice ? false : items.isRead;
+            const newCheckUpdate = { version, notice, isRead };
             systemConfig.setCheckUpdate(newCheckUpdate);
             return newCheckUpdate;
           });
@@ -482,7 +486,11 @@ function App() {
         <Alert
           style={{ display: showAlert ? "flex" : "none" }}
           type="info"
-          content={<div dangerouslySetInnerHTML={{ __html: checkUpdate.notice || "" }} />}
+          content={
+            <div
+              dangerouslySetInnerHTML={{ __html: checkUpdate.notice /* notice is already sanitized by dompurify */ }}
+            />
+          }
         />
         <Collapse
           bordered={false}

src/pages/popup/App.tsx

@@ -393,12 +393,14 @@ export class SystemConfig {
     });
   }
 
-  getCheckUpdate() {
-    return this._get<Parameters<typeof this.setCheckUpdate>[0]>("check_update", {
+  async getCheckUpdate(opts?: { sanitizeHTML?: (html: string) => string }) {
+    const result = await this._get<Parameters<typeof this.setCheckUpdate>[0]>("check_update", {
       notice: "",
       isRead: false,
       version: ExtVersion,
     });
+    if (typeof opts?.sanitizeHTML === "function") result.notice = opts.sanitizeHTML(result.notice);
+    return result;
   }
 
   setEnableScript(enable: boolean) {

src/pkg/config/config.ts

@@ -0,0 +1,24 @@
+import DOMPurify from "dompurify";
+
+// 允许的安全 CSS 属性白名单
+const ALLOWED_CSS_PROPERTIES = ["color", "font-size", "font-weight", "font-style"];
+
+// 过滤不安全的 CSS 属性，只保留白名单中的属性
+DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+  if (node instanceof HTMLElement && node.hasAttribute("style")) {
+    const { style } = node;
+    for (let i = style.length - 1; i >= 0; i--) {
+      if (!ALLOWED_CSS_PROPERTIES.includes(style[i])) {
+        style.removeProperty(style[i]);
+      }
+    }
+  }
+});
+
+// 对 HTML 进行清理，只保留安全的标签和属性
+export function sanitizeHTML(html: string): string {
+  return DOMPurify.sanitize(html, {
+    ALLOWED_TAGS: ["b", "i", "a", "br", "p", "strong", "em", "span"],
+    ALLOWED_ATTR: ["href", "target", "style"],
+  });
+}