postMessage跨域通信安全关键在于精准目标、严格origin校验与数据边界检查。需通过window.open获取合法引用，指定精确targetOrigin，接收方必须全等验证event.origin并校验data结构，建议建立带nonce的双向闭环通信。
用 postMessage 在不同源弹窗间安全同步数据，关键不是“能不能发”，而是“发给谁、怎么验、怎么防”。它本身不加密也不自动校验，全靠开发者主动设防。只要目标窗口引用明确、origin 严格匹配、数据有边界检查，就能在跨域环境下稳定传递状态或指令。
获取并确认弹窗窗口引用
弹窗必须由当前页面用 window.open() 主动打开，才能拿到可通信的引用。不能靠 URL 直接打开后反向查找——浏览器不允许跨域访问未授权窗口。
- 调用 window.open(url, name, features) 后，返回值就是子窗口对象（即使跨域），可直接用于 postMessage
- 若子窗口已存在（比如同一 URL 多次打开），可用 window.open('', name) 复用并获取引用
- 务必等待子窗口加载完成再发消息：监听 win.onload 或在子窗口 DOMReady 后触发回调通知父页
发送消息时指定精确 targetOrigin
targetOrigin 是第一道安全闸门。写成 "*" 虽然方便，但等于把消息广播给任意来源，一旦中间人劫持或恶意页面冒充，数据就暴露了。
- 必须填完整协议+域名+端口，例如 "https://admin.example.com:8080"
- 如果弹窗是动态域名（如多租户后台），可在打开前通过后端接口预获取合法 origin 列表，再做白名单匹配
- 发送前建议先检查 win.closed === false，避免向已关闭窗口发消息导致静默失败
接收方严格验证 event.origin 并过滤 data
子窗口收到 message 事件后，event.origin 是唯一可信的来源标识。不能只看 event.source，因为 source 可被伪造或复用。
- 必须用全等比较：if (event.origin !== 'https://main.example.com')，不接受 substring 或 includes
- data 类型要校验：即使传的是对象，也要检查 typeof event.data === 'object' && event.data.type 等字段是否存在
- 敏感操作（如删除、支付）需二次确认，或要求携带一次性 token，防止重放攻击
建立双向通信与状态闭环
单向发消息容易丢状态。真实场景中，父页发指令，子页执行后应回传结果，形成可追踪的闭环。
- 约定统一消息结构，例如 { type: 'SYNC_USER', payload: { id: 123, name: 'Alice' }, nonce: 'abc123' }
- 子页处理完后，用 event.source.postMessage(response, event.origin) 回传，确保响应只发回原请求方
- 父页可为每次发送维护一个 Map
，实现 Promise 化调用，避免回调地狱
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
