runtime: switch iframe sandbox transport to MessageChannel

unadlib · unadlib · commit ad4b60e53e74 · 2026-02-16T02:21:59.000+08:00
diff --git a/packages/runtime/src/sandbox-iframe-source.ts b/packages/runtime/src/sandbox-iframe-source.ts
@@ -1,68 +1,83 @@
 export function buildIframeSandboxSrcdoc(channelLiteral: string): string {
   return /* html */ `<!doctype html><html><body><script>
 const CHANNEL = ${channelLiteral};
-window.addEventListener("message", async (event) => {
+window.addEventListener("message", (event) => {
   const data = event.data;
-  if (!data || data.channel !== CHANNEL) {
+  if (!data || data.channel !== CHANNEL || data.type !== "init") {
     return;
   }
-  const request = data.request || {};
+  const port = event.ports && event.ports[0];
+  if (!port) {
+    return;
+  }
+
   const safeSend = (payload) => {
     try {
-      parent.postMessage({ channel: CHANNEL, ...payload }, "*");
+      port.postMessage({ type: "result", ...payload });
       return true;
     } catch (postError) {
       try {
         const postMessageError =
           postError && typeof postError === "object" && "message" in postError
             ? String(postError.message)
             : String(postError);
-        parent.postMessage(
-          {
-            channel: CHANNEL,
-            ok: false,
-            error: "Sandbox response is not serializable: " + postMessageError,
-          },
-          "*",
-        );
+        port.postMessage({
+          type: "result",
+          ok: false,
+          error: "Sandbox response is not serializable: " + postMessageError,
+        });
       } catch {
         // Ignore terminal postMessage failures.
       }
       return false;
     }
   };
-  try {
-    const moduleUrl = URL.createObjectURL(
-      new Blob([String(request.code ?? "")], { type: "text/javascript" }),
-    );
+
+  port.onmessage = async (portEvent) => {
+    const envelope = portEvent.data;
+    if (!envelope || envelope.type !== "execute") {
+      return;
+    }
+    const request = envelope.request || {};
+
     try {
-      const namespace = await import(moduleUrl);
-      const exportName =
-        typeof request.exportName === "string" &&
-        request.exportName.trim().length > 0
-          ? request.exportName.trim()
-          : "default";
-      const selected = namespace[exportName];
-      if (selected === undefined) {
-        throw new Error(
-          'Runtime source export "' + exportName + '" is missing',
-        );
+      const moduleUrl = URL.createObjectURL(
+        new Blob([String(request.code ?? "")], { type: "text/javascript" }),
+      );
+      try {
+        const namespace = await import(moduleUrl);
+        const exportName =
+          typeof request.exportName === "string" &&
+          request.exportName.trim().length > 0
+            ? request.exportName.trim()
+            : "default";
+        const selected = namespace[exportName];
+        if (selected === undefined) {
+          throw new Error(
+            'Runtime source export "' + exportName + '" is missing',
+          );
+        }
+        const output =
+          typeof selected === "function"
+            ? await selected(request.runtimeInput ?? {})
+            : selected;
+        safeSend({ ok: true, output });
+      } finally {
+        URL.revokeObjectURL(moduleUrl);
       }
-      const output =
-        typeof selected === "function"
-          ? await selected(request.runtimeInput ?? {})
-          : selected;
-      safeSend({ ok: true, output });
-    } finally {
-      URL.revokeObjectURL(moduleUrl);
+    } catch (error) {
+      const message =
+        error && typeof error === "object" && "message" in error
+          ? String(error.message)
+          : String(error);
+      safeSend({ ok: false, error: message });
     }
-  } catch (error) {
-    const message =
-      error && typeof error === "object" && "message" in error
-        ? String(error.message)
-        : String(error);
-    safeSend({ ok: false, error: message });
+  };
+
+  if (typeof port.start === "function") {
+    port.start();
   }
-});
+  port.postMessage({ type: "ready" });
+}, { once: true });
 </script></body></html>`;
 }
