| Filename | Latest commit message | Latest commit date |
|---|---|---|
c7ef5f009b* 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 <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
| .. | ||
| src | ||
| index.html | ||
| package.json | ||
| README.md | ||
| sandbox.html | ||
| serve.ts | ||
| tsconfig.json | ||
| vite.config.ts | ||
Example: Basic Host
A reference implementation showing how to build an MCP host application that connects to MCP servers and renders tool UIs in a secure sandbox.
This basic host can also be used to test MCP Apps during local development.
Key Files
index.html/src/index.tsx- React UI host with tool selection, parameter input, and iframe managementsandbox.html/src/sandbox.ts- Outer iframe proxy with security validation and bidirectional message relaysrc/implementation.ts- Core logic: server connection, tool calling, and AppBridge setup
Getting Started
npm install
npm run start
# Open http://localhost:8080
By default, the host application will try to connect to an MCP server at http://localhost:3001/mcp. You can configure this behavior by setting the SERVERS environment variable with a JSON array of server URLs:
SERVERS='["http://localhost:1234/mcp", "http://localhost:5678/mcp"]' npm run start
Architecture
This example uses a double-iframe sandbox pattern for secure UI isolation:
Host (port 8080)
└── Outer iframe (port 8081) - sandbox proxy
└── Inner iframe (srcdoc) - untrusted tool UI
Why two iframes?
- The outer iframe runs on a separate origin (port 8081) preventing direct access to the host
- The inner iframe receives HTML via
srcdocand is restricted by sandbox attributes - Messages flow through the outer iframe which validates and relays them bidirectionally
This architecture ensures that even if tool UI code is malicious, it cannot access the host application's DOM, cookies, or JavaScript context.