postMessage 是 BOM 提供的唯一原生、安全、跨域支持的页面间消息机制，需严格校验 event.origin 和 event.source，支持 iframe、window.open 弹窗通信，不支持函数等非序列化数据。

JavaScript 中使用 postMessage 实现跨文档通信，是 BOM 提供的唯一原生、安全、跨域支持的页面间消息机制。它不依赖同源策略限制，但要求明确指定目标窗口和源 origin，从而兼顾灵活性与安全性。

核心用法：发送与监听消息

发送方调用 window.postMessage(data, targetOrigin)，接收方通过监听 message 事件获取数据。关键在于双方都需验证来源，避免伪造消息。

• 发送消息（如父页向 iframe 子页）：
  

  const iframe = document.getElementById('myFrame');<br>
  iframe.contentWindow.postMessage({ type: 'LOGIN_SUCCESS', token: 'abc123' }, 'https://child.example.com');

• 接收消息（子页中）：
  

  window.addEventListener('message', event => {<br>
    // 严格校验来源，防止恶意站点冒充<br>
    if (event.origin !== 'https://parent.example.com') return;<br>
    console.log('收到:', event.data); // { type: 'LOGIN_SUCCESS', ... }<br>
  });

必须校验 origin 和 source，不能只信 data

仅检查 event.data 内容是不安全的。攻击者可从任意页面向你的 iframe 发送伪造消息。正确做法是：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 始终比对 event.origin 是否为预期域名（推荐精确匹配，不用通配符 '*'）
• 必要时进一步验证 event.source（例如确认是自己打开的窗口：if (event.source === popupWin)）
• 敏感操作前，可结合一次性 token 或时间戳做二次校验

适用典型场景及注意事项

postMessage 主要用于以下跨文档环境，每种都有对应约束：

立即学习“Java免费学习笔记（深入）”；

• iframe 通信：父页与嵌入的 iframe（即使跨域）双向传参，如单点登录、主题同步
• window.open 弹窗：主窗口与通过 window.open 打开的窗口通信；注意弹窗需由用户手势触发，否则可能被浏览器拦截
• tab 间通信：配合 localStorage + storage 事件间接实现，postMessage 本身不直接支持同源不同 tab
• 注意限制：传输的数据会自动序列化（结构化克隆算法），不支持函数、DOM 节点、undefined 等；大体积数据会影响性能

完整示例：父子页安全通信流程

父页（https://parent.example.com）发送用户信息，子页（https://child.example.com）接收并响应确认：

• 父页发送：iframe.contentWindow.postMessage({ user: 'Alice' }, 'https://child.example.com');
• 子页监听并应答：event.source.postMessage({ ack: true }, event.origin);
• 父页再监听子页回复：window.addEventListener('message', e => { if (e.origin === 'https://child.example.com') { /* 处理响应 */ } });