如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

前言

在互联网发展历史上,iframe和被iframe是个永远的斗争话题,早已经从最开始的目的跑偏,已经发展为非法套别人页面,甚至黑客技术中的点击劫持。因为,已经上升到内容和安全的高度,所以,这个iframe的问题,正日益被大家所重视。

范例

以github为例,这个网站就是不能被iframe的。如下图所示:

浅谈x-frame-options与iframe的关系,x-frame-options如何使用? - iframe_test_0
浅谈x-frame-options与iframe的关系,x-frame-options如何使用?(图7-1)

浅谈x-frame-options与iframe的关系,x-frame-options如何使用? - iframe_github_2
浅谈x-frame-options与iframe的关系,x-frame-options如何使用?(图7-2)

浅谈x-frame-options与iframe的关系,x-frame-options如何使用? - iframe_test_5
浅谈x-frame-options与iframe的关系,x-frame-options如何使用?(图7-3)

这几个图大家先看看,然后看完下面的内容后,再回来看上面的内容,就能够明白github是怎么做的了。
首先服务器发header头X-Frame-Options。(方法很多,这里以php发出这个header为例)

X-Frame-Options:DENY

只要被iframe,就显示空白。

header("X-Frame-Options:DENY");

浅谈x-frame-options与iframe的关系,x-frame-options如何使用? - iframe_test_1
浅谈x-frame-options与iframe的关系,x-frame-options如何使用?(图7-4)

X-Frame-Options:SAMEORIGIN

只允许相同域名下的网页iframe。端口不同,二级域名不同,https和http不同,这都不能算同域名,都会显示空白。

header("X-Frame-Options:SAMEORIGIN");

浅谈x-frame-options与iframe的关系,x-frame-options如何使用? - iframe_test_2
浅谈x-frame-options与iframe的关系,x-frame-options如何使用?(图7-5)

X-Frame-Options: ALLOW-FROM https://newsn.net/

事实上,这个设置项只是个美丽的愿望,并不是所有的浏览器都支持这个选项。譬如,目前风头正劲的chrome就是不支持这个选项的。

header("X-Frame-Options: ALLOW-FROM https://newsn.net/");

但是chrome支持的是Content-Security-Policy的frame-ancestors。例如:

header("Content-Security-Policy: frame-ancestors yourdomain.com");

浅谈x-frame-options与iframe的关系,x-frame-options如何使用? - iframe_test_3
浅谈x-frame-options与iframe的关系,x-frame-options如何使用?(图7-6)

浅谈x-frame-options与iframe的关系,x-frame-options如何使用? - iframe_test_4
浅谈x-frame-options与iframe的关系,x-frame-options如何使用?(图7-7)

X-Frame-Options和Content-Security-Policy这两个header有重叠的部分,从chrome的表现来看,如果有设置Content-Security-Policy的话,则会忽略X-Frame-Options。在chrome中,如果设置X-Frame-Options: ALLOW-FROM ,则相当于没有设置,将允许任何网站iframe自己。(这个比较坑,无数网站躺枪。)

官方关于,对allow-from的特性不支持,具体说明如下:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options#Browser_compatibility

关于Content-Security-Policy的使用,是很复杂的,大家可以回到本文开始的位置,看看github的相关设置,就可能各种头晕了。感兴趣的,可以先查看这里: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy 。以后,我们再详细说明这个选项,应该是个白帽子的突破点。

结语

更多苏南大叔带来的iframe相关的精彩内容,请点击这里查看: https://newsn.net/tag/iframe/

 【源码】代码片段及相关软件点此获取

 【github】秘籍文章入口,仅传授于有缘之人   github    iframe

本站的忠实读者小伙伴,正在阅读下面这些文章:

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
欢迎指正文字或逻辑错误,将会择优在文末列出您的信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!