1、在 360 浏览器 兼容模式下,出现 此内容不能显示在一个框架中 的提示,如图1
此内容不能显示在一个框架中
为了帮助保护在此网站中输入的信息的安全,此内容的发布者不允许在框架中显示该信息。
2、查看网页源代码,确定是由于 iframe 且是因为网址不一致导致,如图2
3、进一步分析,根源在于 响应标头 中包含:X-Frame-Options: SAMEORIGIN,如图3
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options
表示该页面可以在相同域名页面的 frame 中展示(即仅能够在tv域名下展示)。
4、在本地新建1个虚拟主机,tv.eastobacco.dev,且新建对应的页面 header.html,如图4
5、设置 tv.eastobacco.dev 的响应头:X-Frame-Options: SAMEORIGIN,如图5
6、在本地新建1个虚拟主机,mytv.eastobacco.dev,且新建对应的页面 index.html,如图6
7、在本地复现:此内容不能显示在一个框架中,如图7
8、tv.eastobacco.dev,新建对应的页面 index.html,包含本域名的 header.html, 如图8
9、此内容不能显示在一个框架中的提示已经不存在,如图9
10、因此,可以确定,响应头:X-Frame-Options: SAMEORIGIN,主要的作用是让header.html仅能够在tv域名下展示,但是现在的需求却是需要在所有二级域名下均能够展示,设置响应头:X-Frame-Options: frame-ancestors http://mytv.eastobacco.dev ,如图10
# add_header X-Frame-Options SAMEORIGIN;
add_header X-Frame-Options “Allow-From http://mytv.eastobacco.dev”;
add_header X-Frame-Options “Allow-From http://tv.eastobacco.dev”;
11、重复第7步骤,发现header.html可以在mytv域名下展示,如图11
12、重复第9步骤,发现header.html在tv域名下无法展示,不符合预期,如图12
13、重新设置响应头:X-Frame-Options: frame-ancestors http://*.eastobacco.dev ,如图13
add_header X-Frame-Options “Allow-From http://*.eastobacco.dev”;
14、重复第7步骤,发现header.html在mytv域名下无法展示,如图14
15、重新设置响应头:X-Frame-Options: frame-ancestors http://mytv.eastobacco.dev, http://tv.eastobacco.dev ,如图15
add_header X-Frame-Options “Allow-From http://mytv.eastobacco.dev, http://tv.eastobacco.dev”;
16、重复第7步骤,发现header.html在mytv域名下无法展示,如图16
17、重新设置响应头:X-Frame-Options: frame-ancestors http://mytv.eastobacco.dev; http://tv.eastobacco.dev ,如图17
add_header X-Frame-Options “Allow-From http://mytv.eastobacco.dev; http://tv.eastobacco.dev”;
18、重复第7步骤,发现header.html在mytv域名下无法展示,如图18
19、参考网址:https://blogs.msdn.microsoft.com/ieinternals/2010/03/30/combating-clickjacking-with-x-frame-options/ ,Allow-From 不支持通配符或多个来源的列表,如图19
20、参考网址:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy__by_cnvoid ,重新设置响应头:Content-Security-Policy: frame-ancestors http://*.eastobacco.dev ,如图20
add_header Content-Security-Policy “frame-ancestors http://*.eastobacco.dev”;
21、重复第7步骤,发现header.html可以在mytv域名下展示,符合预期,如图21
22、重复第9步骤,发现header.html可以在tv域名下展示,符合预期,如图22
23、在另一个顶级域名中包含tv下的header.html,仍然可以成功包含,不符合预期,由于兼容模式不支持 Content-Security-Policy ,决定放弃兼容模式下的展示限制,允许所有域名包含tv下的header.html,如图23
24、开启极速模式,重复第7步骤,发现header.html可以在mytv域名下展示,符合预期,如图24
25、开启极速模式,重复第9步骤,发现header.html可以在tv域名下展示,符合预期,如图25
26、在另一个顶级域名中包含tv下的header.html,发现header.html无法展示,符合预期,如图26
27、重复第1步骤,正常显示,符合预期,如图27
28、兼容模式实则是IE浏览器,极速模式实则是Chrome浏览器,响应头仅设置Content-Security-Policy,则在IE浏览器下放弃了安全性设置,以保证在所有浏览器下,http://*.eastobacco.dev 皆可以包含tv下的header.html,其他顶级域名则不可包含。
原创文章,作者:3628473679,如若转载,请注明出处:https://blog.ytso.com/180748.html