简单聊聊前端的内容安全CSP策略

CSP（Content Security Policy）为内容安全策略，也是通过HTTP Header头来对前端页面所加载内容进行白名单限制。那么很明显，针对的就是加载恶意代码或数据这类场景，但毕竟是面向内容安全，对于XSS这类漏洞只能降低漏洞影响（不允许加载外部恶意脚本），并不能完全消除漏洞危害。

该策略可以通过配置可信资源（JS、IMG、CSS等）来源白名单的方式，来避免其他来源会被引入，其所需配置的HTTP响应头为Content-Security-Policy。

CSP的配置是有一套指令的，Header头的示例为：Content-Security-Policy: default-src 'self';这个意思为默认所有资源来源都限制为同源资源，其他源资源不能被前端加载。

除了default-src其他的指令构成通常为标签-src，例如：img-src，通常值可以为'self'或者指定一个URL来作为白名单，当然，部分指令也有一些其他值，这里我就不过多赘述了，都是各种各样的白名单。

也有一个比较特殊的指令report-uri，其值为URL，作用为当出现不符合CSP策略的请求时，就会发起错误报告给report-uri指定的地址，用于记录。

CSP有两种配置方式，通过前端<meta>标签或者通过后端Header返回，并且后端返回的作用优先级是高于<meta>标签的优先级。

后端返回就不用说了，不同的web服务在response的时候写入Content-Security-Policy的值就行

下面看一下<meta>标签的实现方式

<meta http-equiv="Content-Security-Policy" content="  default-src 'self';   script-src 'self' 'https://www.test.com/';   style-src 'self';   img-src 'self';   report-uri /csp-report;">

这篇文章就是简单介绍一下CSP策略，在CSP指令部分由于其各类指令太多，并没有一一列举，有相关需求的时候现查即可。

从本人做基础安全的视角来看，该策略对安全防护的作用较小，更多的是对防护能力进行补充，减少影响危害，并不能直接解决风险。