diff --git a/.gitignore b/.gitignore
index 822fbfab3..896b2a161 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,6 +22,5 @@ coverage/
 a2a_agents/python/a2ui_agent/src/a2ui/assets/**/*.json
 ## new agent SDK path
 agent_sdks/python/src/a2ui/assets/**/*.json
-## Generated JS file from the strictly-typed `sandbox.ts`. 
-samples/client/angular/projects/mcp_calculator/public/sandbox_iframe/sandbox.js
-*.tsbuildinfo
+## Generated files for sandbox frame.
+samples/client/angular/projects/mcp_calculator/public/sandbox_iframe/
diff --git a/samples/client/angular/package.json b/samples/client/angular/package.json
index db5af3a29..cc6999c4d 100644
--- a/samples/client/angular/package.json
+++ b/samples/client/angular/package.json
@@ -14,7 +14,7 @@
     "build:renderer": "cd ../../../renderers && for dir in 'web_core' 'markdown/markdown-it'; do (cd \"$dir\" && npm install && npm run build); done",
     "serve:agent:restaurant": "cd ../../agent/adk/restaurant_finder && uv run .",
     "demo:restaurant": "npm run build:renderer && concurrently -k -n \"AGENT,WEB\" -c \"magenta,blue\" \"npm run serve:agent:restaurant\" \"npm start -- restaurant\"",
