Safari中因CSS规则引发的Iframe跨域源错误排查与解决

在Safari浏览器中出现以下跨域错误：

Blocked a frame with origin "thepagedomain" from accessing a frame with origin "theiframesourcedomain". Protocols, domains, and ports must match.

对应的页面代码如下：

<html><head>
<style>
#iframe{
    
    width: 100%;
    height: calc(100% - 49px);

    
}
</style>        
</head>
<body>
    <iframe src="https://test.com/" id="iframe"></iframe>   
</body>
</html>

当前iframe内容为空（正常会加载完整页面），奇怪的是当把iframe的width或height百分比设为90%以下时，该错误就会消失。推测是Safari的浏览器Bug，希望找到方法抑制该错误，避免与真实的跨域错误混淆。

1. 过滤控制台特定错误 #

通过重写console.error方法，精准过滤掉这条特定的错误信息，不会干扰其他错误的输出：

const originalError = console.error;
console.error = function(...args) {
  const errorMsg = args.join(' ');
  // 匹配目标错误的特征关键词
  if (!errorMsg.includes('Blocked a frame with origin') || !errorMsg.includes('Protocols, domains, and ports must match')) {
    originalError.apply(console, args);
  }
};

将这段代码放在页面</body>前的<script>标签中即可生效。

2. 调整iframe样式绕过Bug触发条件 #

既然错误和iframe的尺寸计算逻辑相关，可以换一种布局实现方式，替代calc(100% - 49px)的写法：

<html><head>
<style>
body {
  margin: 0;
  height: 100vh;
  padding-top: 49px;
  box-sizing: border-box;
}
#iframe{
    width: 100%;
    height: 100%;
}
</style>        
</head>
<body>
    <iframe src="https://test.com/" id="iframe"></iframe>   
</body>
</html>

这种方式通过给body设置顶部padding来实现原布局的高度效果，同时避开可能触发Safari异常的计算逻辑。

3. 排查iframe内部的跨域操作 #

虽然你认为是浏览器Bug，但也可以快速检查iframe是否存在残留的初始化代码（比如尝试调用parent.document等跨域DOM操作）。如果是这类代码触发的错误，需要在iframe端移除相关非法操作，从根源解决问题。

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