diff --git a/packages/runtime/src/sandbox.ts b/packages/runtime/src/sandbox.ts
@@ -210,6 +210,9 @@ async function executeSourceInIframeSandbox(
 
   const channel = `renderify-runtime-source-${options.request.id}`;
   const channelLiteral = JSON.stringify(channel);
+  const channelPair = new MessageChannel();
+  const channelPort = channelPair.port1;
+  const iframePort = channelPair.port2;
   iframe.srcdoc = buildIframeSandboxSrcdoc(channelLiteral);
 
   document.body.appendChild(iframe);
@@ -227,7 +230,17 @@ async function executeSourceInIframeSandbox(
       if (options.signal && onAbort) {
         options.signal.removeEventListener("abort", onAbort);
       }
-      window.removeEventListener("message", onMessage);
+      channelPort.removeEventListener("message", onMessage);
+      try {
+        channelPort.close();
+      } catch {
+        // Ignore close failures.
+      }
+      try {
+        iframePort.close();
+      } catch {
+        // Ignore close failures.
+      }
       iframe.removeEventListener("load", onLoad);
       iframe.remove();
     };
@@ -238,14 +251,33 @@ async function executeSourceInIframeSandbox(
     }, options.timeoutMs);
 
     const onMessage = (event: MessageEvent<unknown>) => {
-      if (event.source !== iframe.contentWindow) {
+      const data = event.data as
+        | { type?: string; ok?: boolean; output?: unknown; error?: string }
+        | undefined;
+      if (!data || typeof data.type !== "string") {
         return;
       }
 
-      const data = event.data as
-        | { channel?: string; ok?: boolean; output?: unknown; error?: string }
-        | undefined;
-      if (!data || data.channel !== channel) {
+      if (data.type === "ready") {
+        try {
+          channelPort.postMessage({
+            type: "execute",
+            request: options.request,
+          });
+        } catch (error) {
+          cleanup();
+          reject(
+            new Error(
+              `Iframe sandbox failed to receive request: ${
+                error instanceof Error ? error.message : String(error)
+              }`,
+            ),
+          );
+        }
+        return;
+      }
+
+      if (data.type !== "result") {
         return;
       }
 
@@ -267,10 +299,9 @@ async function executeSourceInIframeSandbox(
         if (!iframe.contentWindow) {
           throw new Error("Iframe sandbox contentWindow is unavailable");
         }
-        iframe.contentWindow.postMessage(
-          { channel, request: options.request },
-          "*",
-        );
+        iframe.contentWindow.postMessage({ channel, type: "init" }, "*", [
+          iframePort,
+        ]);
       } catch (error) {
         cleanup();
         reject(
@@ -281,7 +312,8 @@ async function executeSourceInIframeSandbox(
       }
     };
 
-    window.addEventListener("message", onMessage);
+    channelPort.addEventListener("message", onMessage);
+    channelPort.start();
     iframe.addEventListener("load", onLoad, { once: true });
 
     if (options.signal) {
@@ -486,6 +518,7 @@ function isIframeSandboxAvailable(): boolean {
   if (
     typeof document === "undefined" ||
     typeof window === "undefined" ||
+    typeof MessageChannel !== "function" ||
     !hasRuntimeModuleBlobSupport()
   ) {
     return false;
diff --git a/tests/runtime.test.ts b/tests/runtime.test.ts
@@ -349,62 +349,65 @@ function installBrowserIframeSandboxGlobals(): () => void {
   const previousWorker = Object.getOwnPropertyDescriptor(root, "Worker");
   const previousCreateObjectURL = urlStatics.createObjectURL;
   const previousRevokeObjectURL = urlStatics.revokeObjectURL;
-
-  const windowMessageHandlers = new Set<
-    (event: MessageEvent<unknown>) => void
-  >();
-
-  const mockWindow = {
-    addEventListener(type: string, handler: EventListener): void {
-      if (type === "message") {
-        windowMessageHandlers.add(
-          handler as (event: MessageEvent<unknown>) => void,
-        );
-      }
-    },
-    removeEventListener(type: string, handler: EventListener): void {
-      if (type === "message") {
-        windowMessageHandlers.delete(
-          handler as (event: MessageEvent<unknown>) => void,
-        );
-      }
-    },
-    dispatchMessage(event: MessageEvent<unknown>): void {
-      for (const handler of windowMessageHandlers) {
-        handler(event);
-      }
-    },
-  } as unknown as Window & {
-    dispatchMessage(event: MessageEvent<unknown>): void;
-  };
+  const mockWindow = {} as Window;
 
   class MockIframeElement {
     private readonly loadHandlers = new Set<EventListener>();
     readonly style: Record<string, string> = {};
     srcdoc = "";
     contentWindow: {
-      postMessage: (payload: unknown, targetOrigin: string) => void;
+      postMessage: (
+        payload: unknown,
+        targetOrigin: string,
+        transfer?: unknown[],
+      ) => void;
     };
 
     constructor() {
       const contentWindowRef = {
-        postMessage: (payload: unknown) => {
-          const requestPayload = payload as {
+        postMessage: (
+          payload: unknown,
+          _targetOrigin: string,
+          transfer?: unknown[],
+        ) => {
+          const initPayload = payload as {
             channel?: string;
-            request?: {
-              runtimeInput?: {
-                state?: {
-                  count?: number;
+            type?: string;
+          };
+          const port = transfer?.[0] as
+            | {
+                postMessage: (value: unknown) => void;
+                addEventListener?: (
+                  type: string,
+                  listener: EventListener,
+                  options?: AddEventListenerOptions,
+                ) => void;
+              }
+            | undefined;
+          if (!port || initPayload.type !== "init") {
+            return;
+          }
+
+          port.addEventListener?.(
+            "message",
+            ((event: MessageEvent<unknown>) => {
+              const executePayload = event.data as {
+                type?: string;
+                request?: {
+                  runtimeInput?: {
+                    state?: {
+                      count?: number;
+                    };
+                  };
                 };
               };
-            };
-          };
-          const count = requestPayload.request?.runtimeInput?.state?.count ?? 0;
-          queueMicrotask(() => {
-            mockWindow.dispatchMessage({
-              source: contentWindowRef,
-              data: {
-                channel: requestPayload.channel,
+              if (executePayload.type !== "execute") {
+                return;
+              }
+              const count =
+                executePayload.request?.runtimeInput?.state?.count ?? 0;
+              port.postMessage({
+                type: "result",
                 ok: true,
                 output: {
                   type: "element",
@@ -416,8 +419,16 @@ function installBrowserIframeSandboxGlobals(): () => void {
                     },
                   ],
                 },
-              },
-            } as MessageEvent<unknown>);
+              });
+            }) as EventListener,
+            { once: true },
+          );
+
+          queueMicrotask(() => {
+            port.postMessage({
+              type: "ready",
+              channel: initPayload.channel,
+            });
           });
         },
       };
diff --git a/tests/sandbox.test.ts b/tests/sandbox.test.ts
