问题1：父窗口发送消息到弹窗，弹窗未接收 #

你当前的代码在打开弹窗后立即调用postMessage，但此时弹窗的页面还没完成加载——弹窗里监听message事件的代码还没注册，所以消息直接丢失了。

修复方案：等待弹窗的load事件触发后再发送消息，确保弹窗已经准备好接收：

const onAdd = () => {
  const popup = window.open('http://localhost:3001/auth', 'authWindow','height=500,width=500');
  // 监听弹窗加载完成事件
  popup.addEventListener('load', () => {
    popup.postMessage('data', 'http://localhost:3001');
  });
}

另外要注意：你在父窗口添加的message监听是用来接收其他窗口发给父窗口的消息，如果你要验证弹窗是否收到消息，需要在弹窗的代码里添加message监听并打印日志。

问题2：弹窗向父窗口发消息时报错 #

你遇到的错误是因为postMessage的目标源设置逻辑有问题，加上缺少来源验证导致的安全校验失败。

错误原因：当弹窗调用e.source.postMessage时，必须确保targetOrigin和e.source（父窗口）的实际源完全匹配，同时要先验证消息的来源是否可信。

修复后的弹窗代码：

const receiveMessage = (e) => {
  // 第一步：验证消息来源，只处理父窗口的消息
  if (e.origin !== "http://localhost:3000") {
    return;
  }
  console.log("收到父窗口消息:", e.data);
  // 用e.origin作为targetOrigin，确保和父窗口源一致
  e.source.postMessage("message: asasdas", e.origin);
}

React.useEffect(() => {
  window.addEventListener("message", receiveMessage);
  // 组件卸载时移除监听，避免内存泄漏
  return () => {
    window.removeEventListener("message", receiveMessage);
  };
}, [])

额外的最佳实践 #

• 始终指定明确的targetOrigin：不要用*（除非你完全清楚风险），防止消息被恶意站点拦截。
• 必须验证消息来源：在所有message监听中先检查event.origin，只处理可信域名的消息，避免XSS风险。
• 清理事件监听：在组件卸载时移除message监听，防止内存泄漏。

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