关于嵌套使用 iFrame 出现 Refused to display in aframe 拒绝连接访问 和 ‘X-Frame-Options‘ to ‘SAM

前言

今天在迁移旧项目时，出现了如下错误提示：

Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

问题描述

当前项目是一个生产环境正常运行的项目，由于我们要迁移服务器并且部署 k8s，所以需要重新部署上线该项目。

使用 iframe 的场景就是在一个容器中展示另一个页面（也是我们自己的页面，只不过域名不同）才会抛出这个错误。

这个项目的在测试环境和生产环境都是可以正常展示的，但是在预发布环境下，我们嵌入的 iframe 却拒绝访问了。

原因分析

这是因为 X-Frame-Options 响应头的处理策略导致的：

所述 X-Frame-OptionsHTTP 响应报头可以被用来指示一个浏览器是否应该被允许在一个以呈现页面 <frame>，<iframe> 或 <object>。通过确保其内容未嵌入其他网站，网站可以使用此功能来避免 点击劫持 攻击。 [内容引自：cloud.tencent.com/developer/s…]

只有当访问文档的用户使用浏览器支持时才提供附加的安全性 X-Frame-Options。

X-Frame-Options 有三种可能的指示：

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
X-Frame-Options: ALLOW-FROM https://example.com/

指令：

• DENY：从其他站点加载时，不仅尝试在框架中加载页面失败，从同一站点加载时尝试这样做将失败（无论站点尝试这样做，页面都不能显示在框架中）；
• SAMEORIGIN：只要包含在框架中的站点与为页面提供服务的站点相同，仍然可以在框架中使用该页面（该页面只能显示在与页面本身相同的源框架中）；
• ALLOW-FROM uri：页面只能显示在指定原点的框架中。

问题解决

注意：设置元标记是没用的！例如，<meta http-equiv="X-Frame-Options" content="deny"> 没有效果。不要使用它！ 只有像下面的例子那样设置 HTTP头X-Frame-Options 才能工作。 具体的使用配置，大家可以参考：cloud.tencent.com/developer/s… 这里有Apache、nginx、IIS、HAProxy 的相关配置。

如果您可以编辑该 iframe 的页面（例如，它是我们自己的页面），我们只需发送另一个带有任何字符串的 X-Frame-Options 标头即可禁用SAMEORIGIN 或 DENY 命令。

我们在平时的开发中可以通过设置 header 的值来解决这个问题：

比如添加如下 header 头：

header('X-Frame-Options: GOFORIT'); 

在我们的页面顶部将使浏览器将两者结合起来，从而导致标题为：

X-Frame-Options SAMEORIGIN, GOFORIT

这样，浏览器将允许我们在页面中加载该 iframe，来解决 iframe 拒绝连接的问题。当初始 SAMEORIGIN 命令设置在服务器级别时，这似乎是有效。

总结

如果其他小伙伴有更好的解决方案，可以在下面留言哦，这样类似的问题可以在一个问题中得以解决，避免到处查找浪费时间。

希望上面的内容对你的工作学习有所帮助！欢迎各位一键三连哦～

各位 加油！

✨$\textcolor{blue}{原创不易，还希望各位大佬支持一下}$
👍 $\textcolor{green}{点赞，你的认可是我创作的动力！}$
⭐️ $\textcolor{green}{收藏，你的青睐是我努力的方向！}$
✏️ $\textcolor{green}{评论，你的意见是我进步的财富！}$