深入浅出为什么你的网页需要CSP?【前端篇】 _CSP

文章插图

作者： ConardLi code秘密花园
转发链接：https://mp.weixin.qq.com/s/S2NeE_hpOX5cM1Yaxz3YDw
内容安全策略（CSP）是一个 HTTP Header ， CSP 通过告诉浏览器一系列规则，严格规定页面中哪些资源允许有哪些来源，不在指定范围内的统统拒绝。
使用它是防止跨站点脚本（XSS）漏洞的最佳方法。由于难以使用 CSP 对现有网站进行改造（可通过渐进式的方法），因此 CSP 对于所有新网站都是强制性的，强烈建议对所有现有高风险站点进行 CSP 策略配置。
为什么要配置CSP 的主要好处就是可以全面禁止使用不安全的嵌入式 JAVAScript 。内联 JavaScript（无论是反射的还是存储的），意味着不正确的转义用户输入都可以被 Web 浏览器解释为 JavaScript 代码。通过使用 CSP 禁用嵌入式 JavaScript ，你可以有效消除针对你站点的几乎所有XSS 攻击。
注意，禁用内联 JavaScript 意味着必须从 src 标记加载所有 JavaScript <script> 。直接在标记上使用的事件处理程序（例如 onclick ）将无法正常工作， <script>标记内的 JavaScript 也会通过。此外，使用 <style> 标签或 style 属性的内联样式表也将无法加载。因此为了让 CSP 易于实现，在设计站点时必须非常小心。
如何配置？开启 CSP 很简单, 你只需要配置你的网络服务器返回 Content-Security-Policy 这个 HTTP Header (有时你会看到一些关于X-Content-Security-Policy Header 的提法, 那是旧版本，你无须再如此指定它) 。
除此之外， <meta> 元素也可以被用来配置该策略, 例如
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">指令无论是 header ，还是在 <meta> 标签中指定，其值的格式都是统一的，由一系列 CSP 指令（directive）组合而成。
Content-Security-Policy: <policy-directive>; <policy-directive>这里 directive ，即指令，是 CSP 规范中规定用以详细详述某种资源的来源，比如前面示例中使用的 script-src ，指定脚本可以有哪些合法来源， img-src 则指定图片的合法涞源，以下是常用指令：

base-uri 限制可出现在页面 <base> 标签中的链接。
child-src 列出可用于 worker 及以 frame 形式嵌入的链接。譬如: child-src https://youtube.com 表示只能从 Youtube 嵌入视频资源。
connect-src 可发起连接的地址 (通过 XHR, WebSockets 或 EventSource) 。
font-src 字体来源。譬如，要使用 google web fonts 则需要添加 font-src https://themes.googleusercontent.com 规则。
form-action <form>标签可提交的地址。
frame-ancestors 当前页面可被哪些来源所嵌入（与 child-src 正好相反）。作用于<frame>, <iframe>, <embed>及 <Applet> 。该指令不能通过 <meta>指定且只对非 html文档类型的资源生效。
frame-src 该指令已在 level 2 中废弃但会在 level 3 中恢复使用。未指定的情况下回退到 tochild-src 指令。
img-src 指定图片来源。
media-src 限制音视频资源的来源。
object-src Flash 及其他插件的来源。
plugin-types 限制页面中可加载的插件类型。
report-uri 指定一个可接收 CSP 报告的地址，浏览器会在相应指令不通过时发送报告。不能通过 <meta> 标签来指定。
style-src 限制样式文件的来源。
upgrade-insecure-requests 指导客户端将页面地址重写， HTTP 转 HTTPS 。用于站点中有大量旧地址需要重定向的情形。
worker-src CSP Level 3 中的指令，规定可用于 worker, shared worker, 或 service worker 中的地址。