CSP（Content-Security-Policy）内容安全策略，主要用于预防常见的Web攻击，如XSS攻击、数据注入攻击等。服务端通过设置响应报文的​​Content-Security-Policy​​字段，控制浏览器可以为该页面获取哪些资源，下面是一些常用的设置示例

default-src

default-src 用于控制网页中资源的安全性

// 允许使用内联 JavaScript 和 CSS
Content-Security-Policy: default-src 'unsafe-inline'

// 允许使用类似 eval 的 text-to-JavaScript 机制
Content-Security-Policy: default-src 'unsafe-eval'

// 必须与当前来源（而不是其子域）匹配
Content-Security-Policy: default-src 'self'

// 不执行任何匹配，所有内联、外联的JS和CSS等资源都不允许引入
Content-Security-Policy: default-src 'none'


上面的关键字需要使用单引号，多个属性值用空格分割。除此之外也可以通过特定的条件限制访问源，比如只允许https、或者只允许某些特定网址

// 只信任 https://cdn.example.net 和 https://api.example.net 的资源
Content-Security-Policy: default-src https://cdn.example.net https://api.example.net;

// 只允许https资源
Content-Security-Policy: default-src https


上面列出的关键字和策略适用于所有的资源安全控制，比如​​script-src​​​、​​style-src​​​和​​img-src​​

script-src

script-src 用于控制网页中JS的安全性

// nonce-<base64-value>: 允许某个特定的内联脚本
Content-Security-Policy: default-src 'self'; script-src nonce-'asdf'
<script nonce="asdf">
console.log('inline script')
</script>


img-src

// 允许 example.com 下的所有图片资源
Content-Security-Policy: img-src https://*.example.com


除了上面列出的这些策略，还有很多可以控制的指令，具体可已参考MDN文档，平时用的较多的是​​script-src​​​和​​default-src​​，

参考文章

​

GitHub: ​​https://github.com/wmui​​