Why MCP and ChatGPT Apps Use Double Iframes — Frédéric Barthelet, Alpic

Key Concepts

• MCP (Model Context Protocol): A standard for connecting AI agents (like ChatGPT/Claude) to external data and tools.
• MCP Apps/Extensions: A surface area allowing developers to expose interactive UI components within conversational AI.
• Views: Small snippets of HTML/JS/CSS rendered as a result of an AI tool call.
• Double iFrame Mechanism: A security architecture using nested iFrames to isolate third-party UI from the host application.
• CSP (Content Security Policy): Security headers that restrict which domains, scripts, and resources a browser can load.
• Skybridge: An open-source framework by Alpic that provides type safety, polyfills, and development tools (like a CSP Inspector) for MCP apps.

---

1. The Challenge of Third-Party UI in AI Agents

The core problem addressed is how to safely render third-party, interactive UI (Views) inside a host application like ChatGPT without compromising the host's security.

• The Goal: Allow developers to inject dynamic HTML/JS into a conversation while preventing malicious code from accessing the host’s sensitive data (cookies, local storage, or parent DOM).
• The Constraint: Standard iFrames with srcdoc share the same origin as the parent, meaning they inherit the host's CSP and access rights, creating a massive security vulnerability.

2. The "Double iFrame" Architecture

To solve the isolation problem, the industry (including OpenAI and Anthropic) utilizes a nested iFrame strategy:

1. Outer iFrame: A container hosted on a dedicated, isolated domain (e.g., openai-usercontent.com). This domain acts as a proxy to prevent the app from sharing the host's origin.
2. Inner iFrame: The actual application content is injected into this nested layer using srcdoc.
3. Subdomain Isolation: Each app is assigned a unique subdomain. This ensures that even if two apps are running, they cannot access each other's localStorage or IndexedDB, as these are indexed by origin.

3. Security and CSP Management

• The CSP Problem: If an app needs to fetch data from an external API, the host's CSP must explicitly allow that domain. Manually updating a global CSP for every new app in an App Store is unscalable.
• The Solution: Developers must declare all required domains (for scripts, images, and API connections) within the MCP app metadata. The host then injects these into the nested iFrame’s CSP meta tags.
• Risk: Missing domains in the metadata lead to "silent failures" where the app works in development but breaks in production due to CSP blocks.

4. Development Framework: Skybridge

Fred introduced Skybridge, an open-source framework designed to simplify MCP app development:

• Type Safety: Provides end-to-end type safety between the MCP server and the UI widgets.
• Polyfills: Bridges the gap between different host implementations (ChatGPT vs. Claude).
• CSP Inspector: A developer tool that monitors network calls made by the app in real-time. It compares these calls against the declared metadata and alerts the developer if a domain is missing from the CSP, preventing production deployment errors.

5. Key Arguments and Perspectives

• Security over Convenience: The speaker argues that while the double iFrame approach is complex, it is the only viable way to maintain a "zero-trust" environment when hosting third-party code.
• Historical Context: The speaker notes that this architecture mirrors the "Facebook App Marketplace" era, where similar challenges regarding third-party UI isolation were first solved.
• Developer Experience: The speaker emphasizes that the current "trial and error" approach to CSP configuration is a major pain point for developers, leading to high rejection rates in App Store submissions.

6. Synthesis and Takeaways

• Actionable Insight: When building MCP apps, developers must be meticulous about declaring every external dependency in their metadata.
• Best Practice: Use development tools like the Skybridge CSP Inspector to validate domain requirements before submission.
• Conclusion: The "Double iFrame" mechanism is the industry standard for balancing the need for rich, interactive AI-driven UI with the strict security requirements of modern web browsers. By isolating apps into unique subdomains and enforcing strict CSPs, platforms can safely host an infinite ecosystem of third-party tools.