Content Security Policy 参数 值 详解

例子：

?

1	Content-Security-Policy: default-src 'self'; script-src 'self' https://example.com; img-src 'self' data:; style-src 'self' 'unsafe-inline'; font-src 'self' https://example.com;

　　

这个 CSP 规则禁止所有来自第三方网站的资源，只允许本网站的资源加载。其中 script-src 只允许本网站和 example.com 的脚本加载，img-src 只允许本网站和 data: URI 的图片加载，style-src 只允许本网站和内联样式加载，font-src 只允许本网站和 example.com 的字体加载。请根据实际情况进行调整。

 

 

什么是Content Secruity Policy(CSP)

CSP全称Content Security Policy ,可以直接翻译为内容安全策略,说白了,就是为了页面内容安全而制定的一系列防护策略. 通过CSP所约束的的规责指定可信的内容来源（这里的内容可以指脚本、图片、iframe、fton、style等等可能的远程的资源）。通过CSP协定，让WEB处于一个安全的运行环境中。

CSP是2008年由 Mozilla 的 Sterne 提出的浏览器安全框架

被设计为一个完整的框架来防御 XSS 和 CSRF 攻击

通常也可以用来控制 app 和扩展的权限

CSP 允许开发者覆写(SOP)每个 document 的权限
CSP有什么用?

我们知道前端有个很著名的”同源策略”,简而言之,就是说一个页面的资源只能从与之同源的服务器获取,而不允许跨域获取.这样可以避免页面被注入恶意代码,影响安全.但是这个策略是个双刃剑,挡住恶意代码的同时也限制了前端的灵活性,那有没有一种方法既可以让我们可以跨域获取资源,又能防止恶意代码呢?

答案是当然有了,这就是csp,通过csp我们可以制定一系列的策略,从而只允许我们页面向我们允许的域名发起跨域请求,而不符合我们策略的恶意攻击则被挡在门外.从而实现

需要说明的一点是,目前主流的浏览器都已支持csp.所以我们可以放心大胆的用了.

 什么是同源策略？

URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们是同源的。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。限制来自不同源的”document”，对当前”document”读取或设置某些属性。

在浏览器中，<script>、<img>、<link>、<frame>等标签都可加载跨域资源，而不受同源策略限制，这带”src”属性的标签加载时，实际上是由浏览器发起一次GET请求，不同于XMLHttpRequest，他们通过src属性加载的资源。但浏览器限制了JavaScript的权限，使其不能读、写其中返回的内容。跨域请求的安全基础是JavaScript无法修改请求对象的http头部。如果XMLHttpRequest能够跨域请求资源，可能导致敏感信息泄露，比如CSRF的token信息。

为什么使用同源策略？

一个重要原因就是对cookie的保护，cookie 中存着sessionID。如果已经登录网站，同时又去了任意其他网站，该网站有恶意JS代码。如果没有同源策略，那么这个网站就能通过js 访问document.cookie 得到用户关于的各个网站的sessionID。其中可能有银行网站，通过已经建立好的session连接进行攻击，这里有一个专有名词，CSRF，还有需要注意的是同源策略无法完全防御CSRF，这里需要服务端配合。

 

 

 

csp指令说明

指令就是csp中用来定义策略的基本单位,我们可以使用单个或者多个指令来组合作用,功能防护我们的网站.

以下是常用的指令说明:

指令名	remark	demo	demo-remark
default-src	限制全局，默认所有都会使用这种规则	default-src 'self';	只允许本网站的资源加载
script-src	定义哪些资源可以加载JavaScript文件	script-src 'self' https://example.com;	只允许本网站和 example.com 的脚本加载
style-src	定义哪些资源可以加载CSS文件。	style-src 'self' 'unsafe-inline';	只允许本网站和内联样式加载
img-src	定义哪些资源可以加载图片
connect-src	定义哪些资源可以发起AJAX请求。 定义了请求、XMLHttpRequest、WebSocket  和 EventSource 的连接来源
font-src	定义哪些资源可以加载字体文件。
object-src	限制 <object> 或 <embed> 标签的源地址 定义哪些资源可以加载插件等
media-src	限制通过 <audio>、<video> 或 <track>  标签加载的媒体文件的源地址 定义哪些资源可以加载媒体文件
child-src	定义工作线程和插件的资源加载策略。 指定定义了 web workers 以及嵌套 的浏览上下文（如<frame>和<iframe>）的源。
frame-src	定义哪些资源可以被嵌入到iframe中
sandbox	为iframe等增加额外的安全限制。
manifest-src	限制应用声明文件的源地址。
prefetch-src	指定预加载或预渲染的允许源地址。
worker-src	限制 Worker、SharedWorker  或 ServiceWorker 脚本源
webrtc-src	指定WebRTC连接的合法源地址
form-action	<form action="https://baidu.com">

 

