【已解决】iframe如何能继续加载使用x-frame-options: SAMEORIGIN的网页

Question

背景

项目中需要引入第三方详情页做审核展示，所以需要将第三方详情页以iframe的形式动态加载到当前审核页面中作为预览的一部分，但是发现部分详情页，在响应头增加了如下字段：x-frame-options: SAMEORIGIN，限制了只能同源的网站才能引用，这样直接导致非同源的iframe失效了。

问题

网站页面做了x-frame-options: SAMEORIGIN处理，这样限制了iframe嵌入该页面，有没有什么办法能使iframe依然能嵌入该页面呢

Answer 1

统一回复处理方案：纯前端无法解决。解决方案：将不能跨域访问的url的host设置为你网站的域名，这一步是为了即使浏览器对url发起请求，因为host是你服务器的域名，请求也会进入到你的服务器；第二步配置Nginx转发，将该url对应的请求的头部，加上more\_clear\_headers： x-frame-options，去掉响应头里的x-frame-options限制。这样就类似于模拟了从浏览器空页面直接访问的效果，规避了同源限制。第二步的Nginx方案等都是为了修改请求头，也可以使用Node做中间件，去修改请求头

---

老帖子还有同学再问解决方案，那就再稍微补充一下吧，简而言之：不好处理...可以放弃...老大肯定不会打你的...

简单来说，x-frame-options就和同源策略一样，都是服务器返回了数据/页面，但是浏览器不予展示。
所以想消除x-frame-options在浏览器中的行为，最好的办法就是把这个响应头去掉。那么浏览器就会正常的展示对应的数据/页面。

1、x-frame-options是哪来的？
x-frame-options是目标服务器在返回response时，人为在其响应头中添加的。这个过程就是：
1.客户端(比如浏览器)发起请求
2.目标服务器响应该请求
3.目标服务器返回真实数据 + 设置response响应头x-frame-options: sameorigin
4.客户端发现x-frame-options为sameorigin，不展示真实数据

2、如何去掉x-frame-options？
了解x-frame-options如何被添加后，解决思路就是，如何在3、4中间，将response响应头x-frame-options直接干掉，这样浏览器就察觉不到x-frame-options的存在，进而正常展示response。通常采取的办法就是正向代理：
即在3、4中间，架设一个处理节点，这个处理节点可以改写目标服务器的响应头，将改写后的响应头再回传给客户端，即处理节点删除了响应头中的x-frame-options。

1. 如果你的web服务器是nginx，可以在nginx中，利用nginx的语法，删除response的响应头x-frame-options
   2.如果你不懂nginx或者很难去操作线上的nginx配置，可以尝试搭建一个node服务器(BFF)，在node服务器中删除响应的x-frame-options请求头

上面两种方案，都需要你先去理解什么是正向/反向代理，然后再去了解两种方案的原理和实现成本(BFF成本较高)。这个问题其实处理起来还是比较不方便的，而且需要对web服务有一定的了解。最简单的办法，就是让目标服务器去掉x-frame-options: sameorigin，然而这很困难....

Answer 2

我找了大半天都没 发现解决方案 最后发现谷歌竟然有相应的扩展程序能解决 只能说国外的大佬确实牛😋😋😋 插件地址