MCP と ChatGPT アプリが二重iframeを採用する理由

ChatGPT の MCP アプリが「二重 iframe」を採用する理由と、開発者が直面する CSP の壁を打破する実用解法

ChatGPT や Claude といった生成 AI エージェント内で動作する MCP（Model Context Protocol）アプリは、単なるテキストのやり取りを超え、インタラクティブな UI を提供できるようになりました。しかし、その背後には「セキュリティ」と「機能性」の狭間で苦悩する技術的な壁が存在します。

この動画では、Alpic の CTO である Fred 氏が、なぜ ChatGPT が MCP アプリに「二重 iframe（ネスト型）」という複雑な構造を採用しているのか、そして開発者が直面するコンテンツセキュリティポリシー（CSP）の難問をどう解決したのかを解説します。単なる技術解説にとどまらず、OpenAI や Anthropic のプラットフォーム上で安全かつ柔軟にアプリを動かすための標準アーキテクチャと、それを支えるオープンソースフレームワーク「Skybridge」の実践的な価値を紹介します。

MCP アプリの UI はどうやってチャット内に表示されるのか？

MCP アプリが持つ新しい機能の一つに、「View（ビュー）」という概念があります。これは、チャット内の会話文の中に埋め込まれる小さな UI スニペットのことです。

通常、ユーザーがツールを呼び出すと、サーバー側で処理された結果がテキストとして返されます。しかし、MCP アプリでは、この結果の一部を HTML、CSS、JavaScript で構成された「ビュー」として動的にレンダリングできます。これにより、チャット内でグラフを表示したり、フォームに入力させたりするインタラクティブな体験が可能になります。

「ビューは常にツール呼び出しの結果としてレンダリングされます。サーバーが暴露している複数のツールの一部にメタデータを追加し、『このツールは特定の UI で結果を表示するのが最適』と宣言することで、ホスト側が対応するビューを自動的に表示します。」

この仕組みは、2023 年 10 月に OpenAI がリリースした「App Extension」という公式拡張機能によって標準化されました。ユーザーはチャット内でアプリを検索・呼び出すだけでなく、会話の流れに合わせて UI を即座に展開できるため、従来のテキストベースの対話とは全く異なる体験を提供します。

なぜ単一の iframe ではダメなのか？セキュリティと機能性のジレンマ

では、このビューをチャット内にどう埋め込むのでしょうか。最も単純な方法は、ブラウザが持つ <iframe> 要素を使って、外部の HTML ドキュメントを読み込むことです。しかし、ChatGPT のような大規模プラットフォームでこれをそのまま実装しようとすると、深刻なセキュリティと機能性のジレンマに直面します。

1. CSP（コンテンツセキュリティポリシー）によるスクリプト実行ブロック

ChatGPT は、外部のコードが勝手に実行されるのを防ぐため、厳格な CSP を設定しています。特に script-src ディレクティブでは、特定の非公開トークン（nonce）で署名されたスクリプトのみを実行できるように制限されています。

もし MCP アプリを単一の iframe として、ChatGPT のドメインと同じオリジンでレンダリングしようとすると、アプリ内の JavaScript は ChatGPT の CSP に抵触し、実行がブロックされてしまいます。CSP を緩めてすべてのスクリプトを実行可能にすれば機能はしますが、その代償としてセキュリティリスクが高まりすぎてしまいます。

2. サンドボックス化によるローカルストレージへのアクセス不能

逆に、iframe に sandbox 属性を付与してセキュリティを強化すると、別の問題が発生します。サンドボックス化された iframe は「null」オリジンとして扱われ、親の DOM とは完全に分離されます。

これにより、スクリプトが親のローカルストレージやクッキーにアクセスできなくなるため、アプリがユーザーの状態を保持したり、バックエンドと安全に通信したりすることが不可能になります。allow-same-origin を付与すればオリジンを復元できますが、それは同時に「親の DOM にアクセスできる状態」に戻すことになり、セキュリティ上のリスク（例えば、ChatGPT のデータを悪意あるアプリへ漏洩させる可能性）を再び招いてしまいます。

「単一 iframe では、CSP を緩めればセキュリティが崩壊し、厳格にすれば機能が失われる。このジレンマを解決するために、OpenAI は『二重 iframe』という構造を採用しました。」