值：

 

注⚠️： 被 object-src 控制的元素可能碰巧被当作遗留 HTML 元素，导致不支持新标准中的功能（例如 <iframe> 中的安全属性 sandbox 和 allow）。因此建议限制该指令的使用（比如，如果可行，将 object-src 显式设置为 ‘none’）。
限制规则

self： 只允许同源下的资源。
unsafe-inline：允许使用内联资源，如内联的<script>元素、javascript: URL、内联的事件处理函数和内联的<style>元素。
unsafe-eval：允许使用 eval() 等通过字符串创建代码的方法。

 

注⚠️：设置多个限制条件，后面的会覆盖前面的！

一个CSP头由多组CSP策略组成，中间由分号分隔。其中每一组策略包含一个策略指令和一个内容源列表。例如：

?

1	Content-Security-Policy: default-src 'self' www.baidu.com; script-src 'unsafe-inline'

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189

以下是常用的指令说明:   指令名         demo         说明   default-src         'self' cdn.example.com         默认策略,可以应用于js文件/图片/css/ajax请求等所有访问   script-src         'self' js.example.com         定义js文件的过滤策略   style-src         'self' css.example.com         定义css文件的过滤策略   img-src         'self' img.example.com         定义图片文件的过滤策略   connect-src         'self'         定义请求连接文件的过滤策略   font-src         font.example.com         定义字体文件的过滤策略   object-src         'self'         定义页面插件的过滤策略,如   media-src         media.example.com         定义媒体的过滤策略,如 HTML6的   frame-src         'self'         定义加载子frmae的策略   sandbox         allow-forms allow-scripts         沙盒模式,会阻止页面弹窗/js执行等,你可以通过添加allow-forms allow-same-origin allow-scripts allow-popups, allow-modals, allow-orientation-lock, allow-pointer-lock, allow-presentation, allow-popups-to-escape-sandbox, and allow-top-navigation 策略来放开相应的操作   report-uri         /some-report-uri         　   指令值   所有以-src结尾的指令都可以用一下的值来定义过滤规则,多个规则之间可以用空格来隔开   值         demo         说明   *         img-src *         允许任意地址的url,但是不包括 blob: filesystem: schemes.   'none'         object-src 'none'         所有地址的咨询都不允许加载   'self'         script-src 'self'         同源策略,即允许同域名同端口下,同协议下的请求   data:         img-src 'self' data:         允许通过data来请求咨询 (比如用Base64 编码过的图片).   domain.example.com         img-src domain.example.com         允许特性的域名请求资源   *.example.com         img-src *.example.com         允许从 example.com下的任意子域名加载资源   https://cdn.com         img-src https://cdn.com         仅仅允许通过https协议来从指定域名下加载资源   https:         img-src https:         只允许通过https协议加载资源   'unsafe-inline'         script-src 'unsafe-inline'         允许行内代码执行   'unsafe-eval'         script-src 'unsafe-eval'         允许不安全的动态代码执行,比如 JavaScript的 eval()方法

　　示例：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

示例   default-src 'self';     只允许同源下的资源   script-src 'self';       只允许同源下的js   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';   多个资源时,后面的会覆盖前面的   服务器端配置       Apache服务   在VirtualHost的httpd.conf文件或者.htaccess文件中加入以下代码   Header set Content-Security-Policy "default-src 'self';"       Nginx   在 server {}对象块中添加如下代码   add_header Content-Security-Policy "default-src 'self';";       IIS   web.config:中添加     <system.webServer>     <httpProtocol>       <customHeaders>         <add name="Content-Security-Policy" value="default-src 'self';" />       </customHeaders>     </httpProtocol>   </system.webServer>