初识前端内容安全策略（CSP）

第一次听说CSP还是在绘图，后来在学习nginx服务器配置的时候，见到了一次，也没有很熟悉，直到中午吃过饭后，大家聊起了跨域，然后聊到了CSP，决定下来认真看看，和大家分享一下。

聊聊跨域

对于一个前端工程师来说，跨域极大的降低了开发的灵活性和体验，每次发起请求，尤其是POST请求的时候，不论是在调试模式下配置代理还是让后端配置，都很麻烦，而且作为浏览器为了保护请求安全的策略，第一，不能随便舍弃（讨厌，但是不好干掉）;第二，是浏览器的限制策略，所以对脚本请求接口并没有什么用，只是针对浏览器解析的前端代码（感觉莫名的被针对了） 所以能不能有一个新的安全技术出现： 1、不单单针对浏览器端，从服务端入口限制请求的来源。 2、可以对不同的请求进行限制，比如，请求接口域名，js加载域名，图片加载域名 那么就有了CSP

CSP

CSP是Content Security Policy的缩写，翻译成中文是内容安全策略，就是通过约束页面上的各种请求的来源来保证网页的安全，相比较跨域的好处就是上面聊的两点。CSP主要作用在服务端，所以需要在服务端配置，我们以nginx服务器配置来说：

1、配置位置 在nginx的配置文件当中配置

add_header Content-Security-Policy

2、配置语法

add_header Content-Security-Policy "参数值"

3、配置参数

参数	描述
*	允许任意地址的url,但是不包括 blob: filesystem: schemes.
'none'	所有地址的都不允许加载
'self'	允许同源，和同源策略类似，但是基于服务端
域名	允许通过指定域名来请求
*.域名	允许通过指定域名和他的子域名来请求
'unsafe-inline'	允许行内代码请求
'unsafe-eval'	允许不安全的动态代码执行,比如 JavaScript的 eval()方法
allow-forms allow-scripts	是允许表单和js请求

配置很杂，感觉描述有点吃力（毕竟这个配置本身就是针对线上安全的），所以举例看看：

允许同源数据请求：

add_header Content-Security-Policy "default-src 'self';";

允许同源js请求：

add_header Content-Security-Policy "script-src 'self';";

允许这两个地址js请求：

add_header Content-Security-Policy "script-src domeing1.com domeing2.com;";

最后来一个总的案例，大家可以尝试看看是啥样的策略。

add_header Content-Security-Policy "default-src 'self' mydomain.com 'unsafe-inline' 'unsafe-eval' blob: data: ;";

安全策略再多也不为过，初识CSP，还有欠缺，欢迎各位大佬多多指点。