W3C的内容安全策略，简称CSP，顾名思义，这个规范与内容安全有关，主要是用来定义页面可以加载哪些资源，减少XSS的发生。其核心思想十分简单：网站通过发送一个 CSP 头部，来告诉浏览器什么是被授权执行的与什么是需要被禁止的。其被誉为专门为解决XSS攻击而生的神器。

• CSP官方文档：https://www.w3.org/TR/CSP/
• Chrome扩展已经引入了CSP，通过manifest.json中的content_security_policy字段来定义。一些现代浏览器也支持通过响应头来定义CSP。
• Chrome扩展中CSP的使用可以参考Chrome官方文档：https://developer.chrome.com/extensions/contentSecurityPolicy.html

1、问题的产生

项目上有个图片上传功能，使用了 vue-cropper 组件的裁剪和预览功能，该功能在开发及测试环境（用ip访问）都没有问题，但是在生产环境访问的时候，无法正常上传图片，浏览器控制台报错提示 Refused to load the image 'blob:<URL>'..., 具体报错内容及图片如下：

报错内容：

Refused to load the image 'blob:<URL>' because it violates the following Content Security Policy directive: "img-src * data:". Note that '*' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches `self`'s scheme. blob:' must be added explicitely.

简单翻译下就是：拒绝加载图像 'blob:<URL>'，因为它违反了以下内容安全策略指令："img-src * data:". 请注意， '*' 只匹配具有网络方案（“http”、“https”、“ws”、“wss”）的URL，或其方案匹配“self”方案的URL。blob:必须明确添加。

报错图片：

这个问题主要是由于浏览器为了防止跨域脚本攻击，而推出的"网页安全政策"（Content Security Policy，缩写 CSP），本例中因为在生产环境的nginx服务器开启了CSP功能，阻止了blob类型的数据加载。

本例解决办法是在nginx配置中，设置CSP允许blob资源的访问：

add_header Content-Security-Policy "default-src *;img-src 'self' blob: data: ; font-src 'self' data: ; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'";

如果你已经把资源文件放入到服务器上，配置好了nginx，能正常运行，这时你想对浏览器做一个限制，想弄的安全一点，不想让外人对你的网站注入病毒脚本，这时你可以在nginx配置上添加 add_header Content-Security-Policy ，把你需要访问的url写进去 ，这样就算完成CSP配置了。

接下来我们详细了解下CSP，以及不正确的配置可能导致的问题及解决方案。

2、内容安全策略（CSP）

2.1 CSP简介

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

• CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。

• CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。

2.2 CSP作用

1. 限制资源获取
2. 报告资源获取越权

2.3 限制方式

1. default-src限制全局

2. 制定限制类型

   • 资源类型有：connect-src、mainfest-src、img-src、font-src、media-src、style-src、frame-src、script-src…

2.4 应对威胁

2.4.1 跨站脚本攻击

CSP 的主要目标是减少和报告 XSS 攻击 ，XSS 攻击利用了浏览器对于从服务器所获取的内容的信任。恶意脚本在受害者的浏览器中得以运行，因为浏览器信任其内容来源，即使有的时候这些脚本并非来自于它本该来的地方。

CSP通过指定有效域——即浏览器认可的可执行脚本的有效来源——使服务器管理者有能力减少或消除XSS攻击所依赖的载体。一个CSP兼容的浏览器将会仅执行从白名单域获取到的脚本文件，忽略所有的其他脚本 (包括内联脚本和HTML的事件处理属性)。

作为一种终极防护形式，始终不允许执行脚本的站点可以选择全面禁止脚本执行。

2.4.2 数据包嗅探攻击

除限制可以加载内容的域，服务器还可指明哪种协议允许使用；比如 (从理想化的安全角度来说)，服务器可指定所有内容必须通过HTTPS加载。一个完整的数据安全传输策略不仅强制使用HTTPS进行数据传输，也为所有的cookie标记安全标识 cookies with the secure flag，并且提供自动的重定向使得HTTP页面导向HTTPS版本。网站也可以使用 Strict-Transport-Security HTTP头部确保连接它的浏览器只使用加密通道。

3、CSP指令说明

指令是csp中用来定义策略的基本单位，要使用CSP，只需要服务端输出类似这样的响应头就行了：

