CSP内容安全策略

业务中经常会遇到白屏问题，其中一大原因是资源被CSP策略拦截了，那么什么是CSP呢？遇到了此问题要如何解决呢？

什么是CSP？

内容安全策略 (CSP 是一个附加的安全层，有助于检测和缓解某些类型的攻击，包括跨站点脚本（XSS）和数据注入攻击。这些攻击用于从数据窃取到网站污损或恶意软件分发的所有事情。

为什么要CSP？

CSP 的主要目标是减少和报告 XSS （Cross Site Scripting）攻击 。一般同源策略只对网页的HTML文档做了限制，对加载的其他静态资源如javascript、css、图片等资源等还是可以加载。而XSS攻击则刚好利用了浏览器对于从服务器所获取的内容的信任。CSP则在此基础上加了一层白名单，只有在白名单里的内容才会被信任。

原理是什么？

就像上文所说XSS利用了浏览器对HTML其加载资源的信任，来执行一些不法操作。而CSP相当于给资源的访问加了一层白名单，只有在白名单里的资源才能被信任。

比如说，对于没有设置CSP的浏览器来说，HTML文档加载的静态资源都会被浏览器认为安全的。

而一旦这些资源里有恶意的脚本，浏览器无法识别哪些是恶意的脚本，还是认为都是安全可加载的，而导致悲剧的发生

当我们加了CSP配置，告诉浏览器哪些是安全可加载的，那么那些恶意脚本就会被过滤掉，达到了防止攻击的效果

那么这个白名单是在哪里配置并且以何种规则来告诉浏览器的哪些是可安全加载的呢？

CSP有以下两种方式可以配置：

Header

你可以使用Content-Security-Policy HTTP响应头来进行配置

Content-Security-Policy: default-src 'self'; script-src userscripts.example.com 

Meta

或者使用meta标签来配置，但是并不推荐此类方式，如果要使用需要放到html的最前面

注意Header 和Meta不要混用，因为CSP是以最严格的策略为准，混用时很容易出问题，导致配置不生效，详情参考文档 [The effect of multiple policies]

CSP的规则都有哪些呢?

一般CSP的HTTP Header长这样

Content-Security-Policy: 
base-uri 'self';
object-src 'self';
script-src 'self' 'unsafe-eval' 'unsafe-inline' 'report-sample' *.xxx.com; 
frame-src 'self' *.xxx.com;
report-uri https://xxx.log.xxx.com 

base-uri

用于控制base标签能加载的资源范围

object-src

防止浏览器加载执行嵌入的插件资源，或标签。最常见的示例是防止Flash based xss

script-src

用于控制浏览器加载页面脚本的范围，包括加载的url及内联脚本，还有其中

• ‘self’ 该指令指加载当前域下的js资源
• ‘unsafe-inline’ 该指令值允许内联脚本加载
• ‘unsafe-eval’ 该指令值允许页面加载eval()、new Founction()、定时器等JavaScript函数
• ‘report-sample’ 指外界尝试XSS攻击时或有脚本触发了违例，浏览器会异步将payload的前40个字节POST给 report-uri 对应的链接，可以用于定位XSS漏洞、CSP制定阶段排查内联脚本位置
• ‘*.xxx.com’ 允许这个域名下的js脚本加载

frame-src

用于控制浏览器加载iframe资源的范围，其中：

• ‘self’ 该指令指 加载当前域下的js资源
• ‘*.xxx.com’ 允许这个域名下的iframe脚本加载

report-uri

就像上文所说，用来定义上报的地址

注意：以上仅仅为很粗略的规则介绍，CSP的规则很复杂，若遇到问题需要查阅文档解决**

CSP很好的拦截了非法的加载，但是在实际业务中很容易因为CSP配置问题导致我们正常需要加载的资源无法加载，那么当我们遇到此类问题时要如何解决呢？

业务定位

什么情况是csp导致的？

只要看到控制台里有这样的报错，一定是CSP无疑了

如果遇到CSP问题怎么办？

1.打开控制台找到CSP报错2.读报错，明确是哪个域名何种类型的加载出了问题1.Refused to frame -> 加载iframe资源时出了问题，需要在frame-src中添加被拦截的域名2.Refused to load the script -> 加载js资源时出了问题 需要在script-src中添加被拦截的域名3…
3.验证1.chrome插件验证1.chrome.google.com/webstore/de…2.charles断点验证4.验证成功后联系server加上配置，把需要添加/修改的地方告诉server，也可发送配置成功的header以供参考，一般找另：对于某些复杂问题不是添加域名就能解决的问题，建议查阅官方文档解决

www.w3.org/TR/CSP/ （le…