Safari浏览器中window.addEventListener('message', getData)监听postMessage失效

1. 修复发送端明显的代码错误 #

你当前的发送逻辑存在冗余调用contentWindow的问题，Safari对这类异常语法的容错性远低于Chrome/Edge：

// 错误写法
let win = iframe.contentWindow;
win.contentWindow.postMessage(/* 参数 */) // 等价于调用iframe.contentWindow.contentWindow，取值为undefined，消息根本未发送

// 修正后写法
let win = iframe.contentWindow;
win.postMessage(
  {
    customerId: customerId_rs,
    parentLocation: window.location.host,
    // 匹配监听端的判断逻辑，补充shopDomain字段，否则就算收到消息也会走else分支
    shopDomain: '对应业务域名'
  },
  "*"
);

2. 修复监听端逻辑漏洞 #

你的监听逻辑里判断了"shopDomain" in e.data，但默认发送的payload里没有这个字段，即使消息触发也会输出not able to catch data，容易误判为监听未触发，建议先临时去掉业务判断验证消息是否可达：

useEffect(() => {
  function getData(e) {
    console.log("inside function");
    var origin = e.origin || e.originalEvent?.origin; // 新增可选链防止Safari下originalEvent不存在报错
    console.log("origin", origin, "接收数据", e.data);
    // 临时注释业务判断先验证消息是否成功接收
    // if (typeof e.data == "object" && "shopDomain" in e.data) {
    //   console.log(e.data);
    // } else {
    //   console.log("not able to catch data");
    // }
  }
  console.log("绑定message监听") // 新增日志确认监听确实绑定成功，排除React渲染导致的监听未挂载问题
  window.addEventListener("message", getData, false);
  return () => {
    window.removeEventListener("message", getData, false);
  };
}, []);

3. 修复Safari专属的时序问题 #

Safari不会缓存iframe加载完成前发送的postMessage消息，必须等iframe完全加载完成后再发送消息：

// 原生父页面发送端，监听iframe加载完成事件后再发消息
const iframe = document.getElementById('你的iframe元素ID')
iframe.onload = () => {
  let win = iframe.contentWindow;
  win.postMessage(
    {
      customerId: customerId_rs,
      parentLocation: window.location.host,
      shopDomain: '对应业务域名'
    },
    "*"
  );
}

4. 排查Safari安全策略限制 #

• 如果是跨站通信场景，可临时关闭Safari设置-隐私中的「跨站跟踪防护」验证是否为智能跟踪预防（ITP）拦截了跨站上下文通信
• 不要在用户交互事件（点击、触摸等）回调外静默发送跨站postMessage，Safari会主动拦截无用户触发的跨站通信
• 如果iframe配置了CSP响应头，需要确保frame-ancestors配置允许父域名嵌入，相关资源配置没有拦截postMessage通信

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