前端内容安全策略（csp）
什么是CSP
CSP全称Content Security Policy ,可以直接翻译为内容安全策略,说白了,就是为了页面内容安全而制定的一系列防护策略. 通过CSP所约束的的规责指定可信的内容来源（这里的内容可以指脚本、图片、iframe、fton、style等等可能的远程的资源）。
csp是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等。无论是数据盗取、网站内容污染还是散发恶意软件，这些攻击都是主要的手段
通过CSP协定，让WEB处于一个安全的运行环境中。
有什么用?
我们知道前端有个很著名的”同源策略”,简而言之,就是说一个页面的资源只能从与之同源的服务器获取,而不允许跨域获取.这样可以避免页面被注入恶意代码,影响安全.但是这个策略是个双刃剑,挡住恶意代码的同时也限制了前端的灵活性,那有没有一种方法既可以让我们可以跨域获取资源,又能防止恶意代码呢?
答案是当然有了,这就是csp,通过csp我们可以制定一系列的策略,从而只允许我们页面向我们允许的域名发起跨域请求,而不符合我们策略的恶意攻击则被挡在门外.从而实现
需要说明的一点是,目前主流的浏览器都已支持csp.所以我们可以放心大胆的用了.
指令
指令就是csp中用来定义策略的基本单位,我们可以使用单个或者多个指令来组合作用,功能防护我们的网站.
以下是常用的指令说明:
指令值
所有以-src结尾的指令都可以用一下的值来定义过滤规则,多个规则之间可以用空格来隔开
如何使用
1、HTTP Header
通过 HTTP Header来定义 ：
“Content-Security-Policy:” 策略集
2、 通过 html meta标签使用
<meta http-equiv="content-security-policy" content="策略集">
如果http header头设置了csp 浏览器会优先使用http header设置的csp策略
示例
多个资源时,后面的会覆盖前面的
每一条策略都是都是由指令和指令值组成
script-src ‘self’ www.google-analytics.com ajax.googleapis.com;
允许同源以及两个地址下的js加载
default-src ‘none’; script-src ‘self’; connect-src ‘self’; img-src ‘self’; style-src ‘self’;
Content-Security-Policy:default-src ‘self’;
策略与策略之间用分号隔开
Content-Security-Policy:default-src ‘self’;script-src ‘www.a.com’
csp 默认特性
csp 错误分析报告
可以用report-uri指令使浏览器发送HTTP POST请求把攻击报告以JSON格式传送到你指定的地址。接下来给大家介绍你的站点如何配置来接收攻击报告。
例如: Content-Security-Policy: default-src: self; report-url: https://www.dd.com;
如果只是想单纯的汇报错误报告 并不想设置csp策略 也可以使用 Content-Security-Policy-Report-Only头
违规报告语法
