2022年Safari浏览器是否支持跨域postMessage功能？

Safari 从未移除标准postMessage API支持，90%以上的跨域通信失效场景，都是触发了Safari的安全校验规则或智能跟踪防护（ITP）限制，和Chrome的容错逻辑存在差异。

常见失效原因 #

• 窗口引用未就绪：Safari对iframe、弹窗的contentWindow对象回收和加载校验比Chrome严格，若在DOM节点刚插入、目标页面未触发load事件时就调用postMessage，会因为目标窗口引用为空导致消息投递失败
• targetOrigin配置不规范：Chrome对模糊匹配、通配符的targetOrigin容忍度较高，但Safari在跨域场景下要求必须传入精确的目标源（完整协议+域名+端口，无多余路径），若传入*作为targetOrigin且涉及双向通信，Safari会直接拦截消息投递
• 非用户手势触发弹窗：如果是通过window.open打开跨域窗口，必须在点击、键盘输入等用户主动交互的同步回调中执行打开操作，异步回调（如接口请求返回后）触发的弹窗会被Safari标记为广告类窗口，切断后续postMessage通信链路
• ITP第三方上下文隔离：跨主域的iframe在Safari中默认只有7天临时第三方存储权限，超期后会被放入隔离分区，若postMessage逻辑前置依赖cookie、localStorage读写，会因为存储访问被拦截导致后续通信逻辑整体失效

全版本Safari兼容的postMessage实现示例 #

发送端代码（部署在源https://site-a.com） #

// 配置精确的目标源，禁止在生产环境跨域通信时使用*
const TARGET_ORIGIN = 'https://site-b.com'

// 动态创建跨域iframe场景
const crossIframe = document.createElement('iframe')
crossIframe.src = `${TARGET_ORIGIN}/target-page`
// 必须等iframe加载完成后再发送消息
crossIframe.addEventListener('load', () => {
  crossIframe.contentWindow.postMessage(
    {
      action: 'cross_sync',
      data: { content: '来自站点A的测试消息' }
    },
    TARGET_ORIGIN
  )
})
document.body.appendChild(crossIframe)

// 监听响应消息，必须做来源校验
window.addEventListener('message', (event) => {
  if (event.origin !== TARGET_ORIGIN) return
  if (event.data.action === 'cross_sync_ack') {
    console.log('收到站点B响应：', event.data.data)
  }
})

接收端代码（部署在源https://site-b.com） #

// 配置信任的消息发送源
const TRUSTED_SENDER_ORIGIN = 'https://site-a.com'

window.addEventListener('message', (event) => {
  // 优先校验消息来源，拦截非信任请求
  if (event.origin !== TRUSTED_SENDER_ORIGIN) return
  if (event.data.action === 'cross_sync') {
    console.log('收到站点A消息：', event.data.data)
    // 回传响应时同样指定精确的目标源
    event.source.postMessage(
      {
        action: 'cross_sync_ack',
        data: { content: '消息接收成功，通信正常' }
      },
      TRUSTED_SENDER_ORIGIN
    )
  }
})

排查提示：复现问题时打开Safari开发者工具控制台，勾选「保留日志」，如果是ITP拦截导致的失效，控制台会打印明确的第三方上下文隔离提示，可在Safari设置中临时关闭「阻止跨站跟踪」选项验证功能是否恢复，生产环境可通过Storage Access API申请第三方存储权限解决隔离问题。

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