写在前面的话

今儿第一天入职；

被同事问了问题，之前没遇到过，这里记录下~

（一）问题

之前想嵌入其他网页的内容，直接用iframe；

But，现在的问题是，原服务设置X-Frame-Options，限制了iframe的嵌入；

（二）相关知识

1、X-Frame-Options

X-Frame-Options: deny

X-Frame-Options: sameorigin

X-Frame-Options: allow-from https://example.com/

deny：

表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许。

sameorigin

表示该页面可以在相同域名页面的 frame 中展示。

allow-from uri

表示该页面可以在指定来源的 frame 中展示。

2、服务器如何配置

Apache

Header always set X-Frame-Options "sameorigin"

NGINX

add_header X-Frame-Options sameorigin always;

Express

consthelmet=require('helmet'); constapp=express(); app.use(helmet.frameguard({action:"sameorigin"}));

3、阮一峰说

这样会侵犯版权，建议使用的时候加上原网站的链接；

嵌入的真是网址对一般用户是不可见的，欺骗了用户并且侵犯原作者所提供的内容

使用这类框架技术展示别人网站页面视觉效果上完全一样，有着极其高的欺骗性

恶意嵌入者可能在嵌入页面上方附加广告（更严重的是进行木马或者病毒传播），这种行为严重的破坏原作者的形象与意图。

访问者通过框架展示的内容点击链接跳转另外一个链接，其外部的网址是不变的，这种体验效果非常差并且访问者会认为是原作者提供。

（三）怎么办？

在百度和Google搜了好久没找到方案；

在GitHub上找到了X-Frame-Bypass，试了下好使~~~

页面中引入下面两个链接

<script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>

<script type="module" src="https://unpkg.com/x-frame-bypass"></script>

iframe这样写

<iframe src="https://www150.statcan.gc.ca/n1/pub/45-28-0001/2020001/article/00086-eng.htm"></iframe>

页面出来了。

最后，建议在使用的时候，加上原网站的链接，谨慎使用，尊重版权。

以上~

参考链接：

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options

https://github.com/niutech/x-frame-bypass