我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

苏南大叔:浅谈x-frame-options与iframe的关系,x-frame-options如何使用? - cors-iframe-options
浅谈x-frame-options与iframe的关系,x-frame-options如何使用?(图8-1)

本篇文章,广义的范围上来说,属于跨域通信的范畴,也就是CORS

范例

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

苏南大叔:浅谈x-frame-options与iframe的关系,x-frame-options如何使用? - iframe_test_0
浅谈x-frame-options与iframe的关系,x-frame-options如何使用?(图8-2)

苏南大叔:浅谈x-frame-options与iframe的关系,x-frame-options如何使用? - iframe_github_2
浅谈x-frame-options与iframe的关系,x-frame-options如何使用?(图8-3)

苏南大叔:浅谈x-frame-options与iframe的关系,x-frame-options如何使用? - iframe_test_5
浅谈x-frame-options与iframe的关系,x-frame-options如何使用?(图8-4)

这几个图大家先看看,然后看完下面的内容后,再回来看上面的内容,就能够明白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如何使用?(图8-5)

X-Frame-Options:SAMEORIGIN

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

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

苏南大叔:浅谈x-frame-options与iframe的关系,x-frame-options如何使用? - iframe_test_2
浅谈x-frame-options与iframe的关系,x-frame-options如何使用?(图8-6)

X-Frame-Options: ALLOW-FROM https://seosn.com/

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

header("X-Frame-Options: ALLOW-FROM https://seosn.com/");

但是chrome支持的是Content-Security-Policyframe-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如何使用?(图8-7)

苏南大叔:浅谈x-frame-options与iframe的关系,x-frame-options如何使用? - iframe_test_4
浅谈x-frame-options与iframe的关系,x-frame-options如何使用?(图8-8)

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

官方关于,对allow-from的特性不支持,具体说明如下:

关于Content-Security-Policy的使用,是很复杂的,大家可以回到本文开始的位置,看看github的相关设置,就可能各种头晕了。感兴趣的,可以先查看这里:

以后,苏南大叔再详细说明这个选项,应该是个白帽子的突破点。

结语

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

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