【postmessage（通信）】在现代网页开发中，跨域通信是一个常见的需求。`postMessage` 是一种安全且灵活的跨域通信方式，广泛应用于 iframe、弹窗、子窗口与主页面之间的数据交换。以下是对 `postmessage` 通信的总结。
一、postmessage 通信简介
`postMessage` 是 HTML5 提供的一种用于跨源通信的方法，允许不同源（即不同的域名、协议或端口）的窗口之间进行安全的数据传递。它通过 `window.postMessage()` 方法实现，能够避免传统的跨域请求限制，同时保证安全性。
二、postmessage 通信原理
| 项目 | 内容 |
| 作用 | 实现跨域窗口之间的数据通信 |
| 触发方式 | 通过 `window.postMessage()` 发送消息 |
| 接收方式 | 通过 `window.addEventListener('message', callback)` 接收消息 |
| 安全性 | 通过 `origin` 参数验证来源，防止恶意攻击 |
三、postmessage 通信使用方法
| 步骤 | 操作 |
| 1. 发送消息 | 使用 `window.postMessage(data, targetOrigin)` 发送数据 |
| 2. 接收消息 | 在目标窗口中监听 `message` 事件，获取发送的数据 |
| 3. 验证来源 | 在接收方检查 `event.origin`，确保消息来自可信来源 |
| 4. 处理数据 | 对接收到的数据进行解析和处理 |
四、postmessage 通信示例代码
发送方（主页面）：
```javascript
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello from main page', 'https://example.com');
```
接收方（iframe 页面）：
```javascript
window.addEventListener('message', function(event) {
if (event.origin !== 'https://mainpage.com') return;
console.log('Received message:', event.data);
});
```
五、postmessage 通信优缺点
| 优点 | 缺点 |
| 支持跨域通信，不受同源策略限制 | 需要手动处理消息验证，增加开发复杂度 |
| 灵活，可传递任意类型的数据 | 安全性依赖开发者正确使用 origin 校验 |
| 不需要服务器支持，客户端即可完成通信 | 可能被中间人拦截，需配合加密机制增强安全 |
六、适用场景
- iframe 与父页面之间的交互
- 弹出窗口与主页面的数据交换
- 多个子窗口之间的信息同步
- 跨域应用间的通信（如微前端架构）
七、注意事项
- 始终验证 `event.origin`，避免接收非法来源的消息。
- 避免传递敏感信息，必要时应进行加密处理。
- 注意消息格式，建议使用 JSON 传递结构化数据。
通过合理使用 `postmessage`，可以有效提升网页应用的交互性和安全性，是跨域通信的重要工具之一。
