iframe 如何用 postMessage 实现安全跨域通信？

iframe 跨域通信用 window.postMessage：父页拿到 iframe 的 contentWindow 发消息，子页用 window.parent.postMessage 回消息，双方用 message 事件接收。安全重点只有两句：发送时别乱用 *，接收时必须校验 event.origin 和 event.data，否则任何页面都可能伪造消息触发你的逻辑。

追问

postMessage 为什么能跨域？

它是浏览器提供的受控跨文档通信 API，不直接暴露 DOM，只传递结构化克隆后的数据，所以绕开的是直接访问限制，不是绕开安全校验。

targetOrigin 能不能写 *？

只有广播类、完全不含敏感信息的消息才考虑 *。登录态、token、订单状态、支付结果都必须写明确源，例如 https://pay.example.com。

接收消息时要校验什么？

先校验 event.origin，再校验数据结构和 type 白名单。不要把 event.data 直接拼进 HTML，也不要让消息直接驱动跳转、支付、删除等高危操作。

transfer 参数有什么用？

它可以转移 MessagePort、ArrayBuffer 等对象所有权，适合大数据或双向通道。普通业务状态同步通常用不到。

写段代码

js
iframe.contentWindow.postMessage({ type: 'init' }, 'https://child.example');

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://child.example') return;
  if (!event.data || event.data.type !== 'resize') return;
  iframe.style.height = `${Number(event.data.height) || 0}px`;
});