从 ChatGPT 的 DOM 里一处反常嵌套，推到第三方 UI 隔离的完整取舍
Why MCP and ChatGPT Apps Use Double Iframes — Frédéric Barthelet, Alpic · Frédéric Barthelet
全片 20 分钟·真正值得盯屏约 8 分钟·3 个必看点
- 0:15 – 2:30听
为什么要做 MCP 应用
先讲清商业动机：ChatGPT 应用商店和 Claude connectors 正在成为企业面向消费级智能体的新获客入口，价值在于对话中被发现，以及能嵌入一块可交互的界面。
做 MCP 应用的动机不是技术尝鲜，而是一条新的分发渠道。
这一段是背景陈述，屏幕上基本只有标题和几个产品名，听讲述就够。▶ 跳到 0:15讲者 · Frédéric Barthelet - 2:30 – 3:58略
视图是怎么被渲染出来的
介绍视图机制：界面永远作为一次工具调用的结果出现，服务器在工具元数据里声明配套 UI，视图本身只是一份可以内联样式的简单 HTML；这些声明在会话开始的工具清单里就已经给出，宿主可以预先缓存。
视图不是独立页面，而是挂在工具调用结果上、且提前声明好的一份 HTML。
配合的是元数据结构和调用流程的示意图，扫一眼字段名和箭头方向即可，不必逐帧盯。▶ 跳到 2:30讲者 · Frédéric Barthelet - 3:58 – 5:30看
反常的嵌套与内容安全策略登场
讲者展示自己检查 ChatGPT 页面结构时的发现——第三方视图被两层 iframe 套着，随后引出理解这一切的关键前提：宿主页面的内容安全策略。
宿主给自己上的那道安全策略，是后面所有方案被否决的真正原因。
屏幕上是真实的页面结构，两层嵌套的层级关系肉眼一看就懂，光听描述很难在脑子里搭出来。▶ 跳到 3:58讲者 · Frédéric Barthelet - 5:30 – 10:20听
直接注入这条路为何走不通
把第三方界面直接以 srcdoc 塞进页面的方案被逐层否决：宿主要求脚本携带每次请求生成的一次性标记，第三方代码根本跑不起来；放宽限制则内层与父页面同源，本地存储和 cookie 全部可被读取；加上沙箱后源变得不透明，依赖源的存储接口又集体失效，而唯一的补救办法等于把父页面的源原样还回去。
同源、沙箱、可用存储这三者，在直接注入的方案里凑不齐。
这是一串纯逻辑排除，每否掉一个方案就冒出下一个问题，画面上只有零星代码片段，跟着推理链条听最有效率。▶ 跳到 5:30讲者 · Frédéric Barthelet - 10:20 – 14:23看
换条路仍然堵死，直到双层方案成型
改成让 iframe 直接加载远程地址同样不成：每个应用自带域名会让宿主的白名单随上架数量无限膨胀；改用统一的中转域虽可行，但等于在自家域名上托管未知的第三方代码，那份责任和成本只有极少数公司担得起。最终答案是外层专用域加载统一 loader、由它创建内层 iframe 注入内容，并按应用划分子域让各自的存储互不相通。
双层嵌套不是过度设计，是同时满足隔离、可扩展和低成本的唯一落点。
结尾处的架构示意把两层的域名归属、脚本来源和子域划分画在一张图上，这是全场信息密度最高的一张画面。▶ 跳到 10:20讲者 · Frédéric Barthelet - 14:23 – 17:20略
给自己的应用声明安全策略
讲规范允许应用自带安全策略：通过外层 iframe 里的特定标签下发，声明的域名会被重写进内层。要连外部接口取数就必须把域名写进对应指令，脚本和网络请求这两条是最要紧的。
只要视图要发请求，域名就得先声明，否则线上必然被拦。
配的是策略指令和元数据字段的对照，看清写在哪、写成什么样就行，讲解节奏比画面快。▶ 跳到 14:23讲者 · Frédéric Barthelet - 17:20 – 19:21看
SkyBridge 工具链现场演示
演示 Alpic 开源的框架：浏览器里就能执行工具、实时预览关联视图并热更新；随后是策略检查器，把声明的域名与实际发出的请求逐条比对，现场新增一个接口调用立刻被标为缺失，补上后转绿。
开发环境曾经会移除全部安全策略，导致本地一切正常、上线才炸——这类工具的价值就是把问题提前到本地。
全程是实际操作：改代码、界面刷新、检查项由红转绿，交互反馈本身就是内容，看画面才知道这套工具实际用起来是什么感觉。▶ 跳到 17:20讲者 · Frédéric Barthelet - 19:21 – 19:54略
收尾与现场抽奖
扫码领取幻灯片和框架试用入口，并以现场给开源仓库加星抽奖的方式收场。
需要资料的话在这里把二维码截下来。
只有一张二维码页面，除非要拿链接，否则可以直接跳过。▶ 跳到 19:21讲者 · Frédéric Barthelet