AI Engineer onepage/ Double iframes
Frédéric Barthelet, Alpic · 20:11
這支影片在講：MCP app 為什麼要包兩層 iframe
Barthelet 直接檢查 ChatGPT 渲染 MCP app 時的 DOM，拆解為什麼 srcdoc、單層 iframe、sandbox 或放寬 CSP 都各自踩到安全與功能限制。雙 iframe 不是炫技，而是逐一排除壞選項後剩下的折衷。
Published: 2026-06-15Video ID: c-2eEv2ou7Y
01 / 問題
單純 srcdoc 會撞 CSP
srcdoc 內容共享 parent origin。當 app 想載第三方 script，ChatGPT 自己的 CSP 會擋下來，功能跑不起來。
02 / 反轉
放寬 CSP 不是解法
如果 parent CSP 為 app 放行第三方 script，app 就可能讀到 ChatGPT origin 下的 localStorage 與 cookies，安全邊界直接破掉。
03 / 解法
外層控 origin，內層跑 app
外層 iframe 由受控子網域載入輕量 script，再把真正 app HTML 用 srcdoc 放進內層 iframe，隔開 storage 與執行環境。
Watch for this
影片最值得抓的四個訊號
DOM shape
2 iframes
ChatGPT app 實際渲染時，是 iframe 裡再包 iframe，而不是單層 embed。
CSP trade-off
Block vs leak
太嚴會擋第三方腳本；太鬆會讓 app 接觸到 ChatGPT origin 的敏感 storage。
Sandbox trap
Escape
allow-same-origin 可恢復 storage，但和 sandbox 搭配會進入經典 sandbox escape 風險。Review rule
Declare all
app 觸碰的外部 domain 都要寫進 MCP app metadata，否則提交流程會被退回。
Core story
為什麼比較簡單的方案都不夠
01
srcdoc 讓 app 跟 parent 同 origin
這看起來最直接：把 app HTML 塞進 iframe 就好。但同 origin 代表它被 ChatGPT 的 CSP 約束；第三方 script、SDK 或資源請求會被擋，app 功能不完整。
02
放寬 parent CSP 會把 ChatGPT 暴露給 app
如果為了 app 功能放行第三方來源，任何 app 都可能在 ChatGPT origin 裡讀取 localStorage、cookies 或其他敏感狀態。這不是 UX 問題，而是平台隔離問題。
03
sandbox 解安全，卻弄壞 storage
加 sandbox 可以移除 origin-indexed storage；但 app 往往需要穩定 storage。再加 allow-same-origin 恢復能力，又會回到 sandbox escape 的高風險組合。
Content map
架構地圖：雙 iframe 到底分別負責什麼
Outer
受控子網域上的輕量 loader外層 iframe 由平台控制，並且可用每個 app 不同子網域，避免不同 app 的 storage 互相碰撞。
Inner
真正的 app HTML 透過
srcdoc 載入inner frame 承載 app UI 與第三方 script，讓 app 不直接落在 ChatGPT parent origin 上。Pattern
這不是全新發明影片提到 Facebook app marketplace 早期也採用類似模式：外層由平台控管，內層承載第三方 app。
Tooling
Skybridge 用 CSP inspector 把差異找出來開發時即時比對「metadata 宣告的 domains」與「實際 network calls」，讓審核失敗能在本機先被抓到。
Why it matters
這支影片對做 MCP / ChatGPT App 的啟發
CSP 是產品架構，不只是 header 設定當 app 需要第三方 script、API、CDN 或 analytics，CSP 設計會直接決定 app 能不能跑，以及平台是否還能隔離敏感狀態。
每個外部 domain 都是審核契約MCP app metadata 不是文件附錄。影片的實務提醒是：view 會碰到的所有外部 domain 都要明確宣告，否則提交流程會被拒。
storage isolation 要先設計，不要事後補洞如果不同 app 共用 origin 或 storage namespace，就會出現跨 app 污染。外層子網域策略是為了把 collision 風險提前切開。
開發工具要檢查實際 network 行為人工列 domain 很容易漏。Skybridge 的 CSP inspector 方向是把「實際呼叫」跟「宣告清單」做 live diff，讓問題在 submission 前出現。
Use this checklist
如果你正在做 MCP app，先檢查這五點
你的 UI 需要載入哪些第三方 scripts 或 assets？把 CDN、API、images、fonts、analytics 都列出來；不要只看主要 API domain。
這些 domain 是否已寫進 MCP app metadata？影片的直接規則是：view 實際碰到的外部 domain 都要宣告，否則 submission 會被拒。
app 是否不小心依賴 parent origin 的 storage？如果在 ChatGPT origin 裡才能工作，表示隔離模型錯了。app 應該有自己的 storage 邊界。
你有沒有測過 sandbox 與
allow-same-origin 的組合風險？不要為了讓 storage 回來就直接打開同 origin；這可能把 sandbox 的防護一起拆掉。本機 dev loop 能否自動 diff CSP 宣告與 network calls？如果只能等平台審核才知道漏了 domain，開發迴圈會太慢。應該在本機就抓出 metadata 缺口。
Source video