fix: iframe src set to about:blank

Author: adamdbradley

src/lib/web-worker/worker-iframe.ts

@@ -30,36 +30,38 @@ export const patchHTMLIFrameElement = (WorkerHTMLIFrameElement: any) => {
         return src;
       },
       set(src: string) {
-        let xhr = new XMLHttpRequest();
-        let xhrStatus: number;
-        let env = getIframeEnv(this);
+        if (!src.startsWith('about')) {
+          let xhr = new XMLHttpRequest();
+          let xhrStatus: number;
+          let env = getIframeEnv(this);
 
-        env.$location$.href = src = resolveUrl(getEnv(this), src);
-        env.$isLoading$ = 1;
+          env.$location$.href = src = resolveUrl(getEnv(this), src);
+          env.$isLoading$ = 1;
 
-        setInstanceStateValue(this, StateProp.loadErrorStatus, undefined);
+          setInstanceStateValue(this, StateProp.loadErrorStatus, undefined);
 
-        xhr.open('GET', src, false);
-        xhr.send();
-        xhrStatus = xhr.status;
+          xhr.open('GET', src, false);
+          xhr.send();
+          xhrStatus = xhr.status;
 
-        if (xhrStatus > 199 && xhrStatus < 300) {
-          setter(
-            this,
-            ['srcdoc'],
-            `<base href="${src}">` +
-              xhr.responseText
-                .replace(/<script>/g, `<script type="${SCRIPT_TYPE}">`)
-                .replace(/<script /g, `<script type="${SCRIPT_TYPE}" `)
-                .replace(/text\/javascript/g, SCRIPT_TYPE) +
-              getPartytownScript()
-          );
+          if (xhrStatus > 199 && xhrStatus < 300) {
+            setter(
+              this,
+              ['srcdoc'],
+              `<base href="${src}">` +
+                xhr.responseText
+                  .replace(/<script>/g, `<script type="${SCRIPT_TYPE}">`)
+                  .replace(/<script /g, `<script type="${SCRIPT_TYPE}" `)
+                  .replace(/text\/javascript/g, SCRIPT_TYPE) +
+                getPartytownScript()
+            );
 
-          sendToMain(true);
-          webWorkerCtx.$postMessage$([WorkerMessageType.InitializeNextScript, env.$winId$]);
-        } else {
-          setInstanceStateValue(this, StateProp.loadErrorStatus, xhrStatus);
-          env.$isLoading$ = 0;
+            sendToMain(true);
+            webWorkerCtx.$postMessage$([WorkerMessageType.InitializeNextScript, env.$winId$]);
+          } else {
+            setInstanceStateValue(this, StateProp.loadErrorStatus, xhrStatus);
+            env.$isLoading$ = 0;
+          }
         }
       },
     },

tests/platform/iframe/iframe.spec.ts

@@ -61,6 +61,11 @@ test('iframe', async ({ page }) => {
   const testAboutBlankSrc = page.locator('#testAboutBlankSrc');
   await expect(testAboutBlankSrc).toHaveText('');
 
+  const testSetAboutBlankHref = page.locator('#testSetAboutBlankHref');
+  const testSetAboutBlankSrc = page.locator('#testSetAboutBlankSrc');
+  await expect(testSetAboutBlankSrc).toHaveText('about:blank');
+  await expect(testSetAboutBlankHref).toHaveText('');
+
   await page.waitForSelector('.testSetCallWindowParentFn');
   const testSetCallWindowParentFn = page.locator('#testSetCallWindowParentFn');
   await expect(testSetCallWindowParentFn).toHaveText('1985 1985');

tests/platform/iframe/index.html

@@ -399,6 +399,26 @@ <h1>Iframe</h1>
         </script>
       </li>
 
+      <li>
+        <strong>set about:blank location</strong>
+        <code id="testSetAboutBlankHref">--</code>
+        <code id="testSetAboutBlankSrc">--</code>
+        <script type="text/partytown">
+          (function () {
+            const elm = document.getElementById('testSetAboutBlankHref');
+
+            const iframe = document.createElement('iframe');
+            iframe.src = 'about:blank';
+            elm.parentNode.appendChild(iframe);
+
+            const elm2 = document.getElementById('testSetAboutBlankSrc');
+            elm2.textContent = String(iframe.contentWindow.location.href);
+
+            elm.textContent = String(iframe.src);
+          })();
+        </script>
+      </li>
+
       <li>
         <strong>set/call window.parent.fn()</strong>
         <code id="testSetCallWindowParentFn"></code>