关于 HTTP header Content Security Policy (CSP)

为什么需要 CSP

允许用户提交数据的网站总是会遇到跨站脚本(Cross-Site Scripting)和各种数据注入的安全问题, 通常这些脚本都会发送消息给第三方搜集数据或者加载第三方站点的各种资源来进一步扩大攻击面. 那么如何保证我们自己的站点不要加载或使用第三方资源呢?

什么是 CSP

Content Security Policy 就是专门用来发现和缓解上面提到的各种潜在的安全问题的解决方案. 它限制浏览器可以使用的各种资源(JavaScript, css, 图片, video, 字体, frame, audio等)的 URL. 比如只允许使用本站点或信任站点的 JavaScript 或 CSS.

CSP 的实现

服务器端返回的 response 里的 Content-Security-Policy header 用来实现 CSP.
Content-Security-Policy: default-src 'self' trusted.com *.trusted.com
或者通过 HTML 里面的 meta 元素来实现:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' trusted.com *.trusted.com">

Content-Security-Policy 的值称之为 policy. 每个 policy 定义一种或多种资源的这种资源被允许的来源. default-src 用来设置默认的policy, 当没有设置某种资源的限制时, 就使用 default-src的 policy.

一些例子:

Content-Security-Policy: default-src 'self'
Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com
Content-Security-Policy: default-src 'self' *.mailsite.com; img-src *

更多例子参考:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

当你只是想测试一下你的 policy 时(比如, 你不确定你的站点现在共使用了哪些第三方的资源时), 你可以使用这个 header 去测试, 它只会报告给你, 不会真正限制时候第三方资源:

Content-Security-Policy-Report-Only: policy

如何上报

可以在 policy 里面设置 report-to 或 report-uri (deprecated) 如:

Content-Security-Policy: ...; report-uri https://endpoint.com; report-to groupname

当浏览器不支持 CSP 时, 它会降级到同源策略 (CORS)来保护站点.

当遇到违反 CSP 的情况时候, console 会报错: