CSP -- 运营商内容劫持（广告）的终结者

时间 2019-11-17

标签 csp 运营商内容劫持广告终结者繁體版

原文原文链接

原因

咱们公司最近手机端H5 常常受到商户和用户的投诉，说有广告而且致使不能正常进行操做，咱们商户本身固然不会加广告了，可是商户和用户可无论这些了，就认为是咱们的问题javascript

探索发现根本

目前咱们用的不少浏览器，都提供插件功能，在Chrome浏览器体系下有个广了结结者插件：能够用来屏蔽网页中的广告部分。受到这个插件的影响，我先探索下广告劫持是怎么作的？我就想到经过获取网页html代码过来分析，以下JS代码php

setTimeout(function(){
    $.ajax({
        url:"/error/ad_log",
        type:'post',
        data:{
            'content': $("html").html(),
            'url':window.location.href
        },
        success:function(){

        }
    });
},3000);

在后端我分析html内容发现以下截图几个内容，经过截图发现页面多了一些JS文件css

<script type="text/javascript" id="1qa2ws" charset="utf-8" src="http://wap.zjtoolbarc60.10086.cn:8080/www/default/base.js"></script>

内容劫持原理

经过上图咱们就分析出了，通常劫持是经过在页面加入引入一个JS文件，而后这个JS文件会执行各类逻辑，根据新引入的JS域名搜索，你就会发现不少东西了，
html

解决方案

知道了病状不表明就必定能够解决，例如咱们公司的就很奇葩，由于广告的插入致使JS所有出错用户没法进行操做（太可*，插入广告就算了，还致使别人没法正常运营）。经过搜索我发现了能够经过CSP解决这个问题java

CSP

定义

CSP 全称为 Content Security Policy，即内容安全策略。主要以白名单的形式配置可信任的内容来源，在网页中，可以使白名单中的内容正常执行（包含 JS，CSS，Image 等等），而非白名单的内容没法正常执行，从而减小跨站脚本攻击（XSS），固然，也可以减小运营商劫持的内容注入攻击。git

使用方式一：Meta标签

在 HTML 的 Head 中添加以下 Meta 标签，将在符合 CSP 标准的浏览器中使非同源的 script 不被加载执行。不支持 CSP 的浏览器将自动会忽略 CSP 的信息，不会有什么影响。具体兼容性可在本文末尾参考资料中找到github

<meta http-equiv="Content-Security-Policy" content="script-src 'self'">

使用方式二：Http 头部

Content-Security-Policy:
script-src 'unsafe-inline' 'unsafe-eval' 'self'  *.54php.cn *.yunetidc.com *.baidu.com *.cnzz.com  *.duoshuo.com *.jiathis.com;report-uri /error/csp

高级知识：指令集合

指令	取值示例	说明
default-src	'self' cdn.example.com	定义针对全部类型（js/image/css/web font/ajax/iframe/多媒体等）资源的默认加载策略，某类型资源若是没有单独定义策略，就使用默认。
script-src	'self' js.example.comweb .54php.cn ajax ://.54php.cn后端 https://.54php.cn	定义针对JavaScript的加载策略
object-src	'self'	针对,, 等标签的加载策略
style-src	'self' css.example.com	定义针对样式的加载策略
img-src	'self' image.example.com	定义针对图片的加载策略
media-src	'media.example.com'	针对或者引入的html多媒体等标签的加载策略
frame-src	'self'	针对iframe的加载策略
connect-src	'self'	针对Ajax、WebSocket等请求的加载策略。不容许的状况下，浏览器会模拟一个状态为400的响应
font-src	font.qq.com	针对Web Font的加载策略
sandbox	allow-forms allow-scripts	对请求的资源启用sandbox
report-uri	/some-report-uri	告诉浏览器若是请求的资源不被策略容许时，往哪一个地址提交日志信息。不阻止任何内容，能够改用Content-Security-Policy-Report-Only头
base-uri	'self'	限制当前页面的url（CSP2）
child-src	'self'	限制子窗口的源(iframe、弹窗等),取代frame-src（CSP2）
form-action	'self'	限制表单可以提交到的源（CSP2）
frame-ancestors	'none'	限制了当前页面能够被哪些页面以iframe,frame,object等方式加载（CSP2）
plugin-types	application/pdf	限制插件的类型（CSP2）

实践总结

注意点

因为采用白名单方式，因此这个名单要更具业务可能会有变化，因此的谨慎使用，若是配置不当致使页面没法加载就麻烦啦

CSP拦截数据结果

数据以下：广告蛋糕太大了，好多人都想分点

164	119.4.249.166:8080
225	www.tjqonline.cn
250	221.179.140.145:9090
364	220.196.52.141:30000
544	101.251.211.235
545	jdwx01.b0.upaiyun.com
1587	wap.zjtoolbarc60.10086.cn:8080

参考资料

原文地址： CSP -- 运营商内容劫持（广告）的终结者
标签： csp css 运营商广告小米路由器移动广告广告联盟