设置allow-same-origin的iframe无法访问top对象属性是什么原因？

为什么加了allow-same-origin还是报错 #

你对allow-same-origin属性的作用存在误解，它不会让不同源的iframe和父页面变成同域，你遇到的报错本质还是example1.com和example2.com本身就是两个不同的源，跨源访问顶层页面属性本身就被浏览器同源策略禁止，和sandbox配置无关。

allow-same-origin的实际作用 #

sandbox属性的默认行为是：只要给iframe加了sandbox属性，不管iframe加载的资源实际属于哪个源，浏览器都会给这个iframe分配一个唯一的不透明孤立源，这个源和任何站点都不匹配，甚至和同域名下的其他资源、甚至自身重新加载后的实例都不同源。
allow-same-origin的作用只有一个：取消上述的孤立源配置，让iframe的源回归到它所加载资源的实际真实源。

你可以通过两个场景的对比理解差异：

• 场景1：父页和iframe都属于example1.com
  • 仅配置sandbox="allow-scripts"：iframe被分配孤立源，和父页不同源，访问parent.location会报错
  • 配置sandbox="allow-scripts allow-same-origin"：iframe的源恢复为真实的example1.com，和父页同源，可以正常访问父页属性
• 场景2：父页是example1.com，iframe是example2.com
  • 不管加不加allow-same-origin，两者本身就属于不同源，只要你尝试直接访问top或者parent的属性，必然触发跨域报错

可行的替代方案 #

如果你需要在iframe和父页之间跨域传递数据，请使用postMessage API实现双向通信，不要尝试直接访问跨域页面的全局对象属性。

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