必须等iframe加载完成再发消息，且targetOrigin不能写“*”；需监听load事件并二次确认contentWindow和origin，子页须严格校验event.origin及data结构。
父页发消息前必须等 iframe 加载完成
直接在 iframe 标签插入后就调用 postMessage，大概率静默失败——因为 iframe.contentWindow 还是 null。这不是延迟问题，而是 DOM 尚未建立完整上下文。
正确做法是监听 load 事件，且仅在此之后发起通信：
const iframe = document.getElementById('sandbox-iframe');
iframe.addEventListener('load', () => {
// 此时 contentWindow 才可用
iframe.contentWindow.postMessage({ type: 'init' }, 'https://widget.example.com');
});
- 别依赖
setTimeout或 DOMReady，load是唯一可靠信号 - 如果子页是空
src或srcdoc，load仍会触发，但需注意子页 JS 执行时机 - 动态创建的
iframe必须在appendChild后再绑定load，否则可能错过事件
targetOrigin 写 '*' 就等于放弃校验
postMessage 的第二个参数不是“可选配置”，而是安全边界。写成 '*' 意味着任何来源都能接收这条消息——包括钓鱼页面、中间人劫持的 iframe、甚至被 XSS 注入的恶意子页。
生产环境必须明确指定目标域：
立即学习“前端免费学习笔记（深入）”；
// ✅ 正确：只发给可信域名 iframe.contentWindow.postMessage(data, 'https://widget.example.com'); // ❌ 危险：测试时偷懒，上线后直接暴露 iframe.contentWindow.postMessage(data, '*');
- 即使子页部署在 localhost，也应写成
'http://localhost:3000'，而非'*' - 若子页有多个合法部署地址（如灰度和正式），需在发送前判断并匹配对应 origin
- 浏览器对
'*'不报错，但 CSP 的frame-src或connect-src可能拦截后续请求，造成逻辑断裂
子页收消息必须双重校验 origin + data 结构
只检查 event.data.type 或用 includes() 匹配域名，等同于没校验。攻击者可伪造任意字符串，绕过弱判断。
必须同时验证 event.origin 和 event.data 的类型与字段完整性：
window.addEventListener('message', event => {
// 第一层：origin 硬校验（不可替换为 location.hostname）
if (event.origin !== 'https://widget.example.com') return;
// 第二层：data 必须是对象，且含预期字段
if (typeof event.data !== 'object' || !event.data.type || !['config', 'action'].includes(event.data.type)) {
return;
}
// 第三层：按 type 分支处理，不信任任何未声明字段
switch (event.data.type) {
case 'config':
initWidget(event.data.payload);
break;
case 'action':
handleUserAction(event.data.payload);
break;
}
});
-
event.origin是唯一可信标识，event.source可被伪造，不能用于权限判定 - 避免使用
JSON.parse(JSON.stringify(event.data))做深拷贝——会丢失函数、undefined、Symbol 等，且无必要 - 收到敏感指令（如登录态透传）时，应额外校验签名或 nonce，不能仅靠结构
sandbox="allow-scripts" 不等于允许 DOM 交互
加了 sandbox="allow-scripts" 只解禁脚本执行，但子页 JS 依然无法访问 parent、top 或父页 document。这是 sandbox 的硬隔离，不是同源策略的补充，而是独立防线。
常见误解是以为“开了 script 就能调父页方法”，结果发现 window.parent.xxx() 报错、document.querySelector 返回 null。此时唯一可行路径仍是 postMessage。
- 子页若需反馈 DOM 状态（如表单校验结果），必须主动
postMessage，父页不能反向查询 -
allow-same-origin不要乱加：它只在 src 与父页严格同源（协议+域名+端口）时生效；第三方内容加了也无效，还暴露配置意图 - Chrome 117+ 对含
onload属性的 iframe 会自动补allow-scripts，但这属于隐式行为，不应依赖
