postmessage是唯一全浏览器支持的跨域通信方式；必须等待iframe load事件后发送、严格校验targetorigin和event.origin、子页需验证data结构与签名、sandbox须遵循最小权限原则。
postMessage 是唯一能用的跨域通信方式
浏览器同源策略下，iframe.contentWindow、iframe.contentDocument 一访问就报 Blocked a frame with origin "https://a.com" from accessing a cross-origin frame。这不是配置问题，是硬性拦截。Chrome 126+ 已彻底移除 document.domain，别试了。
真正可用且全浏览器支持的通道只有 postMessage。它不是“可选方案”，而是事实标准——没它，跨域 iframe 就只能单向展示，无法交互。
常见错误包括：用 setTimeout 等待 contentWindow、直接在 DOM 插入后调用 postMessage、或依赖 iframe.onload 属性写法（易被覆盖）。这些都会导致静默失败。
父页发消息前必须等 load 事件 + 校验 targetOrigin
直接调用 iframe.contentWindow.postMessage() 大概率失败，因为此时 contentWindow 还是 null。正确做法是监听 load 事件，且仅在此之后发起通信：
const frame = document.getElementById('myFrame');
frame.addEventListener('load', () => {
// 此时 contentWindow 才可靠
frame.contentWindow.postMessage({ type: 'init' }, 'https://child.example.com');
});
targetOrigin 写 '*' 就等于放弃校验：任何页面都能接收这条消息，包括钓鱼页或 XSS 注入的恶意 iframe。生产环境必须写死完整协议+域名+端口，比如 'https://widget.example.com'。
若子页有多个合法部署地址（如灰度和正式），需在发送前判断并匹配对应 origin；CDN 托管的子页也要写死完整 origin，不能靠自动推导。
子页收消息必须严格比对 event.origin + 检查 data 结构
只检查 event.data.type === 'auth_success' 或用 includes() 匹配域名，等于开门揖盗。攻击者可伪造 https://evil-example.com 绕过模糊匹配。
必须用 === 严格比对：if (event.origin !== 'https://shop.example.com') return。Safari 对 event.origin 访问更严，部分版本返回 null，所以不能缓存，每次都要现场读取。
敏感操作（如 video.play()、跳转、支付回调）不能仅靠 origin 校验，必须附带签名或一次性 token。移动端尤其要注意：video.play() 必须由用户手势触发，通过 postMessage 发来的指令会直接抛 NotAllowedError。
sandbox 属性配错比不加更危险
sandbox 默认值是空字符串，意味着禁用脚本、表单、弹窗、插件等一切能力。加了但配错，风险反而更大：
-
sandbox="allow-scripts"允许 JS 执行，但所有 HTML 内联事件（onclick、javascript:void(0)）全部静默失效，控制台也不报错 -
allow-same-origin不是信任开关，而是“它确实同源”的解锁钥匙。父页是https://a.com，子页src是https://b.com/widget.html，硬加该属性无效，且不报警告 -
allow-scripts allow-same-origin组合后，子页fetch请求的Origin头会显示为父页域名，后端若仅靠Origin鉴权，可能误判为合法请求
最小权限原则必须落地：嵌入第三方内容，只开 allow-scripts；需要提交表单，再加 allow-forms；绝不要写成 sandbox="allow-scripts allow-same-origin allow-popups" —— 这几乎等同于没沙箱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
