Safari下iframe跨域访问被拦截求助（React&Gatsby构建站点）

错误信息 #

Blocked a frame with origin "https://AAA.BBB" from accessing
a frame with origin "https://XXX.netlify.app". Protocols, domains,
and ports must match

问题原因 #

Chrome和Safari对同源策略的执行逻辑存在差异：Chrome在iframe仅被嵌入、无主动跨域操作时会放宽限制；而Safari的同源检查更严格——只要嵌入的外部站点脚本尝试访问父页面（比如读取window.parent、document对象），就会触发拦截。

至于Vimeo这类平台的嵌入内容不会出问题，是因为它们的代码做了严格的跨域兼容处理，不会主动去访问父页面的DOM或全局对象，自然不会触发同源拦截。

解决方案 #

• 排查外部站点脚本行为：联系客户确认AAA.BBB的代码里有没有尝试访问嵌入它的父页面的逻辑，比如调用window.parent、top对象读取数据或操作DOM。如果有，让对方移除这类操作，或者改用postMessage实现安全的跨域通信（双方约定好消息格式，父页面和iframe互相监听message事件传递数据）。
• 给iframe添加sandbox属性：在React/Gatsby渲染iframe时，通过sandbox属性限制iframe内脚本的权限，阻止它访问父页面，同时保留必要功能。示例代码：

<iframe
  src="https://AAA.BBB"
  sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
  width="100%"
  height="600"
  frameBorder="0"
/>

根据实际需求调整sandbox的权限值，比如不需要弹窗就去掉allow-popups，最小化权限能进一步降低跨域冲突概率。

• 用Netlify代理实现同源访问：在项目根目录创建_redirects文件，添加代理规则将外部站点请求转发到Netlify域名下：

/aaa-bbb/*  https://AAA.BBB/:splat  200

之后iframe的src改为/aaa-bbb/，这样浏览器会认为请求是同源的，不会触发跨域拦截。注意要提前和客户确认是否允许代理他们的站点，避免合规问题。

• 排查Safari隐私设置：部分用户的Safari开启了“阻止跨站跟踪”或类似隐私功能，可能会加剧跨域拦截。可以测试在隐私模式下是否仍出现问题，或者告知用户暂时调整设置，但这属于用户端操作，仅作为辅助排查手段。

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