React跨域postMessage报错：目标源与接收窗口源不匹配

问题根源 #

1. 初始源不匹配错误：iframe未加载完成时，其contentWindow的origin仍为父页面的http://localhost:3000，此时调用postMessage指定目标origin为http://localhost:3001就会触发源不匹配报错。
2. 消息延迟接收：原代码仅在localStorageObject或iframe引用变化时触发消息发送，但此时iframe可能还未加载完成，消息发送时机过早；软刷新后iframe已加载完成，重新触发useEffect才能成功发送消息。

修复方案 #

1. 父应用：确保iframe加载完成后再发送消息

改用useRef获取iframe引用（比document.querySelector更适配React生命周期），通过onLoad事件确认iframe加载完成后再发送消息：

import { useEffect, useRef } from 'react';

function ParentComponent() {
  const iframeRef = useRef(null);
  // 假设localStorageObject为已定义的序列化对象

  const sendMessageToIframe = () => {
    const iframe = iframeRef.current;
    if (localStorageObject && iframe?.contentWindow) {
      // 确认目标origin匹配后发送
      if (iframe.contentWindow.origin === 'http://localhost:3001') {
        iframe.contentWindow.postMessage(localStorageObject, 'http://localhost:3001');
      }
    }
  };

  useEffect(() => {
    // localStorageObject更新时，若iframe已加载则重发消息
    sendMessageToIframe();
  }, [localStorageObject]);

  return (
    <iframe
      ref={iframeRef}
      style={{ minHeight: window.outerHeight, width: '100%', border: "none" }}
      referrerPolicy="strict-origin-when-cross-origin"
      src={myUrlWithParams} // 确保src指向http://localhost:3001
      title="App"
      allow="clipboard-write"
      onLoad={sendMessageToIframe} // iframe加载完成后立即发送消息
    />
  );
}

2. 子应用：提前注册消息监听，避免错过初始消息

在子应用根组件挂载时就注册message事件监听，并在卸载时清理：

import { useEffect } from 'react';

function ChildApp() {
  useEffect(() => {
    const handleMessage = (event) => {
      // 验证消息来源，保障安全
      if (event.origin !== 'http://localhost:3000') return;
      // 处理接收到的对象
      console.log('收到父应用消息:', event.data);
    };

    window.addEventListener('message', handleMessage);
    // 组件卸载时移除监听，防止内存泄漏
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  return (
    // 子应用内容
  );
}

额外注意事项 #

• 安全验证：父、子应用都要在处理消息时校验event.origin，避免接收恶意网站的消息。
• 序列化检查：确保localStorageObject是可序列化的JSON对象（postMessage自动处理序列化，但要避免发送函数、Symbol等不可序列化类型）。

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