feat(sandbox): add strictDomSelector config

web-infra-dev · Feb 5, 2024 · 117a9ac · 117a9ac
1 parent bd8a4b1
commit 117a9ac
Show file tree

Hide file tree

Showing 9 changed files with 5,327 additions and 5,947 deletions.
diff --git a/packages/browser-vm/src/pluginify.ts b/packages/browser-vm/src/pluginify.ts
@@ -127,6 +127,7 @@ function createOptions(Garfish: interfaces.Garfish) {
           baseUrl: appInstance.entryManager.url,
           modules: compatibleOldModule(appInfo.sandbox?.modules || []),
           fixBaseUrl: Boolean(appInfo.sandbox?.fixBaseUrl),
+          strictDomSelector: Boolean(appInfo.sandbox?.strictDomSelector),
           fixStaticResourceBaseUrl: Boolean(
             appInfo.sandbox?.fixStaticResourceBaseUrl,
           ),

diff --git a/packages/browser-vm/src/proxyInterceptor/document.ts b/packages/browser-vm/src/proxyInterceptor/document.ts
@@ -32,6 +32,7 @@ export function createGetter(sandbox: Sandbox) {
 
     const rootNode = rootElm(sandbox);
     const strictIsolation = sandbox.options.strictIsolation;
+    const strictDomSelector = sandbox.options.strictDomSelector;
     const value = hasOwn(target, p)
       ? Reflect.get(target, p, receiver)
       : Reflect.get(document, p);
@@ -81,15 +82,26 @@ export function createGetter(sandbox: Sandbox) {
       }
 
       // rootNode is a Shadow dom
-      if (strictIsolation) {
+      if (strictIsolation || strictDomSelector) {
         if (p === 'body') {
           // When the node is inserted, if it is a pop-up scene,
           // it needs to be placed globally, so it is not placed outside by default.
           return findTarget(rootNode, ['body', `div[${__MockBody__}]`]);
         } else if (queryFunctions(p)) {
-          return p === 'getElementById'
-            ? (id) => rootNode.querySelector(`#${id}`)
-            : rootNode[p].bind(rootNode);
+          if (p === 'querySelector') {
+            return (selector) => {
+              if (selector === 'body') {
+                return findTarget(rootNode, ['body', `div[${__MockBody__}]`]);
+              } else if (selector === 'head') {
+                return findTarget(rootNode, ['head', `div[${__MockHead__}]`]);
+              }
+              return rootNode.querySelector(selector);
+            };
+          }
+          if (p === 'getElementById') {
+            return (id) => rootNode.querySelector(`#${id}`);
+          }
+          return rootNode[p].bind(rootNode);
         }
       }
     }

diff --git a/packages/browser-vm/src/sandbox.ts b/packages/browser-vm/src/sandbox.ts
@@ -97,6 +97,7 @@ export class Sandbox {
       fixStaticResourceBaseUrl: true,
       disableWith: false,
       strictIsolation: false,
+      strictDomSelector: false,
       disableCollect: false,
       el: () => null,
       styleScopeId: () => '',

diff --git a/packages/browser-vm/src/types.ts b/packages/browser-vm/src/types.ts
@@ -27,6 +27,7 @@ export interface SandboxOptions {
   disableWith?: boolean;
   strictIsolation?: boolean;
   disableElementtiming?: boolean;
+  strictDomSelector?: boolean;
   disableCollect?: boolean;
   modules?: Array<Module>;
   addSourceList?: (

diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts
@@ -113,6 +113,7 @@ export const createDefaultOptions = () => {
       fixStaticResourceBaseUrl: true,
       disableWith: false,
       strictIsolation: false,
+      strictDomSelector: true,
       disableElementtiming: false,
       fixOwnerDocument: false,
     },

diff --git a/packages/core/src/interface.ts b/packages/core/src/interface.ts
@@ -80,6 +80,7 @@ export namespace interfaces {
     fixStaticResourceBaseUrl?: boolean;
     disableWith?: boolean;
     strictIsolation?: boolean;
+    strictDomSelector?: boolean;
     disableElementtiming?: boolean;
     fixOwnerDocument?: boolean;
   }

diff --git a/packages/utils/src/sentry.ts b/packages/utils/src/sentry.ts
@@ -183,7 +183,6 @@ export function filterAndWrapEventListener(
       // Through error stack source file, and the source of the static resources determine whether the current error belongs to the current application
       // if belong to the current application environment monitoring error
       if (sourceList) {
-        console.log('**********', computeErrorUrl(e));
         const res = sourceList.find((item) => {
           return item.indexOf(computeErrorUrl(e)) !== -1;
         });