MCP & ChatGPT Apps: The Double Iframe Strategy

Frédéric Barthelet, co-founder of Alpic, a company specializing in MCP (Multi-Channel Platform) and ChatGPT applications, recently shed light on a common technical implementation observed in these AI-powered applications: the use of double iframes.

In his presentation, Barthelet explained that the double iframe strategy is employed to effectively embed rich, interactive user interfaces directly within the conversational context of AI platforms like ChatGPT and Claude. This approach is designed to boost discoverability of these applications and provide a more seamless and engaging user experience.

Understanding MCP and ChatGPT Apps

Barthelet began by defining MCP and ChatGPT applications as those that leverage AI-driven conversational agents for discoverability within chat interfaces and stores, such as those found on ChatGPT and Claude. He noted that initial experiments with these interactive UIs were conducted using MCP UI, which has since been standardized as MCP, an official extension. The core idea is to allow these applications to be browsable directly within the AI chat, offering rich interactive elements beyond simple text-based responses.

The Double Iframe Mechanism

The presentation detailed how these applications function technically, explaining the role of iframes in rendering external HTML content. An iframe, defined as a nested browsing context, embeds another HTML page into the current one. Barthelet highlighted that the typical implementation involves two nested iframes. The outer iframe is responsible for the fundamental chat interaction and communication between the host application and the AI server. The inner iframe, on the other hand, is specifically tasked with rendering the actual user interface of the application, which can be dynamically generated or cached ahead of time.

This nested structure provides a critical layer of isolation. Each iframe operates within its own security context, preventing direct cross-frame scripting and enhancing overall security. The AI server communicates with the host application, which then orchestrates the rendering of the appropriate iframe with the correct content and theme.

Content Security Policy (CSP) and its Role

A significant portion of Barthelet's talk focused on the importance of Content Security Policy (CSP) in managing these interactive elements. CSP is a web security standard that helps prevent certain types of attacks, including cross-site scripting (XSS) and data injection. For MCP applications, CSP directives are essential for controlling what resources, such as scripts, styles, and images, can be loaded by the iframes.

Barthelet illustrated how the `frame-src` directive in CSP is particularly crucial. It acts as an allowlist, specifying the exact domains from which content is permitted to be loaded within an iframe. This is vital for maintaining security by restricting the application to only load resources from trusted sources.

Exploring Security Implications: `srcdoc` vs. `src`

The presentation then delved into the security implications of different iframe implementation strategies. Barthelet discussed the `srcdoc` attribute, which allows embedding HTML content directly into the iframe. However, he cautioned that using `srcdoc` without careful consideration of the parent’s CSP can lead to security risks. An iframe using `srcdoc` inherits the parent's CSP, but if the parent’s CSP is too permissive (e.g., allowing inline scripts without nonces), it could expose the application to vulnerabilities. He also touched upon the `sandbox` attribute, which, when used without `allow-same-origin`, assigns an opaque origin to the iframe, thereby restricting access to local storage, cookies, and the DOM, which enhances security but limits functionality.

Conversely, using the `src` attribute with `allow-same-origin` on the sandbox attribute allows the iframe to inherit the parent's origin and access certain data, but this can also lead to potential security issues if not managed properly. Barthelet emphasized that `frame-src` is a finite allowlist and cannot dynamically whitelist every MCP app domain, necessitating a more robust approach for managing third-party content.

The Double Iframe Solution with Subdomain Control

To address these challenges, Barthelet proposed a solution: the double iframe implemented on an app-specific subdomain, coupled with a carefully configured CSP. By using a dedicated subdomain for each application, developers can create a more granular and secure CSP. This allows the inner iframe to be rendered from a specific subdomain, such as `abc123.web-sandbox.usercontent.com`, which is controlled by the developer. This approach ensures that the application's content is isolated and adheres to the intended security policies.

He further explained that by using a meta tag within the first iframe to define the CSP for the nested iframe, developers can ensure that the inner iframe operates with the correct security context. This method allows for greater control over resource loading and script execution, mitigating potential security risks.

CSP as the New CORS

Barthelet drew an analogy between Content Security Policy (CSP) and Cross-Origin Resource Sharing (CORS), suggesting that CSP is becoming the new CORS in terms of its importance for web security and development. He illustrated this with a visual comparison of developer workflows in 2016 versus a projected 2026, showing how the complexity of managing cross-domain requests and ensuring security has evolved. In 2016, developers primarily focused on CORS headers, while in 2026, CSP directives will likely be the primary mechanism for controlling resource access and ensuring the security of AI applications.

Improving Builder Developer Experience (DevX)

To further streamline the development process for MCP applications, Barthelet highlighted the development of tools like the Skybridge CSP Inspector. This tool, integrated into the development environment, allows developers to inspect and manage CSP configurations for their applications. It provides insights into allowed domains, connected resources, and potential issues, making it easier for developers to build secure and functional MCP apps.

The presentation concluded with a demonstration of the Skybridge framework and its CSP Inspector, showcasing how developers can build MCP apps more efficiently and securely. Barthelet encouraged the audience to star the Skybridge GitHub repository and participate in a lottery to win a mask, further promoting the adoption of this open-source framework.