From 2ebb0ef88473f8b25d1a045a720e239b20e609ca Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 9 Apr 2022 16:23:17 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8=E6=9B=B4?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BB=E9=87=8F=E7=BA=A7=E7=9A=84=E6=96=B9=E6=A1=88?=
 =?UTF-8?q?=E6=9B=BF=E6=8D=A2xss=E5=81=9Ahtml=E4=BB=A3=E7=A0=81sanitize?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=B9=B6=E5=B0=86=E5=A4=96?=
 =?UTF-8?q?=E9=83=A8=E7=9A=84=E9=85=8D=E8=89=B2=E6=96=B9=E6=A1=88=E6=B3=A8?=
 =?UTF-8?q?=E5=85=A5html=E4=BB=A3=E7=A0=81=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pnpm-lock.yaml                                | 22 +++++-----------
 web/plugins/com.msgbyte.webview/package.json  |  2 +-
 .../src/group/GroupCustomWebPanelRender.tsx   | 26 +++++++++++--------
 3 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 19e48dec..0fb0a5e5 100644
--- a/pnpm-lock.yaml
+++ b/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'}
diff --git a/web/plugins/com.msgbyte.webview/package.json b/web/plugins/com.msgbyte.webview/package.json
index b564ee35..77fc4a5f 100644
--- a/web/plugins/com.msgbyte.webview/package.json
+++ b/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"
   }
 }
diff --git a/web/plugins/com.msgbyte.webview/src/group/GroupCustomWebPanelRender.tsx b/web/plugins/com.msgbyte.webview/src/group/GroupCustomWebPanelRender.tsx
index 33b56ca3..30d4614c 100644
--- a/web/plugins/com.msgbyte.webview/src/group/GroupCustomWebPanelRender.tsx
+++ b/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;