inspector/clients/web/static/sandbox_proxy.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="color-scheme" content="light dark" />
    <!-- Isolation model: the inner iframe is sandboxed WITHOUT
         `allow-same-origin`, so the untrusted app runs under an opaque
         ("null") origin. That is the structural boundary — the app cannot
         touch this proxy's DOM, window, or cookies, so it cannot bypass its
         own CSP by executing in the parent's realm. The proxy itself is
         additionally served with a restrictive CSP header (see
         server/sandbox-controller.ts) so any future regression that re-grants
         same-origin still gains nothing. The default sandbox value
         ("allow-scripts allow-forms") may be narrowed per app via the
         resource-ready message's `sandbox` field; `allow-same-origin` is
         always stripped from a server-supplied value.

         Network/resource egress from the inner document is constrained by a
         Content-Security-Policy that the HOST builds and bakes into the
         delivered HTML before it reaches this proxy (see
         src/utils/sandbox-csp.ts). The proxy assigns that pre-wrapped document
         to `srcdoc` verbatim — it never parses or injects into the untrusted
         bytes — so the CSP `<meta>` is guaranteed to be the first `<head>`
         child of the inner document. -->
    <title>MCP-UI Proxy</title>
    <style>
      html,
      body {
        margin: 0;
        height: 100vh;
        width: 100vw;
        /* Transparent background allows parent page to show through */
        background-color: transparent;
      }
      body {
        display: flex;
        flex-direction: column;
      }
      * {
        box-sizing: border-box;
      }
      iframe {
        background-color: transparent;
        border: 0px none transparent;
        padding: 0px;
        overflow: hidden;
        flex-grow: 1;
        /* Inherit color scheme from parent for consistent transparency */
        color-scheme: inherit;
      }
    </style>
  </head>
  <body>
    <script>
      function buildAllowAttribute(permissions) {
        if (!permissions) return "";

        const allowList = [];
        if (permissions["camera"]) allowList.push("camera");
        if (permissions["microphone"]) allowList.push("microphone");
        if (permissions["geolocation"]) allowList.push("geolocation");
        if (permissions["clipboardWrite"]) allowList.push("clipboard-write");

        return allowList.join("; ");
      }

      const ALLOWED_REFERRER_PATTERN =
        /^http:\/\/(localhost|127\.0\.0\.1)(:|\/|$)/;

      if (window.self === window.top) {
        throw new Error("This file is only to be used in an iframe sandbox.");
      }

      if (!document.referrer) {
        throw new Error("No referrer, cannot validate embedding site.");
      }

      if (!document.referrer.match(ALLOWED_REFERRER_PATTERN)) {
        throw new Error(
          `Embedding domain not allowed in referrer ${document.referrer}. (Consider updating the validation logic to allow your domain.)`,
        );
      }

      // 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;

      // The inner iframe is sandboxed without allow-same-origin, so its
      // document has an opaque origin and every postMessage from it arrives
      // with event.origin === "null" (the literal string). That value is
      // checked below as a defense-in-depth assertion; the actual identity
      // proof is `event.source === inner.contentWindow`, which a sibling
      // frame cannot forge.
      const INNER_ORIGIN = "null";

      // 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.
      try {
        window.top?.alert(
          "If you see this, the sandbox is not setup securely.",
        );
        throw "FAIL";
      } catch (e) {
        if (e === "FAIL") {
          throw new Error("The sandbox is not setup securely.");
        }

        // Expected: SecurityError confirms proper sandboxing.
      }

      // Double-iframe sandbox architecture: THIS file is the outer sandbox proxy
      // iframe on a separate origin. It creates an inner iframe for untrusted HTML
      // content. Per the specification, the Host and the Sandbox MUST have different
      // origins.
      const inner = document.createElement("iframe");
      inner.style = "width:100%; height:100%; border:none;";
      inner.setAttribute("sandbox", "allow-scripts allow-forms");
      // Note: allow attribute is set later when receiving sandbox-resource-ready notification
      // based on the permissions requested by the app
      document.body.appendChild(inner);

      const RESOURCE_READY_NOTIFICATION =
        "ui/notifications/sandbox-resource-ready";
      const PROXY_READY_NOTIFICATION = "ui/notifications/sandbox-proxy-ready";

      // Message relay: This Sandbox (outer iframe) acts as a bidirectional bridge,
      // forwarding messages between:
      //
      //   Host (parent window) ↔ Sandbox (outer frame) ↔ View (inner iframe)
      //
      // Reason: the parent window and inner iframe have different origins and can't
      // communicate directly, so the outer iframe forwards messages in both
      // directions to connect them.
      //
      // Special case: The "ui/notifications/sandbox-proxy-ready" message is
      // intercepted here (not relayed) because the Sandbox uses it to configure and
      // load the inner iframe with the view HTML content.
      //
      // Security: isolation comes from the iframe `sandbox` attribute and the
      // origin allowlist above. The CSP for the inner document is built and
      // wrapped by the host before the HTML reaches this proxy (see head
      // comment); this script writes that pre-wrapped document verbatim and
      // never parses or injects into the untrusted bytes.

      window.addEventListener("message", async (event) => {
        if (event.source === window.parent) {
          // 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, permissions } = event.data.params;
            if (typeof sandbox === "string") {
              // Never grant allow-same-origin even if the server asks for it —
              // that would let the untrusted app reach this proxy's DOM and
              // bypass its own CSP via window.parent. Sandbox tokens are
              // ASCII case-insensitive, so compare lowercased.
              const safeTokens = sandbox
                .split(/\s+/)
                .filter((t) => t && t.toLowerCase() !== "allow-same-origin");
              // Fail-closed but noisy: a server-supplied sandbox that omits
              // allow-scripts leaves the inner frame unable to run the app.
              // That's safe, but silently bricks the widget — log it so a
              // developer can see why their app never started.
              if (!safeTokens.some((t) => t.toLowerCase() === "allow-scripts")) {
                console.warn(
                  "[Sandbox] server-supplied sandbox has no allow-scripts; the app will not execute:",
                  safeTokens.join(" "),
                );
              }
              inner.setAttribute("sandbox", safeTokens.join(" "));
            }
            // Set Permission Policy allow attribute if permissions are requested
            const allowAttribute = buildAllowAttribute(permissions);
            if (allowAttribute) {
              console.log("[Sandbox] Setting allow attribute:", allowAttribute);
              inner.setAttribute("allow", allowAttribute);
            }
            if (typeof html === "string") {
              // The host has already wrapped the app's HTML in a fixed shell
              // whose first <head> child is the CSP <meta>; assign it verbatim.
              // srcdoc is the only delivery path that works without
              // allow-same-origin (document.open/write would require reaching
              // into the inner contentDocument across the opaque-origin
              // boundary). Known trade-off: a small set of libraries (e.g.
              // CesiumJS Map) don't initialise correctly under srcdoc — that
              // is accepted in exchange for the isolation guarantee.
              inner.srcdoc = html;
            }
          } else {
            if (inner && inner.contentWindow) {
              inner.contentWindow.postMessage(event.data, "*");
            }
          }
        } else if (event.source === inner.contentWindow) {
          // `event.source === inner.contentWindow` is the unforgeable identity
          // check — only the actual inner frame can satisfy it. The opaque
          // sandbox means its origin serialises as the literal string "null";
          // assert that as defense-in-depth so a future change that
          // accidentally re-grants allow-same-origin is caught here.
          if (event.origin !== INNER_ORIGIN) {
            console.error(
              "[Sandbox] Rejecting message from inner iframe with unexpected origin:",
              event.origin,
              "expected opaque:",
              INNER_ORIGIN,
            );
            return;
          }
          // Relay messages from inner frame to parent window.
          // 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 view 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,
      );
    </script>
  </body>
</html>