二重iframe とプロキシの仕組み：分離と機能の両立

ChatGPT が採用しているのが、「二重 iframe（ネスト型）」のアーキテクチャです。これは、親となる iframe の中に、さらに別の iframe を埋め込む構造を指します。

第 1 層：OpenAI 管理ドメインのプロキシ iframe

まず、ChatGPT 側で iframe を作成し、そのソースとして OpenAI が管理する独自ドメイン（例：user-content.openai.com）を指定します。このドメインは CSP のホワイトリストに含まれているため、レンダリングがブロックされることはありません。

第 2 層：アプリ固有のサブドメインで動作する iframe

次に、このプロキシ iframe 内部に、実際の MCP アプリをロードするための別の iframe を配置します。ここで重要なのは、各アプリごとに異なるサブドメイン（例：app123.user-content.openai.com）を使用することです。

この構造には以下の利点があります。

• オリジン分離: 第 2 層の iframe は、ChatGPT の本体とは異なるオリジンで動作するため、親の DOM やローカルストレージへの不正なアクセスを物理的に防げます。
• アプリ間の独立性: サブドメインごとにオリジンを分けることで、App A が App B のローカルストレージにアクセスすることを防ぎ、各アプリが独立した環境で安全に動作します。
• 動的配信の柔軟性: OpenAI はすべての MCP アプリのドメインを CSP に追加する必要がありません。プロキシドメインを経由してコンテンツを配信するだけで良いため、新しいアプリが登場してもインフラ側の設定変更は不要です。

この仕組みにより、ChatGPT のセキュリティポリシーを維持しつつ、MCP アプリが JavaScript を実行し、ローカルストレージやクッキーを利用できる環境が実現されています。これは、かつて Facebook がアプリマーケットプレイスを構築する際にも採用された、成熟した解決策でもあります。

開発者の味方：CSP 設定のミスを防ぐ「Skybridge」と CSP Inspector

しかし、この二重 iframe の仕組みを正しく実装するには、開発者側で細心の注意が必要です。特に、MCP アプリが外部 API に接続する際や、動的にリソースを読み込む際に、CSP メタデータ（connect-src や script-src など）を正確に宣言しないと、本番環境で通信エラーが発生します。

「開発初期の頃、CSP の設定ミスで何日も詰んだ経験があります。ドメインの指定漏れや、ネストされた iframe 内での書き換え忘れなど、小さなミスが大きな障害になります。」

この課題を解決するために、Alpic はオープンソースフレームワーク「Skybridge」を提供しています。

Skybridge の主な機能

1. CSP Inspector（インスペクター）:

開発環境で動作する専用ツールです。アプリが宣言した CSP メタデータと、実際に実行時にアクセスされたドメインをリアルタイムで比較・検証できます。「まだリストされていないドメインがないか」を自動的に検知し、設定ミスを防ぐ強力な機能です。

1. エンドツーエンドのセキュリティ保証:

公式 SDK に追加機能を付与したスーパーセットとして、ネストされた iframe 内での CSP 書き換えや、ホスト環境特有のポリフィルを自動で処理します。

1. リアルタイム検証とデバッグ:

ChatGPT のチャット画面にアプリを持ち込む前に、ローカル開発環境で UI とロジックを検証できます。ツール呼び出しの結果として生成されるビューも、インスペクター内でリアルタイムに確認・修正可能です。

Skybridge を使うことで、開発者は複雑な CSP 設定の罠から解放され、MCP アプリの UI 構築に集中できるようになります。

まとめ：堅牢な AI エージェント体験への道

ChatGPT や Claude が MCP アプリを「二重 iframe」でサポートしているのは、セキュリティと機能性の狭間で最適なバランスを取るための必然的な選択でした。このアーキテクチャは、サードパーティの UI を安全に実行しつつ、ユーザーデータの保護も徹底する標準パターンとして確立されつつあります。

開発者にとって重要なのは、この仕組みを理解し、Skybridge などのツールを活用して CSP の設定ミスを防ぎながら、堅牢で信頼性の高いアプリを構築することです。これにより、生成 AI エージェントの UI 体験は、単なるテキストのやり取りから、安全かつ高度なインタラクションへと進化していくのです。