当前位置：首页 > article >正文

深入理解 window.postMessage：跨域通信的解决方案与实战

article 2025/2/25 12:25:42

引言

在现代 Web 开发中，跨域通信是常见的需求，但浏览器的同源策略（Same-Origin Policy）为此设置了天然屏障。window.postMessage API 正是为解决这个问题而生，本文将深入解析其工作原理、核心使用场景，并通过具体 Demo 演示其实现过程。

一、核心使用场景

1. 跨域 iframe 通信

当父页面需要与不同源的子 iframe 交换数据时（如第三方组件集成），postMessage 能安全地穿透同源限制。

2. 多窗口应用交互

浏览器中多个独立窗口（如通过 window.open 打开的弹窗）之间进行数据同步，即使这些窗口来源不同。

3. Web Worker 通信

主线程与 Web Worker 之间传递复杂数据结构，实现非阻塞式交互。

4. 微前端架构

不同子应用（可能部署在不同域名）间的状态同步和事件传递。

二、实现原理剖析

1. 消息传递机制

targetWindow.postMessage(message, targetOrigin, [transfer]);

targetWindow: 接收消息的窗口引用（iframe.contentWindow 或 window.open 返回的引用）
message: 可序列化的数据（支持字符串、对象等）
targetOrigin: 指定允许接收的源（* 表示任意源，生产环境应避免）

2. 消息接收机制

通过监听 message 事件处理接收：

window.addEventListener('message', (event) => {
  // 必须验证消息来源
  if (event.origin !== 'https://trusted-site.com') return;
  
  console.log('Received:', event.data);
  console.log('From:', event.source);
});

3. 安全机制

Origin 验证：必须检查 event.origin 防止恶意站点攻击
数据验证：对接收数据进行严格校验
有限暴露：event.source 只提供部分窗口控制方法

三、实战 Demo 演示

Demo 1：跨域 iframe 通信

父页面（https://parent.com）:

<iframe id="childFrame" src="https://child.com"></iframe>

<script>
  const frame = document.getElementById('childFrame');
  
  // 发送消息给子iframe
  frame.contentWindow.postMessage(
    { type: 'GREETING', text: 'Hello from parent!' },
    'https://child.com'
  );

  // 接收子iframe消息
  window.addEventListener('message', (event) => {
    if (event.origin !== 'https://child.com') return;
    console.log('Parent received:', event.data);
  });
</script>

子页面（https://child.com）:

<script>
  // 接收父页面消息
  window.addEventListener('message', (event) => {
    if (event.origin !== 'https://parent.com') return;
    
    console.log('Child received:', event.data);
    
    // 回复消息
    event.source.postMessage(
      { type: 'REPLY', text: 'Message received!' },
      event.origin
    );
  });
</script>

Demo 2：窗口间通信

主窗口：

const childWindow = window.open('https://child.com/popup');

// 等待子窗口加载完成
setTimeout(() => {
  childWindow.postMessage('Auth token: XYZ123', 'https://child.com');
}, 2000);

弹出窗口：

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://parent.com') return;
  
  console.log('Received auth token:', event.data);
  event.source.postMessage('Auth confirmed', event.origin);
});