设置HTTP头X-Frame-Options防止网页被iframe框架调用

2018-08-14 约 1070 字预计阅读 3 分钟次阅读

最近使用360的网站检测了一下博客，提示了一个漏洞 [轻微]X-Frame-Options头未设置

于是查了一下资料，修复了这个漏洞，记录一下。

html里面有一个iframe标签，可以把别的站引入到当前的页面中来，但如果我们不想别人引入我们的站,我们就可以设置这个X-Frame-Options头来限制。

1
2
3
4
5
6
7
8


X-Frame-Options 有三个值:

DENY
表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许。
SAMEORIGIN
表示该页面可以在相同域名页面的 frame 中展示。
ALLOW-FROM uri
表示该页面可以在指定来源的 frame 中展示。

博客使用的是apache+linux环境，在apache文件中httpd.conf中加入,在最后加就行了

1
2
3


<IfModule headers_module>
Header always append X-Frame-Options SAMEORIGIN
</IfModule>

我这里选择的参数是 SAMEORIGIN ，是希望以后万一自己站要引用自己站的页面，还是可以的。

推荐在外面加上这个判断，因为这个Header头的设置是需要这个模块支持的。建议使用命令查看下是否有加入这个模块。

切换到apache目录的bin目录下，使用命令：

1

./apachectl -M

-M是查看静态模块+动态模块,也就是apache加载的所有模块,如果你看到有这个

headers_module (shared)

那就表示是有的.

重启apache

使用curl命令来测试一下

1

curl -I www.buyucoder.com  #后面网址自行替换

如果看到返回信息中有X-Frame-Options: SAMEORIGIN那就是设置好了.

再来写一个测试页面测试一次,在自己电脑上新建一个html文件,里面内容写上:

1

<iframe src="http://www.buyucoder.com" frameborder="0"></iframe>

网址就自己换咯,用浏览器打开如果是空白就对了.

打开firebug,会看到这些信息

Refused to display ‘http://www.buyucoder.com/' in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

就表示正常工作啦。

当然你也可以拿github试试:

1

<iframe src="https://github.com/" frameborder="0"></iframe>

控制台里面返回:

Refused to display ‘https://github.com/' in a frame because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘none’”.

用firebug看下请求的头,里面有:X-Frame-Options:deny

除了这个还有一个:Content-Security-Policy (简称CSP)

1

Content-Security-Policy:default-src 'none'; base-uri 'self'; block-all-mixed-content; child-src render.githubusercontent.com; connect-src 'self' uploads.github.com status.github.com collector.githubapp.com api.github.com www.google-analytics.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com wss://live.github.com; font-src assets-cdn.github.com; form-action 'self' github.com gist.github.com; frame-ancestors 'none'; img-src 'self' data: assets-cdn.github.com identicons.github.com collector.githubapp.com github-cloud.s3.amazonaws.com *.githubusercontent.com; media-src 'none'; script-src assets-cdn.github.com; style-src 'unsafe-inline' assets-cdn.github.com

这个就不多说了,感兴趣的可以自己多了解哦.文章最后有相关文章

上面这种设置其实就是apache中header头的设置方法,我们可以通过这个来控制其他的http头,在apache手册里面可以找到更多的资料，自行参阅。

由于手上暂时没有ngnix和IIS,所以这一部分就没有测试了。不过你可以在下面的链接中找到答案。

关于X-Frame-Options的一些介绍：

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options

关于apache的mod_headers模块说明中文版:

http://works.jinbuguo.com/apache/menu22/mod/mod_headers.html

关于apache的mod_headers模块说明英文版:

https://httpd.apache.org/docs/current/mod/mod_headers.html

关于CSP的一些介绍:

https://developer.mozilla.org/zh-CN/docs/Web/Security/CSP/CSP_policy_directives