内嵌页面跨域报错

背景介绍：

因客户需求，客开将门户页面 ehrtg.yintai-centre.com 使用iframe内嵌到客户的页面 portalt.yintai-centre.com 中。

报错信息：

Uncaught DOMException: Blocked a frame with origin "https://xxxxx.com" from accessing a cross-origin frame

注： IE的控制台上可能报“拒绝访问”

触发点：

发现门户中的iframe在使用 parent.vPortal 时会报错，只要是调用parent上的方法、属性等，都会报错。

排查步骤：

1. 门户 ehrtg.xxx-centre.com 是使用iframe内嵌到客户网页 portalt.xxx-centre.com 中， 将门户页面使用浏览器直接打开，发现问题仍然存在。

2. 因发生点位置是门户页面中的一个iframe， 在门户中使用iframe打开其它页面，然后在iframe中测试调用parent上的方法，发现内嵌的iframe，只要调用parent，就会触发跨域问题。

3. 排查门户页面(top)的 document.domain 与 iframe中页面的 document.domain，发现前者为xxx-centre.com ，后者为 ehrtg.xxx-centre.com 。两者在二级域名有差异，怀疑问题点在这里，继续排查。

4. 手动将门户页面(top)的 document.domain 设置成 ehrtg.xxx-centre.com 后， 在iframe中调用 parent.vPortal 不再报错，定位到问题点。

5. 因当前地址栏中的地址为 htts://ehrtg.xxx-centre.com ， iframe中的地址为相对路径，且iframe的document.domain与地址栏中的域名一致，判断问题点在门户（top）的 document.domain。

6. 排查门户的doc， 发现在head中，有对document.domain进行赋值。使用overrides进行覆盖测试， 将下图中的代码注释掉后， iframe能正常访问parent中的方法，问题排查完成。

总结：

如果各方面跨域相关配置完成，门户页面能正常渲染的情况下，发现门户内嵌iframe无法正常显示，一直报跨域问题， 优先排查门户页面是否更改了"document.domain"

编撰人：chuhc、het

快速跳转

• 内嵌页面跨域报错
  • 背景介绍：
  • 报错信息：
  • 触发点：
  • 排查步骤：
  • 总结：