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

前言

在互联网发展历史上,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

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

打赏任意金额,发送截图到邮箱 shang@newsn.net ,可以领取精选回馈如下(任选其一):
  • 《前端视频教程大礼包》一套
  • 《wordpress精选皮肤》一套
  • 《dedecms织梦精选模板》一套
感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!

岁月静好

关注互联网发展,关注苏南大叔的《程序如此灵动~》博客
本文章来自:程序如此灵动~
博客地址为:https://newsn.net/
原文地址为:https://newsn.net/say/x-frame-options-and-iframe.html
上一篇好文:mac系统,phpize的那些事儿
下一篇好文:浏览器升级换代中,ie10也成了弃子,edge会重夺阵地吗?

如果您转载了本文章,出于某种原因,并没有注明作者或者出处。
在这里,苏南大叔也表示理解和支持。因为苏南大叔深深地明白:
您会在合适的时机,合适的地方,给本博客一个外链。对吧?
您若开心,便是安好!岁月静好,但愿世界和平,没有纷争~