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，其他顶级域名则不可包含。