跨文档通信

1. postMessage 概述

window.postMessage 是一种安全的跨源通信机制，允许不同窗口/iframe 之间传递数据。

2. 基本用法

// 发送
iframe.contentWindow.postMessage({ type: 'GREETING' }, 'https://example.com');
window.parent.postMessage({ type: 'RESULT' }, '*');

// 接收
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://example.com') return;
  console.log('来源:', event.origin);
  console.log('数据:', event.data);
});

MessageEvent 属性

3. 安全实践

window.addEventListener('message', (event) => {
  //  验证来源
  if (event.origin !== 'https://trusted-domain.com') return;
  //  验证数据格式
  if (typeof event.data !== 'object' || !event.data.type) return;
  handleMessage(event.data);
});

始终指定 targetOrigin：

//  指定确切的目标源
iframe.contentWindow.postMessage(data, 'https://specific-domain.com');
//  使用通配符（不安全）
iframe.contentWindow.postMessage(data, '*');

4. Channel Messaging API

const channel = new MessageChannel();
channel.port1.onmessage = (e) => console.log('收到:', e.data);
iframe.contentWindow.postMessage({ type: 'INIT_PORT' }, '*', [channel.port2]);