CSP防运营商劫持

一、什么是CSP

CSP英文全称Content Security Policy,中文意思是 内容安全策略。CSP以白名单的机制对网站加载或执行的资源起作用,在网页中,这样的策略通过 HTTP 头信息或者 meta 元素定义。用于检测并削弱某些特定类型的攻击,包括跨站脚本 (XSS) 和数据注入攻击等。无论是数据盗取、网站内容污染还是散发恶意软件。

三、CSP的应用

2种方式

1. 前端配置 - Meta标签

在 HTML 的 Head 中添加 Meta 标签

<meta http-equiv="Content-Security-Policy" content="script-src 'nonce-shendun' zeptojs.com; object-src 'none';">
复制代码

(提示:这里推荐本地启动web服务,去访问这个页面),这里是最基本的配置,完整代码如下:

<!DOCTYPE html>
<html>
<head>
  <script>
    console.log('发生劫持,初始化就直接置顶的流氓行为,CSP也无法防御,但可以通过埋点记录LOG,通知工信部处理!!');
  </script>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Security-Policy" content="script-src 'nonce-shendun' zeptojs.com; object-src 'none';">
  <title>CSP测试</title>
  <script>
    console.log('来劫持你了.... 但被阻止了,未能发生有效劫持!');
  </script
  <!-- 安全标签 -->
  <script nonce=shendun>
    console.log('设置了nonce,其值与受信任来源列表中的值相匹配 ,此处有效!!');
  </script>
</head>
<body>
  <div>CSP测试</div>
  <!-- zeptojs.com 加入了白名单 -->
  <script src="http://zeptojs.com/zepto.min.js"></script>
  <!-- 未加入白名单,被拦截 -->
  <script src="https://mt.cnzz.com/js/hdpi_canvas.js"></script>
</body>
</html>
复制代码

这种方式除了 头部的注入型劫持未被拦截以外 ,其他 script 劫持均被拦截。需要特别注意的是这段代码中的 nonce-shendun ,这里可以理解为 script 的安全属性,nonce- 是CSP提供的参数,shendun 这个名字是自定义的(官方推荐这里填随机数)。

2. 后端配置

Nginx 为例,配置 Sever 文件,添加如下代码:

server {
    ...
    add_header Content-Security-Policy "default-src *; script-src 'self' 'nonce-shendun' baidu.com *.baidu.com;";
    ...
复制代码

源列表中也接受了四个关键字:

  • 'none' 你可能会期望,什么也没有。
  • 'self' 匹配当前来源,但不匹配其子域。
  • 'unsafe-inline' 允许内联JavaScript和CSS (很多劫持是script直接注入,所以这里不推荐这么配置
  • 'unsafe-eval' 允许文本到JavaScript的机制eval。

CSP的API和用法指南太多了,奉上传送门:developer.mozilla.org/zh-CN/docs/…

四、数据分析

不管是前端配置还是后端配置 CSP 都非常方便,但是也存在 Head 头部协议被篡改,导致 CSP 失效的现象,这个时候 “薅羊毛” 的就有可乘之机。

以下是一个线上活动(加了CSP)的真实数据:

日期PVUV劫持PV劫持UV劫持率(劫持uv/uv)
10/16485034106487913764106938.56%
10/155427131232021049944830839.2%

这些真实数据作者未做任何处理,不过这里劫持UV数据拉的不是很科学,没有过滤掉一个页面出现多次劫持的成分,但总体劫持率还是很高。

开始怀疑人生...

五、总结

CSP不是万能的,有兴趣的同学可以看下防运营商劫持一:

可两者结合使用,希望对你有所帮助~

转载于:https://juejin.im/post/5bdbe90c51882516de76a422

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值