From d9200ff5f34e6992c9001765eba8babda7048cab Mon Sep 17 00:00:00 2001
From: Kuitos <kuitos.lau@gmail.com>
Date: Tue, 18 Apr 2023 21:21:21 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20prevent=20element=20from=20proce?=
 =?UTF-8?q?ssing=20multi=20times=20in=20nest=20sandbox=20(#2471)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/sandbox/patchers/dynamicAppend/common.ts  |  2 +-
 .../patchers/dynamicAppend/forLooseSandbox.ts |  2 +-
 .../dynamicAppend/forStrictSandbox.ts         | 19 ++++++++++++++++++-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/sandbox/patchers/dynamicAppend/common.ts b/src/sandbox/patchers/dynamicAppend/common.ts
index 434e7ab..221d5f2 100644
--- a/src/sandbox/patchers/dynamicAppend/common.ts
+++ b/src/sandbox/patchers/dynamicAppend/common.ts
@@ -269,7 +269,7 @@ function getOverwrittenAppendChildOrInsertBefore(opts: {
 
         case SCRIPT_TAG_NAME: {
           const { src, text } = element as HTMLScriptElement;
-          // some script like jsonp maybe not support cors which should't use execScripts
+          // some script like jsonp maybe not support cors which shouldn't use execScripts
           if ((excludeAssetFilter && src && excludeAssetFilter(src)) || !isExecutableScriptType(element)) {
             return rawDOMAppendOrInsertBefore.call(this, element, refChild) as T;
           }
diff --git a/src/sandbox/patchers/dynamicAppend/forLooseSandbox.ts b/src/sandbox/patchers/dynamicAppend/forLooseSandbox.ts
index 93be8e0..48abb6e 100644
--- a/src/sandbox/patchers/dynamicAppend/forLooseSandbox.ts
+++ b/src/sandbox/patchers/dynamicAppend/forLooseSandbox.ts
@@ -71,7 +71,7 @@ export function patchLooseSandbox(
     recordStyledComponentsCSSRules(dynamicStyleSheetElements);
 
     // As now the sub app content all wrapped with a special id container,
-    // the dynamic style sheet would be removed automatically while unmoutting
+    // the dynamic style sheet would be removed automatically while unmounting
 
     return function rebuild() {
       rebuildCSSRules(dynamicStyleSheetElements, (stylesheetElement) => {
diff --git a/src/sandbox/patchers/dynamicAppend/forStrictSandbox.ts b/src/sandbox/patchers/dynamicAppend/forStrictSandbox.ts
index da1f9e5..68beeb2 100644
--- a/src/sandbox/patchers/dynamicAppend/forStrictSandbox.ts
+++ b/src/sandbox/patchers/dynamicAppend/forStrictSandbox.ts
@@ -18,6 +18,13 @@ import {
   styleElementTargetSymbol,
 } from './common';
 
+const elementAttachedSymbol = Symbol('attachedApp');
+declare global {
+  interface HTMLElement {
+    [elementAttachedSymbol]: string;
+  }
+}
+
 // Get native global window with a sandbox disgusted way, thus we could share it between qiankun instances🤪
 Object.defineProperty(nativeGlobal, '__proxyAttachContainerConfigMap__', { enumerable: false, writable: true });
 
@@ -41,9 +48,19 @@ function patchDocument(cfg: { sandbox: SandBox; speedy: boolean }) {
   const { sandbox, speedy } = cfg;
 
   const attachElementToProxy = (element: HTMLElement, proxy: Window) => {
+    // If this element has been processed by a sandbox, it should not be processed again.
+    // This usually occurs in the nested scenario, where an element is repeatedly processed by the sandbox in the nested chain.
+    if (element[elementAttachedSymbol]) return;
+
     const proxyContainerConfig = proxyAttachContainerConfigMap.get(proxy);
     if (proxyContainerConfig) {
       elementAttachContainerConfigMap.set(element, proxyContainerConfig);
+      Object.defineProperty(element, elementAttachedSymbol, {
+        enumerable: false,
+        configurable: false,
+        writable: false,
+        value: proxy.name,
+      });
     }
   };
 
@@ -67,7 +84,7 @@ function patchDocument(cfg: { sandbox: SandBox; speedy: boolean }) {
         const value = (<any>target)[p];
         // must rebind the function to the target otherwise it will cause illegal invocation error
         if (typeof value === 'function' && !isBoundedFunction(value)) {
-          return function proxiedFunction(...args: unknown[]) {
+          return function proxyFunction(...args: unknown[]) {
             return value.call(target, ...args.map((arg) => (arg === receiver ? target : arg)));
           };
         }