-    "build:sandbox": "esbuild projects/mcp_calculator/public/sandbox_iframe/sandbox.ts --bundle --outfile=projects/mcp_calculator/public/sandbox_iframe/sandbox.js --format=esm --platform=browser"
+    "build:sandbox": "esbuild ../shared/sandbox_iframe/sandbox.ts --bundle --outfile=projects/mcp_calculator/public/sandbox_iframe/sandbox.js --format=esm --platform=browser --alias:@modelcontextprotocol/ext-apps/app-bridge=./node_modules/@modelcontextprotocol/ext-apps/dist/src/app-bridge.js && cp ../shared/sandbox_iframe/sandbox.html projects/mcp_calculator/public/sandbox_iframe/sandbox.html"
   },
   "prettier": {
     "printWidth": 100,
diff --git a/samples/client/angular/projects/mcp_calculator/public/sandbox_iframe/README.md b/samples/client/angular/projects/mcp_calculator/public/sandbox_iframe/README.md
deleted file mode 100644
index f2e2f98c6..000000000
--- a/samples/client/angular/projects/mcp_calculator/public/sandbox_iframe/README.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Sandbox Iframe
-
-This directory contains the `sandbox.html` and its associated resources.
-
-## Purpose
-
-`sandbox.html` is designed to be loaded into an `<iframe>` to provide a secure,
-isolated environment for running MCP (Model Context Protocol) applications. It
-acts as a bridge between the host application (MCP Calculator) and the untrusted
-or external MCP apps, managing communication via `postMessage`.
-
-## Development
-
-The logic for the sandbox is written in `sandbox.ts` and must be compiled to
-`sandbox.js` to be executable by the browser.
-
-### Build Command
-
-To generate `sandbox.js` from `sandbox.ts`, run the following command from the
-`samples/client/angular` directory:
-
-```bash
-npm run build:sandbox
-```
-
-This ensures that all dependencies (like `@modelcontextprotocol/ext-apps`) are
-correctly bundled.
diff --git a/samples/client/angular/projects/mcp_calculator/public/sandbox_iframe/sandbox.html b/samples/client/angular/projects/mcp_calculator/public/sandbox_iframe/sandbox.html
deleted file mode 100644
index 4ecb7079d..000000000
--- a/samples/client/angular/projects/mcp_calculator/public/sandbox_iframe/sandbox.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!--
- Copyright 2025 Google LLC
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
-      https://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MCP App Sandbox</title>
-    <style>
-        body, html {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-        }
-        #content {
-            width: 100%;
-            height: 100%;
-            border: none;
-        }
-    </style>
-</head>
-<body>
-    <div id="content"></div>
-    <script type="module" src="sandbox.js"></script>
-</body>
-</html>
diff --git a/samples/client/angular/projects/mcp_calculator/public/sandbox_iframe/sandbox.ts b/samples/client/angular/projects/mcp_calculator/public/sandbox_iframe/sandbox.ts
deleted file mode 100644
index 56002a0d8..000000000
--- a/samples/client/angular/projects/mcp_calculator/public/sandbox_iframe/sandbox.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-/*
- Copyright 2025 Google LLC
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
-      https://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
- */
-
-import {
-    AppBridge,
-    PostMessageTransport,
-    SANDBOX_PROXY_READY_METHOD,
-    SANDBOX_RESOURCE_READY_METHOD
-} from '@modelcontextprotocol/ext-apps/app-bridge';
-
-/**
- * Note on "sandbox" terminology:
- * The primary functionality of this unit (sandbox.html/ts) is to serve a sandboxed
- * environment for the McpApp component. 
- *
- * The sandbox.html is simply a webpage that contains a sandboxed inner iframe.
- * The `sandbox` property is an iframe attribute that acts as an allow-list rather than a
- * block-list. By default (when it is ''), the iframe will not allow anything, ensuring
- * the environment is as vacuum-sealed as possible. Individual features can be enabled
- * by setting the `sandbox` property when the host (McpApp component) triggers the
- * SANDBOX_RESOURCE_READY_METHOD
- */
-
-// Initialize AppBridge
-const bridge = new AppBridge(
-    null, // No client in sandbox
-    { name: 'MCP Sandbox', version: '1.0.0' },
-    {
-        serverTools: {},
-        logging: {}
-    }
-);
-
-// By default no features will be allowed for the sandbox iframe.
-const DEFAULT_SANDBOX_ALLOWED_FEATURES = '';
-
-let innerFrameWindow: Window | null = null;
-
-bridge.oncalltool = async (params: any) => {
-    // Forward tool calls to parent if needed, or handle locally
-    // For now, we just log
-    console.log('[Sandbox] Tool call:', params);
-    // We can also postMessage back to parent manually if bridge doesn't handle it.
-    // The implementation of forwarding logic would go here
-    // For now, throw to indicate not implemented in sandbox
-    throw new Error('Tool execution not supported in sandbox directly');
-};
-
-// Notify parent we are ready (standard)
-window.parent.postMessage({ method: SANDBOX_PROXY_READY_METHOD }, window.location.origin);
-
-/**
- * Renders the provided HTML inside a nested, sandboxed iframe.
- *
- * This follows the **Double Iframe Isolation Pattern**:
- * 1. The outer iframe (this script) is same-origin with the parent app, preventing
- *    security exceptions from browser extensions and DevTools.
- * 2. This function creates a nested, heavily sandboxed inner iframe to render
- *    untrusted third-party content.
- * 3. By default, no features are allowed for the inner iframe, isolating it from
- *    the rest of the application.
- *
- * @param html The raw HTML string to render inside the iframe's srcdoc.
- * @param sandbox Allowed features for the sandbox attribute (e.g., 'allow-scripts').
- */
-function renderNestedIframe(html: string, sandbox?: string): void {
-    const content = document.getElementById('content');
-    if (!content) {
-        console.error('[Sandbox] Content container not found');
-        return;
-    }
-
-    const innerFrame = document.createElement('iframe');
-    innerFrame.srcdoc = html;
-    innerFrame.style.width = '100%';
-    innerFrame.style.height = '100%';
-    innerFrame.style.border = 'none';
-    innerFrame.sandbox = sandbox || DEFAULT_SANDBOX_ALLOWED_FEATURES;
-
-    content.innerHTML = '';
-    content.appendChild(innerFrame);
-    innerFrameWindow = innerFrame.contentWindow;
-}
-
-// Listen for resource ready message
-window.addEventListener('message', async (event) => {
-    if (event.source === window.parent) {
-        // From Parent (Angular App)
-        if (event.origin !== window.location.origin) {
-            return;
-        }
-
-        const data = event.data;
-        if (data && data.method === SANDBOX_RESOURCE_READY_METHOD) {
-            const { html, sandbox } = data.params;
-            if (html) {
-                renderNestedIframe(html, sandbox);
-            }
-        } else {
-            // TODO: Enable downward communication from parent to inner iframe
-            // so that the MCP Apps loaded within can receive messages from the host.
-            console.log('[Sandbox] Received message from parent:', data);
-        }
-    } else if (innerFrameWindow && event.source === innerFrameWindow) {
-        // Allow messages to pass through to the parent only if they come from 
-        // the inner iframe to prevent the parent from receiving messages from
-        // other iframes on the same page. - This is where the outer-layer iframe
-        // acts as the guard for the parent 
-        window.parent.postMessage(event.data, window.location.origin);
-    }
-});
-
-// Initialize transport with parent
-const transport = new PostMessageTransport(window.parent, window.parent);
-await bridge.connect(transport);
diff --git a/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/mcp-app.ts b/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/mcp-app.ts
index 35b8becca..93de8c842 100644
--- a/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/mcp-app.ts
+++ b/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/mcp-app.ts
@@ -143,10 +143,16 @@ export class McpApp
 
     window.addEventListener('message', this.messageHandler);
 
