X-Frame-Options防止网页放在iframe中

在自己新做的一个网站“开发头条”上发现用iframe嵌入github的内容时,一篇空白,什么东西都没有。打开chrome 调试,发现里面输出一个错误提示:Refused to display ‘https://github.com/hwclass/awesome-sound’ in a frame because it set ‘X-Frame-Options’ to ‘deny’. 搜索了一下这个东西。

X-Frame-Options是什么?

X-Frame-Options是一个HTTP标头(header),用来告诉浏览器这个网页是否可以放在iFrame内。例如:

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
X-Frame-Options: ALLOW-FROM https://qdkfweb.cn/

第一个例子告诉浏览器不要(DENY)把这个网页放在iFrame内,通常的目的就是要帮助用户对抗点击劫持。

第二个例子告诉浏览器只有当架设iFrame的网站与发出X-Frame-Options的网站相同,才能显示发出X-Frame-Options网页的内容。

第三个例子告诉浏览器这个网页只能放在https://qdkfweb.cn//网页架设的iFrame内。

不指定X-Frame-Options的网页等同表示它可以放在任何iFrame内。

X-Frame-Options可以保障你的网页不会被放在恶意网站设定的iFrame内,令用户成为点击劫持的受害人。

另外查了最新的资料,还可以直接通过meta标签来设置,不需要放在http头部请求中了。

<meta http-equiv="X-Frame-Options" content="deny">

两个参数:(作用与上面一致)

  1. SAMEORIGIN
  2. DENY

关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流