iframe跨frame通信必须用postMessage，禁用直接访问contentWindow；sandbox会强制origin为null，切断同源判定；allow-same-origin有XSS风险，需严格校验；SPA中需用key和postMessage保状态。
iframe.contentWindow通信必须用postMessage，不能直接访问
主应用和iframe子应用之间不能通过window.frames[0]或iframe.contentWindow直接读写对方变量或调用函数——哪怕同域，只要启用了sandbox属性，浏览器就会强制切断DOM和全局对象的跨frame访问。这是硬性安全限制，不是bug。
常见错误现象：控制台报错Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame，或更隐蔽地——什么错误都不报，但iframe.contentWindow.xxx返回undefined、postMessage收不到响应。
- 正确做法只有一条：
window.parent.postMessage()和window.addEventListener('message', handler)双向配对 - 必须校验
event.origin（不是event.source），防止伪造来源消息 - 敏感操作（如登录态透传、支付回调）需额外加签名或nonce验证，不能只信
origin - 避免在
message事件里直接执行eval()或Function()构造动态代码
sandbox="allow-scripts"后仍无法调用父页面API？检查origin是否被强制设为null
即使你写了sandbox="allow-scripts"，iframe内的脚本也拿不到window.parent、window.top或任何跨frame引用——因为沙箱会把iframe的origin强制设为null，彻底切断同源判定。这不是配置遗漏，是设计如此。
这意味着：document.cookie、localStorage、fetch默认都指向一个临时、无持久化的匿名上下文；window.parent.location.href会静默失败；parent.postMessage()能发，但parent.xxx()这种调用永远不可行。
立即学习“前端免费学习笔记（深入）”；
- 想共享状态？只能靠
postMessage传递序列化数据，父页统一管理并下发 - 想复用主应用的工具库（如lodash、axios）？得由父页注入到iframe的
contentWindow，且必须在iframe.onload之后、脚本执行之前完成 - 调试时别看DevTools的Application面板——那里显示的是当前tab的storage，不是iframe的
nullorigin上下文
同域iframe加allow-same-origin不是万能钥匙，反而可能引入XSS风险
allow-same-origin只有在iframe的src与主页面**协议+域名+端口完全一致**时才生效；否则浏览器直接忽略该token，控制台可能警告但不报错。很多人误以为加了就能“打通”，结果既没获得预期能力，又暴露了配置意图。
真正危险的是它启用后的副作用：一旦同源且开启该token，iframe内脚本就能读写父页的document.cookie、localStorage、甚至直接document.body.innerHTML = '...'——这相当于把XSS攻击面扩大到整个主应用。
- 除非子应用代码100%可控（比如你自己写的
widget.yoursite.com），否则绝不要对第三方内容启用allow-same-origin - 同域场景下，优先用
srcdoc内联HTML，避免网络请求，也规避CSP拦截风险 - 若必须加载同域JS，用
iframe.contentDocument.write()注入，而非eval到主window
单页应用路由跳转时iframe容易丢失状态，需手动接管生命周期
Vue Router或React Router触发router.push()时，如果目标路由组件里包含<iframe>，框架通常会销毁并重建整个DOM节点——导致iframe重新加载、postMessage监听器丢失、内部JS状态清空。这不是沙箱问题，而是SPA框架的默认行为。
典型表现：从/ dashboard跳到/ report，iframe里的图表重绘、筛选条件重置、滚动位置归零。
- 解决方案：给
<iframe>加key属性绑定稳定ID（如:key="iframeId"），阻止框架误销毁 - 监听
beforeunload或visibilitychange，在iframe卸载前用postMessage保存关键状态到父页 - 避免在iframe内使用
history.pushState()——它不会同步到主应用路由，刷新即丢，应由父页统一管理子应用路径
sandbox=""会导致Network面板出现net::ERR_BLOCKED_BY_RESPONSE，iframe彻底白屏，连HTML都不解析。这不是JS报错，没法靠console查——得先确认sandbox值是不是带有效token，比如sandbox="allow-scripts"。 
