postMessage 是 HTML5 规范中定义的跨文档通信（Cross-Document Messaging）API，其设计目的是解决不同源（协议、域名、端口任一存在差异）的窗口（如 iframe 嵌入的文档、window.open 创建的新窗口）之间的安全数据交互问题。该 API 通过异步消息传递机制，在遵循浏览器同源策略的前提下，实现有限度的跨域通信，是现代前端架构中跨上下文交互的核心技术之一。

一、核心特性

postMessage 的核心特性首先体现在跨源通信支持上，它突破了同源策略的限制，允许不同源的窗口（包括 iframe 与父文档、多标签页窗口）进行数据交换，解决了传统前端技术中跨域场景下（如 XMLHttpRequest、fetch 受同源限制）无法直接通信的难题。
其次，它具备安全可控的交互机制：发送消息时需指定目标窗口的源（origin），接收方通过验证消息来源确保通信安全性，可有效抵御恶意脚本的伪造消息攻击；消息内容以序列化形式传递，支持字符串、数字、布尔值、数组及普通对象等基本数据类型（复杂对象需通过 JSON.stringify() 手动序列化）。
此外，其异步通信模式使得消息传递过程为异步执行，发送方无需等待接收方的响应，适用于非实时性的数据交互场景（如状态同步、指令传递等）。
最后，它还适配多窗口通信，不仅支持 iframe 与父窗口的双向通信，还可应用于 window.open 创建的子窗口、同一浏览器中不同标签页之间的通信（需获取目标窗口的引用）。

二、使用方式

postMessage 的使用需通过 “发送消息” 与 “接收消息” 两个环节协同完成，且必须遵循严格的安全规范。

发送消息主要通过 targetWindow.postMessage() 方法实现，该方法的语法定义为 targetWindow.postMessage(message, targetOrigin, [transfer])。其中 message 是待传递的数据内容，支持基本数据类型及可序列化的对象，复杂结构需通过 JSON.stringify() 转换为字符串后传递；targetOrigin 用于指定接收消息的窗口的源，格式为 “协议 + 域名 + 端口”（如 https://example.com:8080），若设置为 * 表示不限制接收方的源（生产环境中不建议使用，存在安全风险），若设置为 / 则表示与当前窗口同域；transfer 为可选参数，用于传递可转移对象（如 ArrayBuffer），转移后原窗口将失去对该对象的所有权，实际应用中较少使用。例如，主应用向 iframe 嵌入的子应用发送用户信息时，可先获取 iframe 对应的 window 对象引用，再调用该方法发送消息：

const iframeElement = document.getElementById('subapp-iframe');
const targetWindow = iframeElement.contentWindow;
targetWindow.postMessage({ type: 'USER_AUTH', payload: { userId: 'u123', roles: ['admin'] } },'https://subapp.example.com'
);

接收消息则是通过监听 window 对象的 message 事件来实现，语法为 window.addEventListener('message', eventHandler, false)。事件对象 event 包含三个重要属性：data 是发送方传递的消息内容（自动反序列化）；origin 是发送消息的窗口的源（格式为 protocol://domain:port），用于验证消息来源的合法性；source 是发送消息的窗口的引用，可用于向发送方回传消息。

接收消息时必须进行来源验证，以防止恶意网站伪造消息，标准处理流程为：首先验证消息来源，仅处理可信域名的消息，若消息来源不符合预期则忽略；其次验证消息格式，确保消息结构符合预期，若格式异常则不处理；最后根据消息类型处理相应的业务逻辑。例如，子应用中接收主应用消息的代码实现：

window.addEventListener('message', (event) => {// 验证消息来源if (event.origin !== 'https://mainapp.example.com') {return;}// 验证消息格式if (typeof event.data !== 'object' || !event.data.type) {return;}// 处理业务逻辑switch (event.data.type) {case 'USER_AUTH':handleUserAuth(event.data.payload);break;}
}, false);

三、典型使用场景

postMessage 的典型使用场景广泛，在微前端架构中，基于 iframe 的微前端架构里，主应用与子应用可通过 postMessage 实现数据交互，比如主应用向子应用传递初始化参数（如用户令牌、路由信息），子应用向主应用反馈关键操作结果（如表单提交状态、错误信息）。

在第三方组件集成时，当页面嵌入第三方提供的组件（如支付插件、地图控件），可通过 postMessage 实现宿主页面与组件的指令交互，例如支付完成后，第三方组件通过 postMessage 通知宿主页面更新订单状态。

在多窗口协同操作中，对于通过 window.open 打开的子窗口，可通过 postMessage 实现与父窗口的状态同步，如电商平台中，子窗口完成商品选购后，通过 postMessage 向父窗口传递购物车信息。

此外，它还能解决传统跨域场景下的通信限制，如前端页面与跨域 iframe 之间的数据交换，无需依赖后端代理即可实现有限度的数据传递。

四、安全实践规范

在安全实践方面，多项规范需要严格遵循：接收消息时必须校验 event.origin，仅处理可信域名发送的消息，拒绝一切非预期来源的请求，例如可定义可信源列表，若消息来源不在列表中则过滤该消息；发送消息时应避免使用 * 作为 targetOrigin，明确指定接收方的源，防止消息被无关窗口截取；接收消息时需验证 data 的结构，如是否包含必要字段、数据类型是否匹配预期，避免处理格式异常的消息；若使用 iframe 嵌入第三方内容，可通过 sandbox 属性限制其权限（如 sandbox=“allow-scripts allow-forms”），同时确保开启必要的通信权限；跨域场景下，应避免通过 postMessage 传递密码、令牌等敏感数据，若必须传递，需确保通信链路通过 HTTPS 加密。

总结

postMessage 作为跨源窗口通信的标准解决方案，其核心价值在于在保障安全性的前提下，实现不同源文档之间的可控交互。通过遵循严格的来源验证、消息校验等规范，可有效规避安全风险，广泛应用于微前端架构、跨域组件集成、多窗口协同等场景。深入理解其特性与使用规范，是构建复杂前端系统时处理跨域通信的基础。