前端安全之csp

最近前端项目被白帽子使用appscan扫到安全漏洞,老大勒令我们抓紧修复,我们先来看两个级别比较低的漏洞

看到这儿对于我个渣渣前端来说是懵逼的,难道我设置一下http header 就ok了

• 简单来介绍下什么叫做csp

内容安全策略   (CSP) 是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等。无论是数据盗取、网站内容污染还是散发恶意软件，这些攻击都是主要的手段。

CSP 被设计成完全向后兼容（除CSP2 在向后兼容有明确提及的不一致;  更多细节查看这里 章节1.1）。不支持CSP的浏览器也能与实现了CSP的服务器正常合作，反之亦然：不支持 CSP 的浏览器只会忽略它，如常运行，默认为网页内容使用标准的同源策略。如果网站不提供 CSP 头部，浏览器也使用标准的同源策略。

为使CSP可用, 你需要配置你的网络服务器返回  Content-Security-Policy  HTTP头部 ( 有时你会看到一些关于X-Content-Security-Policy头部的提法, 那是旧版本，你无须再如此指定它)。---引用MDN

浏览有同源策略的安全机制,会完全信任同源策略下的js文件 但是这个js文件有可能是黑客通过某种手段提交到服务器的.用户浏览器在不知不觉的情况下就将自己的隐私发送到了黑客的服务器上

• 如何使用csp策略

    csp有两种方式指定: HTTP Header 和 HTML

       通过 HTTP Header来定义

   "Content-Security-Policy:" 策略集

       通过 html meta标签使用:

  <meta http-equiv="content-security-policy" content="策略集">

  如果http header头设置了csp 浏览器会优先使用http header设置的csp策略

• csp语法

每一条策略都是都是由指令和指令值组成

 例如: Content-Security-Policy:default-src 'self';

 策略与策略之间用分号隔开

例如: Content-Security-Policy:default-src 'self';script-src 'www.a.com'

csp 指令

csp 指令值

• csp 默认特性

CSP除了使用白名单机制外，默认配置下阻止内联代码执行是防止内容注入的最大安全保障.这里的内联代码包括：<script>块内容，内联事件，内联样式。

对于<script>代码块的内容是完全不能执行.例如:<script>alert()</script>

内联事件也是不能执行的  例如:<a href="" οnclick="click()"></a>

禁用eval方法

• csp 错误分析报告

可以用report-uri指令使浏览器发送HTTP POST请求把攻击报告以JSON格式传送到你指定的地址。接下来给大家介绍你的站点如何配置来接收攻击报告。

例如: Content-Security-Policy: default-src: self; report-url: https://www.dd.com;

如果只是想单纯的汇报错误报告 并不想设置csp策略 也可以使用 Content-Security-Policy-Report-Only头

违规报告语法

参考文献:

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP#%E4%BD%BF%E7%94%A8_CSP