Content-Security-Policy: default-src 'self'

default-src是CSP指令，多个指令之间用英文分号分割；'self’是指令值，多个指令值用英文空格分割。以下是常用的CSP指令说明：

指令	指令值示例	说明
default-src	‘self’ cnd.a.com	定义针对所有类型（js、image、css、web font，ajax请求，iframe，多媒体等）资源的默认加载策略，某类型资源如果没有单独定义策略，就使用默认的。
script-src	‘self’ js.a.com	定义针对JavaScript的加载策略。
style-src	‘self’ css.a.com	定义针对样式的加载策略。
img-src	‘self’ img.a.com	定义针对图片的加载策略。
connect-src	‘self’	针对Ajax、WebSocket等请求的加载策略。不允许的情况下，浏览器会模拟一个状态为400的响应。
font-src	font.a.com	针对Web Font的加载策略。
object-src	‘self’	针对<object>、<embed>或<applet>等标签引入的flash等插件的加载策略。
media-src	media.a.com	针对<audio>或<video>等标签引入的html多媒体的加载策略。
frame-src	‘self’	针对frame的加载策略。
sandbox	allow-forms	对请求的资源启用sandbox（类似于iframe的sandbox属性）。
report-uri	/report-uri	告诉浏览器如果请求的资源不被策略允许时，往哪个地址提交日志信息。 特别的：如果想让浏览器只汇报日志，不阻止任何内容，可以改用Content-Security-Policy-Report-Only头。

指令值可以由下面这些内容组成：

指令值	指令值示例	说明
*	img-src	允许任何内容。
‘none’	img-src ‘none’	不允许任何内容。
‘self’	img-src ‘self’	允许来自相同来源的内容（相同的协议、域名和端口）。
data	img-src data	允许data:协议（如base64编码的图片）。
www.a.com	img-src img.a.com	允许加载指定域名的资源。
*.a.com	img-src *.a.com	允许加载a.com任何子域的资源。
https://img.com	img-src https://img.com	允许加载img.com的https资源（协议需匹配）。
https:	img-src https:	允许加载https资源。
‘unsafe-inline’	script-src ‘unsafe-inline’	允许加载inline资源（例如常见的style属性，onclick，inline js和inline css等等）。
‘unsafe-eval’	script-src ‘unsafe-eval’	允许加载动态js代码，例如eval()。

从上面的介绍可以看到，CSP协议可以控制的内容非常多。而且如果不特别指定’unsafe-inline’时，页面上所有inline的样式和脚本都不会执行；不特别指定’unsafe-eval’，页面上不允许使用new Function，setTimeout，eval等方式执行动态代码。在限制了页面资源来源之后，被XSS的风险确实小不少。

当然，仅仅依靠CSP来防范XSS是远远不够的，不支持全部浏览器是它的硬伤。不过，鉴于低廉的开发成本，加上也没什么坏处。如果担心影响面太大，也可以像下面这样，仅收集不匹配规则的日志，先观察下：

Content-Security-Policy-Report-Only: script-src 'self'; report-uri http://test/

这样，如果页面上有inline的JS，依然会执行，只是浏览器会向指定地址发送一个post请求，包含这样的信息：

{"csp-report":{"document-uri":"http://test/test.php","referrer":"","violated-directive":"script-src 'self'","original-policy":"script-src 'self'; report-uri http://test/","blocked-uri":""}}

4、CSP的使用

4.1 在HTTP Header上使用

"Content-Security-Policy:" 策略
"Content-Security-Policy-Report-Only:" 策略

// 示例
Content-Security-Policy: script-src 'self'; object-src 'none';
style-src cdn.example.org third-party.org; child-src https:

4.2 在HTML上使用

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

// 多个示例
<meta http-equiv="Content-Security-Policy" content="default-src *;img-src 'self' data: base64; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>

<meta charset="utf-8" http-equiv="content-security-policy" content="script-src 'self';object-src 'none';style-src 'self';">

<meta charset="utf-8" http-equiv="content-security-policy" content="script-src 'self' 'unsafe-eval' chrome-extension-resource; object-src 'none'; style-src 'self' 'unsafe-inline'; ">

<meta http-equiv="Content-Security-Policy" 
    content="
      worker-src blob:; 
      child-src blob: gap:;
      img-src 'self' blob: data:;
      default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">

