fix: Iframe javascript URLs (#122)

Co-authored-by: Miguel Montalvo <[email protected]>

Author: montalvomiguelo

src/lib/types.ts

@@ -529,6 +529,7 @@ export const enum NodeName {
 export const enum StateProp {
   errorHandlers = 'error',
   loadHandlers = 'load',
+  src = 0,
   loadErrorStatus = 1,
   cssRules = 2,
   innerHTML = 3,

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

@@ -10,7 +10,7 @@ import {
 import { getPartytownScript, resolveUrl } from './worker-exec';
 import { getter, sendToMain, setter } from './worker-proxy';
 import { HTMLSrcElementDescriptorMap } from './worker-src-element';
-import { setInstanceStateValue } from './worker-state';
+import { setInstanceStateValue, getInstanceStateValue } from './worker-state';
 import {
   StateProp,
   WebWorkerEnvironment,
@@ -35,10 +35,21 @@ export const patchHTMLIFrameElement = (WorkerHTMLIFrameElement: any, env: WebWor
 
     src: {
       get() {
-        let src = getIframeEnv(this).$location$.href;
+        let src = getInstanceStateValue(this, StateProp.src);
+        if (src && src.startsWith('javascript:')) {
+          return src;
+        }
+        src = getIframeEnv(this).$location$.href;
         return src.startsWith('about:') ? '' : src;
       },
       set(src: string) {
+        if (!src) {
+          return;
+        }
+        if (src.startsWith('javascript:')) {
+          setInstanceStateValue(this, StateProp.src, src);
+          return;
+        }
         if (!src.startsWith('about:')) {
           let xhr = new XMLHttpRequest();
           let xhrStatus: number;

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

@@ -69,6 +69,11 @@ export const createNodeCstr = (
         if (isIFrame) {
           // an iframe element's instanceId is also
           // the winId of its contentWindow
+          const src = getInstanceStateValue<string>(newNode, StateProp.src);
+          if (src && src.startsWith('javascript:')) {
+            const scriptContent = src.split('javascript:')[1];
+            runScriptContent(env, instanceId, scriptContent, winId, '');
+          }
           insertIframe(instanceId, newNode);
         }
         if (isScript) {

tests/platform/iframe/iframe.spec.ts

@@ -135,4 +135,8 @@ test('iframe', async ({ page }) => {
   await page.waitForSelector('.testWindowFrames');
   const testWindowFrames = page.locator('#testWindowFrames');
   await expect(testWindowFrames).toHaveText('window-frames');
+
+  await page.waitForSelector('.testSetJavascriptSrc');
+  const testSetJavascriptSrc = page.locator('#testSetJavascriptSrc');
+  await expect(testSetJavascriptSrc).toHaveText('javascript:void(0);');
 });

tests/platform/iframe/index.html

@@ -854,6 +854,23 @@ <h1>Iframe</h1>
           })();
         </script>
       </li>
+
+      <li>
+        <strong>set javascript: source</strong>
+        <code id="testSetJavascriptSrc"></code>
+        <script type="text/partytown">
+          (function() {
+            const elm = document.getElementById('testSetJavascriptSrc');
+
+            const iframe = document.createElement('iframe');
+            iframe.src = 'javascript:void(0);';
+            elm.parentNode.appendChild(iframe);
+
+            elm.textContent = iframe.src;
+            elm.className = 'testSetJavascriptSrc';
+          })();
+        </script>
+      </li>
     </ul>
 
     <hr />