2022-05-26 17:32:02

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

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

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

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

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

只有当访问文档的用户使用浏览器支持时才提供附加的安全性 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 才能工作。
 具体的使用配置，大家可以参考：https://cloud.tencent.com/developer/section/1190032 这里有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 命令设置在服务器级别时，这似乎是有效。
 
如果其他小伙伴有更好的解决方案，可以在下面留言哦，这样类似的问题可以在一个问题中得以解决，避免到处查找浪费时间。
 
希望上面的内容对你的工作学习有所帮助！欢迎各位一键三连哦～
 
各位 加油！
 
                                    首先在父页面的javascript给定义一个window.name，并赋予一个字符串值，如window.name="test"，其中赋予的字符串值可以随意定义，然后在Iframe页面的Form 标签中定义target属性，并且其值也必须与之前定义的window.name的值相同，即<form method="post" target="test" >，在子页面提交后即可刷新父页面跳转到指定的请求页面.
此资源由网友提供。谢谢！
                                    问题描述：在A系统中使用iframe嵌入B系统，出现下面错误。原因：
X-Frame-Options： HTTP 响应头是用来给浏览器 指示允许一个页面 可否在, ,  或者  中展现的标记。站点可以通过确保网站没有被嵌入到别人的站点里面，从而避免 点击劫持 攻击。X-Frame-Options 有三个属性值：
deny：表示该页面不允许在frame中展示，即便是在相同域名的页面中嵌套也不允许。
sameorigin：表示该页面可以在相同域名页面的frame中展示。
allow-from uri：表示该页面
                                    Refused to display 'http://localhost:xxxx/' in a frame because it set 'X-Frame-Options' to 'deny'.
后来发现是我访问的时候，本机是https，但是访问的地址是http，有个跨域的问题。主要就是浏览器认为不安全。去搜索了一下Http和Https的跨域问题，结论如下：那么解决方案可以是做个代理转发，或者我选择了一个笨办法，就是我去试了下我要嵌入的这个链接https能不能访问，然后发现可以，我就自己自己加了一个s，就可以访问了~...
                                    第二个例子告诉浏览器只有当架设iFrame的网站与发出X-Frame-Options的网站相同，才能显示发出X-Frame-Options网页的内容。第三个例子告诉浏览器这个网页只能放在 http://caibaojian.com// 网页架设的iFrame内。第一个例子告诉浏览器不要（DENY）把这个网页放在iFrame内，通常的目的就是要帮助用户对抗点击劫持。关掉了才解决，开始想着翻越过这个问题，最终发现这个是安全机制，翻越不了。还是不行，最终的解决方案是去帆软报表的服务器上面把安全设置里面的。
报错原因：
报错信息已经描述的很明确了，在frame嵌套页面的时候被拒绝了，拒绝原因是Header头中的X-Frame-Options属性的值为‘deny’。
这个机制是为了防止站点被劫持。
这个问题需要修改Nginx或者Apache的配置，这里以Nginx为例：
在配置文件中加入X-Frame-Options属性的值：
add_header X-Frame-Options ALLOWALL; #允许所有域名iframe
add_header X-
                                    X-Frame-Options 响应头 
注意: CSP Level 2 规范中的 frame-ancestors 指令会替代这个非标准的 header。CSP 的 frame-ancestors 会在 Gecko 4.0 中支持，但是并不会被所有浏览器支持。然而 X-Frame-Options 是个已广泛支持的非官方标准，可以和 CSP 结合使用。 
X-Frame-Options HTTP 响...
                                    解决iframe嵌套自身项目时遇到的nginx的配置问题
需求是需要将自己当前的项目嵌入到客户的系统里面去。
问题1：iframe直接嵌套时显示拒绝访问导致无法嵌套。
解决方案：在nginx上加配置设置允许访问的白名单。
add_header X-Frame-Options 'ALLOW-FROM http://XXX.com'
这种方式在谷歌和火狐已经废弃，在IE有效
add_header Content-Security-Policy  "frame-ancestors http://XXX.com"