跨子域前端通过iframe实现消息全网广播的技术问题

问题本质 #

你当前用parent.postMessage只能给当前iframe实例的父页面发消息，因为每个子域页面（a/b/c.domain.com）里的iframe都是独立的运行实例，彼此之间没有直接的通信通道。要实现广播到所有嵌入该iframe的父页面，得利用iframe的同源特性（均为iframe.domain.com），通过同源存储做中转。

实现方案 #

利用同源iframe共享localStorage的特性，结合storage事件实现跨实例消息同步：

1. 父页面代码（a/b/c.domain.com） #

保留消息监听，同时优化来源验证提升安全性：

window.addEventListener('message', (__e) => {
  // 仅接收来自iframe.domain.com的消息
  if (__e.origin !== 'https://iframe.domain.com') return;
  console.log('RECEIVED', __e.data);
});

// 向iframe发送消息的示例代码
function sendBroadcastMsg(content) {
  const iframe = document.querySelector('iframe');
  // 指定精确的目标origin，避免*带来的安全风险
  iframe.contentWindow.postMessage(content, 'https://iframe.domain.com');
}

2. iframe页面代码（iframe.domain.com） #

通过localStorage中转消息，触发所有iframe实例的广播：

// 生成消息唯一ID，避免重复处理
function getUniqueMsgId() {
  return `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
}

// 接收父页面消息，写入localStorage触发广播
window.addEventListener('message', (__e) => {
  // 验证消息来源，仅允许指定子域
  const allowedOrigins = ['https://a.domain.com', 'https://b.domain.com', 'https://c.domain.com'];
  if (!allowedOrigins.includes(__e.origin)) return;

  console.log("INSIDE IFRAME received: " + __e.data);
  // 封装消息，加入唯一标识和发送方
  const broadcastMsg = JSON.stringify({
    content: __e.data,
    msgId: getUniqueMsgId(),
    sender: __e.origin
  });
  localStorage.setItem('crossDomainMsg', broadcastMsg);
});

// 监听localStorage变化，向当前父页面转发消息
window.addEventListener('storage', (__e) => {
  if (__e.key !== 'crossDomainMsg') return;
  const { content } = JSON.parse(__e.newValue);
  // 向当前iframe的父页面发送消息，可指定允许的origin列表
  parent.postMessage(content, '*');
  // 若需更安全，可替换为具体子域：['https://a.domain.com', ...].forEach(origin => parent.postMessage(content, origin))
});

关键说明 #

• localStorage的storage事件：当同源页面（这里是所有iframe.domain.com的实例）修改localStorage时，除了修改者本身，其他同源实例都会触发该事件，天然避免了原发送页面的重复接收
• 安全优化：始终验证消息的origin，避免使用*作为postMessage的目标origin（除非必要），防止恶意页面接收消息
• 兼容性：localStorage和storage事件支持所有现代浏览器，兼容性优于SharedWorker等方案

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