Meta 标签与 HTTP 头只是行式不同而作用是一致的，如果 HTTP 头与 Meta 定义同时存在，则优先采用 HTTP 中的定义。

• 如果用户浏览器已经为当前文档执行了一个 CSP 的策略，则会跳过 Meta 的定义。如果 META 标签缺少 content 属性也同样会跳过。

4.3 Vue页面上使用

vue缺失Content-Security-Policy响应头，可以通过以下方式添加

1. 安装组件 npm install vue-meta --save
2. main.js中引入组件

import Meta from 'vue-meta'
Vue.use(Meta)

3. 具体的页面中设置metaInfo信息

metaInfo: {
  title: 'This is the test',
  meta: [
    // { charset: 'utf-8' },
    // { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' },
    // { name:'referrer' , content:'never' }
    { http-equiv:'Content-Security-Policy', content: 'script-src 'self';object-src 'none';style-src 'self';' }
  ]
},

4.4 Vue的axios header中使用

config.headers["Content-Security-Policy"] = "worker-src blob:; child-src blob: gap:; img-src 'self' blob: data:; default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:";

4.5 nginx中使用

在nginx配置中添加 add_header Content-Security-Policy 策略 配置，示例如下：

add_header Content-Security-Policy "default-src *;img-src 'self' blob: data: ; font-src 'self' data: ; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'";

5、CSP使用实例：

1.一个网站管理者想要所有内容均来自站点的同一个源 (不包括其子域名)

Content-Security-Policy: default-src 'self'

2.一个网站管理者允许内容来自信任的域名及其子域名 (域名不必须与CSP设置所在的域名相同)

Content-Security-Policy: default-src 'self' *.trusted.com

3.一个网站管理者允许网页应用的用户在他们自己的内容中包含来自任何源的图片, 但是限制音频或视频需从信任的资源提供者(获得)，所有脚本必须从特定主机服务器获取可信的代码.

Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com

在这里，各种内容默认仅允许从文档所在的源获取, 但存在如下例外:

• 图片可以从任何地方加载(注意 “*” 通配符)。
• 多媒体文件仅允许从 media1.com 和 media2.com 加载(不允许从这些站点的子域名)。
• 可运行脚本仅允许来自于 userscripts.example.com。

4.一个线上银行网站的管理者想要确保网站的所有内容都要通过SSL方式获取，以避免攻击者窃听用户发出的请求。

Content-Security-Policy: default-src https://onlinebanking.jumbobank.com

该服务器仅允许通过HTTPS方式并仅从onlinebanking.jumbobank.com域名来访问文档。

5.一个在线邮箱的管理者想要允许在邮件里包含HTML，同样图片允许从任何地方加载，但不允许JavaScript或者其他潜在的危险内容(从任意位置加载)。

Content-Security-Policy: default-src 'self' *.mailsite.com; img-src *

注意这个示例并未指定script-src。在此CSP示例中，站点通过 default-src 指令的对其进行配置，这也同样意味着脚本文件仅允许从原始服务器获取。

6.CSP的报告(report-only)模式

为降低部署成本，CSP可以部署为报告(report-only)模式。在此模式下，CSP策略不是强制性的，但是任何违规行为将会报告给一个指定的URI地址。此外，一个报告模式的头部可以用来测试一个修订后的未来将应用的策略而不用实际部署它。

你可以用Content-Security-Policy-Report-Only HTTP 头部来指定你的策略，像这样：

Content-Security-Policy-Report-Only: policy

如果Content-Security-Policy-Report-Only 头部和 Content-Security-Policy 同时出现在一个响应中，两个策略均有效。在Content-Security-Policy 头部中指定的策略有强制性 ，而Content-Security-Policy-Report-Only中的策略仅产生报告而不具有强制性。

支持CSP的浏览器将始终对于每个企图违反你所建立的策略都发送违规报告，如果策略里包含一个有效的report-uri 指令。

默认情况下，违规报告并不会发送。为启用发送违规报告，你需要指定 report-uri 策略指令，并提供至少一个URI地址去递交报告：

Content-Security-Policy: default-src 'self'; report-uri http://reportcollector.example.com/collector.cgi

然后你需要设置你的服务器能够接收报告，使其能够以你认为恰当的方式存储并处理这些报告。