-    // Set src to trigger load AFTER listener is ready
-    // TODO: Make the sandbox URL configurable. To ensure CORS encapsulation, the sandbox
-    // should be served from a different origin than the host app.
-    const sandboxUrl = 'sandbox_iframe/sandbox.html';
+    
+    // Check for query param to opt-out of origin toggle (for testing)
+    const urlParams = new URLSearchParams(window.location.search);
+    const disableSecuritySelfTest = urlParams.get('disable_security_self_test') === 'true';
+
+    const currentOrigin = window.location.origin;
+    let sandboxUrl = `${currentOrigin}/sandbox_iframe/sandbox.html`;
+    if (disableSecuritySelfTest) {
+      sandboxUrl += '?disable_security_self_test=true';
+    }
     this.iframeSrc.set(
       this.sanitizer.bypassSecurityTrustResourceUrl(sandboxUrl),
     );
diff --git a/samples/client/shared/sandbox_iframe/README.md b/samples/client/shared/sandbox_iframe/README.md
index 25f57269b..26e6ac0ab 100644
--- a/samples/client/shared/sandbox_iframe/README.md
+++ b/samples/client/shared/sandbox_iframe/README.md
@@ -15,7 +15,7 @@ A2UI utilizes a **double-iframe isolation pattern** to run untrusted third-party
 
 Testing for any changes in this directory requires bringing up the relevant clients and servers.
 
-### Contact Multi-Surface Sample (Lit & ADK Agent)
+### 1. Contact Multi-Surface Sample (Lit & ADK Agent)
 
 This test verifies the sandbox with a Lit-based client and an ADK-based A2A agent.
 
@@ -26,3 +26,18 @@ This test verifies the sandbox with a Lit-based client and an ADK-based A2A agen
   - Path: `../../lit/contact/`
   - Command: `npm run dev` (requires building the Lit renderer first)
   - URL: `http://localhost:5173/`
+
+### 2. MCP Apps (Calculator) (Angular)
+
+This test verifies the sandbox with an Angular-based client, an MCP Proxy Agent, and a remote MCP Server.
+
+- **MCP Server (Calculator)**:
+  - Path: `../../../agent/mcp/mcp-apps-calculator/`
+  - Command: `uv run .` (runs on port 8000)
+- **MCP Apps Proxy Agent**:
+  - Path: `../../../agent/adk/mcp_app_proxy/`
+  - Command: `uv run .` (requires `GEMINI_API_KEY` in `.env`)
+- **Angular Client App**:
+  - Path: `../../angular/`
+  - Command: `npm start -- mcp_calculator` (requires `npm run build:sandbox` and `npm install`)
+  - URL: [`http://localhost:4200/?disable_security_self_test=true`](http://localhost:4200/?disable_security_self_test=true)
diff --git a/samples/client/shared/sandbox_iframe/sandbox.ts b/samples/client/shared/sandbox_iframe/sandbox.ts
index e750637d4..fd52381d5 100644
--- a/samples/client/shared/sandbox_iframe/sandbox.ts
+++ b/samples/client/shared/sandbox_iframe/sandbox.ts
@@ -43,13 +43,19 @@ if (!document.referrer.match(ALLOWED_REFERRER_PATTERN)) {
 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.
-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.");
+// Check for query param to opt-out of security self-test (for testing)
+const urlParams = new URLSearchParams(window.location.search);
+const disableSelfTest = urlParams.get('disable_security_self_test') === 'true';
+
+if (!disableSelfTest) {
+  // Security self-test: verify iframe isolation is working correctly.
+  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.");
+    }
   }
 }
 
