HTML iframe 标签支持某一顶级域名下的所有泛域名,限制其他顶级域名的展示实现

1、在 360 浏览器 兼容模式下,出现 此内容不能显示在一个框架中 的提示,如图1

此内容不能显示在一个框架中

为了帮助保护在此网站中输入的信息的安全,此内容的发布者不允许在框架中显示该信息。

图1

2、查看网页源代码,确定是由于 iframe 且是因为网址不一致导致,如图2

图2

3、进一步分析,根源在于 响应标头 中包含:X-Frame-Options: SAMEORIGIN,如图3

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options
表示该页面可以在相同域名页面的 frame 中展示(即仅能够在tv域名下展示)。

图3

4、在本地新建1个虚拟主机,tv.eastobacco.dev,且新建对应的页面 header.html,如图4

图4

5、设置 tv.eastobacco.dev 的响应头:X-Frame-Options: SAMEORIGIN,如图5

图5

6、在本地新建1个虚拟主机,mytv.eastobacco.dev,且新建对应的页面 index.html,如图6

图6

7、在本地复现:此内容不能显示在一个框架中,如图7

图7

8、tv.eastobacco.dev,新建对应的页面 index.html,包含本域名的 header.html, 如图8

图8

9、此内容不能显示在一个框架中的提示已经不存在,如图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”;

图10

11、重复第7步骤,发现header.html可以在mytv域名下展示,如图11

图11

12、重复第9步骤,发现header.html在tv域名下无法展示,不符合预期,如图12

图12

13、重新设置响应头:X-Frame-Options: frame-ancestors http://*.eastobacco.dev ,如图13
add_header X-Frame-Options “Allow-From http://*.eastobacco.dev”;

图13

14、重复第7步骤,发现header.html在mytv域名下无法展示,如图14

图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”;

图15

16、重复第7步骤,发现header.html在mytv域名下无法展示,如图16

图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”;

图17

18、重复第7步骤,发现header.html在mytv域名下无法展示,如图18

图18

19、参考网址:https://blogs.msdn.microsoft.com/ieinternals/2010/03/30/combating-clickjacking-with-x-frame-options/ ,Allow-From 不支持通配符或多个来源的列表,如图19

图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”;

图20

21、重复第7步骤,发现header.html可以在mytv域名下展示,符合预期,如图21

图21

22、重复第9步骤,发现header.html可以在tv域名下展示,符合预期,如图22

图22

23、在另一个顶级域名中包含tv下的header.html,仍然可以成功包含,不符合预期,由于兼容模式不支持 Content-Security-Policy ,决定放弃兼容模式下的展示限制,允许所有域名包含tv下的header.html,如图23

图23

24、开启极速模式,重复第7步骤,发现header.html可以在mytv域名下展示,符合预期,如图24

图24

25、开启极速模式,重复第9步骤,发现header.html可以在tv域名下展示,符合预期,如图25

图25

26、在另一个顶级域名中包含tv下的header.html,发现header.html无法展示,符合预期,如图26

图26

27、重复第1步骤,正常显示,符合预期,如图27

图27

28、兼容模式实则是IE浏览器,极速模式实则是Chrome浏览器,响应头仅设置Content-Security-Policy,则在IE浏览器下放弃了安全性设置,以保证在所有浏览器下,http://*.eastobacco.dev 皆可以包含tv下的header.html,其他顶级域名则不可包含。

永夜