refactor: 使用更加轻量级的方案替换xss做html代码sanitize的功能，并将外部的配色方案注入html代码中

pnpm-lock.yaml

@@ -381,10 +381,10 @@ importers:
   web/plugins/com.msgbyte.webview:
     specifiers:
       js-base64: ^3.7.2
-      xss: ^1.0.11
+      script_sanitize: ^1.2.6
     dependencies:
       js-base64: 3.7.2
-      xss: 1.0.11
+      script_sanitize: 1.2.6
 
 packages:
 
@@ -3902,6 +3902,7 @@ packages:
 
   /commander/2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+    dev: true
 
   /commander/6.2.1:
     resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/commander/download/commander-6.2.1.tgz}
@@ -4138,10 +4139,6 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /cssfilter/0.0.10:
-    resolution: {integrity: sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==}
-    dev: false
-
   /cssnano-preset-default/4.0.8:
     resolution: {integrity: sha1-kgYisfwelaNOiDggPxOXpQTy0/8=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/cssnano-preset-default/download/cssnano-preset-default-4.0.8.tgz}
     engines: {node: '>=6.9.0'}
@@ -8771,6 +8768,10 @@ packages:
       ajv-keywords: 5.1.0_ajv@8.8.2
     dev: true
 
+  /script_sanitize/1.2.6:
+    resolution: {integrity: sha512-CA53o9tyResT5Sq8HT4w6jcmHoYtfbBxRKvaBQc0Iw0kS4+c9MDNwl1ReUcFjbb/GFm8YjB7diTJE10MWOnHNQ==}
+    dev: false
+
   /scroll-into-view-if-needed/2.2.28:
     resolution: {integrity: sha512-8LuxJSuFVc92+0AdNv4QOxRL4Abeo1DgLnGNkn1XlaujPH/3cCFz3QI60r2VNu4obJJROzgnIUw5TKQkZvZI1w==}
     dependencies:
@@ -10174,15 +10175,6 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: false
 
-  /xss/1.0.11:
-    resolution: {integrity: sha512-EimjrjThZeK2MO7WKR9mN5ZC1CSqivSl55wvUK5EtU6acf0rzEE1pN+9ZDrFXJ82BRp3JL38pPE6S4o/rpp1zQ==}
-    engines: {node: '>= 0.10.0'}
-    hasBin: true
-    dependencies:
-      commander: 2.20.3
-      cssfilter: 0.0.10
-    dev: false
-
   /xtend/4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}

web/plugins/com.msgbyte.webview/package.json

@@ -5,6 +5,6 @@
   "private": true,
   "dependencies": {
     "js-base64": "^3.7.2",
-    "xss": "^1.0.11"
+    "script_sanitize": "^1.2.6"
   }
 }

web/plugins/com.msgbyte.webview/src/group/GroupCustomWebPanelRender.tsx

@@ -2,17 +2,20 @@ import React, { useMemo } from 'react';
 import { encode } from 'js-base64';
 import { isValidStr } from '@capital/common';
 import { Translate } from '../translate';
-import { FilterXSS, getDefaultWhiteList } from 'xss';
-import _mapValues from 'lodash/mapValues';
+import { sanitize } from 'script_sanitize';
 
-const xss = new FilterXSS({
-  // 允许style存在
-  whiteList: {
-    ..._mapValues(getDefaultWhiteList(), (v) => [...v, 'style']),
-    style: [],
-  },
-  css: false,
-});
+function getInjectedStyle() {
+  try {
+    // 当前面板文本颜色
+    const currentTextColor = document.defaultView.getComputedStyle(
+      document.querySelector('.tc-content-background')
+    ).color;
+
+    return `<style>body { color: ${currentTextColor} }</style>`;
+  } catch (e) {
+    return '';
+  }
+}
 
 const GroupCustomWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
   const panelInfo = props.panelInfo;
@@ -24,9 +27,10 @@ const GroupCustomWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
   const html = panelInfo?.meta?.html;
   const src = useMemo(() => {
     if (isValidStr(html)) {
+      const appendHtml = getInjectedStyle(); // 额外追加的样式
       try {
         return `data:text/html;charset=utf8;base64,${encode(
-          xss.process(html)
+          sanitize(html + appendHtml, { replacementText: 'No allowed script' })
         )}`;
       } catch (e) {
         return undefined;