refactor: use file stream read and write instead of blobUrl to render custom html panel

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

@@ -4,7 +4,6 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "script_sanitize": "^1.2.6",
     "url-regex": "^5.0.0"
   }
 }

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

@@ -1,8 +1,5 @@
-import React, { useMemo } from 'react';
-import { isValidStr } from '@capital/common';
+import React, { useEffect, useRef } from 'react';
 import { Translate } from '../translate';
-import { sanitize } from 'script_sanitize';
-import { WebviewKeepAlive } from '@capital/component';
 
 function getInjectedStyle() {
   try {
@@ -17,51 +14,27 @@ function getInjectedStyle() {
   }
 }
 
-const cacheMap = new Map<string, string>();
-
-function createInlineUrl(html: string): string | undefined {
-  if (cacheMap.has(html)) {
-    return cacheMap.get(html);
-  }
-
-  if (isValidStr(html)) {
-    const appendHtml = getInjectedStyle(); // 额外追加的样式
-    try {
-      const blob = new Blob(
-        [
-          sanitize(html + appendHtml, {
-            replacementText: 'No allowed script',
-          }),
-        ],
-        {
-          type: 'text/html',
-        }
-      );
+const GroupCustomWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
+  const panelInfo = props.panelInfo;
+  const ref = useRef<HTMLIFrameElement>(null);
+  const html = panelInfo?.meta?.html;
 
-      const url = window.URL.createObjectURL(blob);
-      cacheMap.set(html, url);
-      return url;
-    } catch (e) {
-      return undefined;
+  useEffect(() => {
+    if (!ref.current || !html) {
+      return;
     }
-  } else {
-    return undefined;
-  }
-}
 
-const GroupCustomWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
-  const panelInfo = props.panelInfo;
+    const doc = ref.current.contentWindow.document;
+    doc.open();
+    doc.writeln(getInjectedStyle(), html);
+    doc.close();
+  }, [html]);
 
   if (!panelInfo) {
     return <div>{Translate.notfound}</div>;
   }
 
-  const html = panelInfo?.meta?.html;
-  const url = useMemo(() => {
-    return createInlineUrl(html);
-  }, [html]);
-
-  return <WebviewKeepAlive className="w-full h-full" url={url} />;
+  return <iframe ref={ref} />;
 };
 GroupCustomWebPanelRender.displayName = 'GroupCustomWebPanelRender';
 

pnpm-lock.yaml

@@ -1201,9 +1201,6 @@ importers:
 
   client/web/plugins/com.msgbyte.webview:
     dependencies:
-      script_sanitize:
-        specifier: ^1.2.6
-        version: 1.2.6
       url-regex:
         specifier: ^5.0.0
         version: 5.0.0
@@ -31954,10 +31951,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /script_sanitize@1.2.6:
-    resolution: {integrity: sha512-CA53o9tyResT5Sq8HT4w6jcmHoYtfbBxRKvaBQc0Iw0kS4+c9MDNwl1ReUcFjbb/GFm8YjB7diTJE10MWOnHNQ==}
-    dev: false
-
   /scroll-into-view-if-needed@2.2.20:
     resolution: {integrity: sha512-P9kYMrhi9f6dvWwTGpO5I3HgjSU/8Mts7xL3lkoH5xlewK7O9Obdc5WmMCzppln7bCVGNmf3qfoZXrpCeyNJXw==}
     dependencies: