如何跨域使用Window.postMessage()？父子页面与iframe通信方法

Window.postMessage()是浏览器原生的跨源通信API，能安全解决父页面与不同域iframe之间的消息传递问题，核心是通过严格的源验证规避跨域风险，具体实现步骤如下：

一、父页面向iframe发送消息 #

1. 获取目标iframe的window对象，确保iframe加载完成后再发送消息
2. 调用postMessage()时必须指定可信的目标域名（禁止使用*，除非无安全要求）

// 父页面代码
const targetIframe = document.getElementById('cross-origin-iframe');

// 等待iframe加载完成后发送消息
targetIframe.addEventListener('load', () => {
  // 仅允许消息发送到指定域名，如"https://trusted-iframe-domain.com"
  targetIframe.contentWindow.postMessage(
    { type: 'init', data: '初始化配置' },
    'https://trusted-iframe-domain.com'
  );
});

二、iframe接收父页面消息并回复 #

1. 监听window的message事件
2. 优先验证event.origin是否为可信父域名，直接拒绝非法来源的消息
3. 按需处理消息内容，如需回复可通过event.source.postMessage()发送

// iframe页面代码
window.addEventListener('message', (event) => {
  // 验证发送方为可信父页面域名
  if (event.origin !== 'https://trusted-parent-domain.com') return;

  // 校验消息格式（可选但推荐）
  if (typeof event.data !== 'object' || !event.data.type) return;

  // 处理消息
  switch (event.data.type) {
    case 'init':
      console.log('收到父页面初始化消息:', event.data.data);
      // 回复父页面
      event.source.postMessage(
        { type: 'init-reply', status: 'success' },
        event.origin
      );
      break;
    // 其他消息类型处理
  }
});

三、iframe向父页面发送消息 #

直接调用window.parent.postMessage()，同样指定可信的父页面域名：

// iframe页面代码
// 向父页面提交数据
window.parent.postMessage(
  { type: 'submit', data: '用户提交内容' },
  'https://trusted-parent-domain.com'
);

四、父页面接收iframe消息 #

同样通过message事件监听，严格验证来源：

// 父页面代码
window.addEventListener('message', (event) => {
  // 验证发送方为可信iframe域名
  if (event.origin !== 'https://trusted-iframe-domain.com') return;

  // 处理消息
  if (event.data.type === 'submit') {
    console.log('收到iframe提交数据:', event.data.data);
  }
});

关键安全注意事项 #

• 禁止使用*作为targetOrigin：除非你确定消息可以发送给任何域，否则会导致消息被恶意站点拦截
• 必须验证event.origin：这是防范跨域攻击的核心，只处理可信域名的消息
• 校验消息内容：对event.data进行格式和内容校验，避免注入攻击（如解析JSON时使用try-catch）
• 限制event.source：如果有多个iframe，可通过event.source匹配预期的iframe窗口对象
• 使用HTTPS传输：敏感消息需通过HTTPS发送，防止被窃听

内容的提问来源于stack exchange，提问作者Steve11235