fix: Add missing origin parameter to PostMessageTransport default constructor, verify origins in example sandbox proxy (#207)

* fix(app): add source validation to default PostMessageTransport

App.connect() now passes window.parent as both eventTarget and eventSource,
enabling source validation by default. This ensures apps only accept
messages from their parent window, preventing potential cross-app
message spoofing attacks.

Previously, the default transport only specified the target but not the
source for validation, meaning apps would accept messages from ANY window.

* fix(sandbox): add origin validation for host messages

The sandbox proxy now validates that messages from the parent window
come from the expected host origin (derived from document.referrer).
This prevents malicious pages from sending spoofed messages to the sandbox.

Changes:
- Extract EXPECTED_HOST_ORIGIN from document.referrer
- Validate event.origin against expected origin for parent messages
- Use specific origin instead of '*' when sending to parent
- Reject and log messages from unexpected origins

This addresses the TODO comment that was previously in the code.

* validate messages from app come from same origin as sandbox proxy

* fix(basic-host): be resilient to individual server connection failures

Use Promise.allSettled instead of Promise.all when connecting to
servers, so that a single server failure doesn't crash the entire UI.
Failed connections are logged as warnings but the UI continues with
the servers that connected successfully.

Also fixes video-resource-server missing server-utils.ts.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

---------

Co-authored-by: Claude <[email protected]>

Author: ochafik

examples/basic-host/src/index.tsx

@@ -350,7 +350,27 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
 async function connectToAllServers(): Promise<ServerInfo[]> {
   const serverUrlsResponse = await fetch("/api/servers");
   const serverUrls = (await serverUrlsResponse.json()) as string[];
-  return Promise.all(serverUrls.map((url) => connectToServer(new URL(url))));
+
+  // Use allSettled to be resilient to individual server failures
+  const results = await Promise.allSettled(
+    serverUrls.map((url) => connectToServer(new URL(url)))
+  );
+
+  const servers: ServerInfo[] = [];
+  for (let i = 0; i < results.length; i++) {
+    const result = results[i];
+    if (result.status === "fulfilled") {
+      servers.push(result.value);
+    } else {
+      console.warn(`[HOST] Failed to connect to ${serverUrls[i]}:`, result.reason);
+    }
+  }
+
+  if (servers.length === 0 && serverUrls.length > 0) {
+    throw new Error(`Failed to connect to any servers (${serverUrls.length} attempted)`);
+  }
+
+  return servers;
 }
 
 createRoot(document.getElementById("root")!).render(

examples/basic-host/src/sandbox.ts

@@ -16,6 +16,12 @@ if (!document.referrer.match(ALLOWED_REFERRER_PATTERN)) {
   );
 }
 
+// Extract the expected host origin from the referrer for origin validation.
+// This is the origin we expect all parent messages to come from.
+const EXPECTED_HOST_ORIGIN = new URL(document.referrer).origin;
+
+const OWN_ORIGIN = new URL(window.location.href).origin;
+
 // Security self-test: verify iframe isolation is working correctly.
 // This MUST throw a SecurityError -- if `window.top` is accessible, the sandbox
 // configuration is dangerously broken and untrusted content could escape.
@@ -79,8 +85,18 @@ function buildCspMetaTag(csp?: { connectDomains?: string[]; resourceDomains?: st
 
 window.addEventListener("message", async (event) => {
   if (event.source === window.parent) {
-    // NOTE: In production you'll also want to validate `event.origin` against
-    // your Host domain.
+    // Validate that messages from parent come from the expected host origin.
+    // This prevents malicious pages from sending messages to this sandbox.
+    if (event.origin !== EXPECTED_HOST_ORIGIN) {
+      console.error(
+        "[Sandbox] Rejecting message from unexpected origin:",
+        event.origin,
+        "expected:",
+        EXPECTED_HOST_ORIGIN
+      );
+      return;
+    }
+
     if (event.data && event.data.method === RESOURCE_READY_NOTIFICATION) {
       const { html, sandbox, csp } = event.data.params;
       if (typeof sandbox === "string") {
@@ -112,14 +128,25 @@ window.addEventListener("message", async (event) => {
       }
     }
   } else if (event.source === inner.contentWindow) {
+    if (event.origin !== OWN_ORIGIN) {
+      console.error(
+        "[Sandbox] Rejecting message from inner iframe with unexpected origin:",
+        event.origin,
+        "expected:",
+        OWN_ORIGIN
+      );
+      return;
+    }
     // Relay messages from inner frame to parent window.
-    window.parent.postMessage(event.data, "*");
+    // Use specific origin instead of "*" to prevent message interception.
+    window.parent.postMessage(event.data, EXPECTED_HOST_ORIGIN);
   }
 });
 
 // Notify the Host that the Sandbox is ready to receive Guest UI HTML.
+// Use specific origin instead of "*" to ensure only the expected host receives this.
 window.parent.postMessage({
   jsonrpc: "2.0",
   method: PROXY_READY_NOTIFICATION,
   params: {},
-}, "*");
+}, EXPECTED_HOST_ORIGIN);

src/app.ts

@@ -1027,7 +1027,10 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    * @see {@link PostMessageTransport} for the typical transport implementation
    */
   override async connect(
-    transport: Transport = new PostMessageTransport(window.parent),
+    transport: Transport = new PostMessageTransport(
+      window.parent,
+      window.parent,
+    ),
     options?: RequestOptions,
   ): Promise<void> {
     await super.connect(transport);