屌炸天的Content Security Policy,解决运营商页面注入!

其实不管在移动端还是PC端,都会有运营商劫持页面并且向页面里注入广告,尤其在移动端,网络不稳定的情况下,对用户体验的损伤是很致命的,可能需要等待很久页面都打不开。

屌炸天的Content Security Policy,解决运营商页面注入!

那么如何解决这个问题呢?投诉运营商,太天真了,人家根本不鸟我们。所以还是自己动手风衣足食,先说下市面上常见的两个方案:

一、https大法好
如果你的页面都是https,那么恭喜你,不会有注入的情况发生,因为运营商就算拿到服务器返回的数据流,是加密的,无从注入。
二、欺骗运营商法
这招相当于是说运营商会在body开始或者结束的时候注入script标签或者iframe,那么注释之后就导致注入的代码失效,但运营商也是很精明的,注入的手法不尽相同,根本防不全。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset='utf-8' /> <title>添加</title> <link type="text/css" rel="stylesheet" href="/css/front-v1.css" /> </head> <!--<body>--> <body> <div id="content"> xxx </div> <script type="text/javascript" src="/admin/keyword.js"></script> </body> <!--</body>--> </html> <!--</html>-->

方案一虽然说效果好,但是不是任何一个网站都有条件搭建https的,方案二较为脆弱。

接下来就该神器出场了,有请我们的:Content Security Policy,简言之就是Content-Security-Policy可以允许我们设定,我们的界面只允许请求哪些域名下的资源,甚至可以细化到css请求、script请求等。 这样以来浏览器根本就不会加载不被允许的资源,运营商的注入也就无从谈起。

但如果有的运营商变态到直接注入源代码到页面,而没有通过请求,那这个确实很难防范了。还好目前发现的都是通过注入script或iframe的,所以此方案可行,尤其在移动端,因为移动端浏览器较为现代化嘛,一般都支持这个特性。

如何使用?
<meta http-equiv="Content-Security-Policy" content="default-src *.xiaomeiti.com; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"> self是指当前域名下,从上面的介绍可以看到,CSP协议可以控制的内容非常多。而且如果不特别指定'unsafe-inline'时,页面上所有inline的样式和脚本都不会执行;不特别指定'unsafe-eval',页面上不允许使用new Function,setTimeout,eval等方式执行动态代码。在限制了页面资源来源之后,被XSS的风险确实小不少。

当然Content Security Policy也可以设置到Response Headers里面,不过这个影响面较大,不便于做页面个性化配置,还是建议用meta方式定义到具体页面即可。

参考资源:
http://www.w3.org/TR/CSP/
https://developer.chrome.com/extensions/contentSecurityPolicy
https://imququ.com/post/content-security-policy-reference.html

相关阅读