（一）问题

之前想嵌入其他网页的内容，直接用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

Day 96/100 ‘X-Frame-Options‘ to ‘sameorigin‘后如何嵌入iframe相关推荐

LeetCode 96~100
前言本文隶属于专栏<LeetCode 刷题汇总>,该专栏为笔者原创,引用请注明来源,不足和错误之处请在评论区帮忙指出,谢谢! 本专栏目录结构请见LeetCode 刷题汇总正文幕布幕 ...
顶刊发文奖励100万！不唯论文后，这所中科院研究院的激励机制引发争议
点击上方"AI遇见机器学习",选择"星标"公众号重磅干货,第一时间送达本文转载自:科研大匠近日,中科院西北研究院的一份科研绩效奖励办法文件引发关注.文中提 ...
python生成100个随机数、写入文件后再读取显示内容_Python3 实现随机生成一组不重复数并按行写入文件...
笔主在做一个项目要生成一组随机有序的整型数字,并按行输出到文本文件使用,恰好开始学习Python3,遂决定直接使用Python3解决思路:与随机数相关的函数都要使用到random这个系统库,查看相关 ...
对php的感受100字_团建活动后的感想50字-100字《5篇》
一篇.团建心得50字工作多年后再次走进学校,有缘认识大家非常感恩,拓展活动让我们彼此熟悉,通过团建活动体会了团队集体的力量非常强大,感谢这些可爱的人! 二篇.团建活动后的感想100字团建拓展活动作 ...
Career Essentials Postgraduate Study: exploring your options 读完本科后干啥?
从时速100公里行驶的车上向后发射时速100公里的棒球，会发生什么？
一键关注
Metasploit终端下的辅助扫描工具 (auxiliary模块讲解)
(辅助扫描工具主要用于网络攻防前期的踩点.信息搜集) ###一.操作环境虚拟机Kali(IP:192.168.1.92) 为方便学习开启ssh端口 # 进入ssh配置文件 >>vi /e ...
ie兼容响应式布局的实现总结
虽然说响应式设计的理想状态是,需对pc/移动各种终端进行响应:但是现实是高分辨率的pc端与手机终端屏幕相差太大,像电商这样有大量图片和文字信息的同时排版要求精准的页面,设计一个同时适应高分辨率pc又 ...
ie兼容响应式布局的实现总结和针对ie浏览器的CSS
参考链接:http://zhidao.baidu.com/link?url=bQioDKMnG_eQoE6dCxzd2hPtMyiB7phu6hBdOupn1Pjk1hV-ItXFZS5GDUBoH5 ...

Day 96/100 ‘X-Frame-Options‘ to ‘sameorigin‘后如何嵌入iframe

写在前面的话