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

最新推荐文章于 2022-05-11 12:10:59 发布

梦羽灵泉

最新推荐文章于 2022-05-11 12:10:59 发布

阅读量1.7k

点赞数

文章标签： html不是顶级域名

本文通过调整X-Frame-Options及Content-Security-Policy响应头，解决了特定域名下的页面只能在同域名框架中显示的问题，并确保了不同浏览器间的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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