javascript - 使用 'strict-dynamic' CSP 指令加载脚本的正确方法是什么？

Question

背景

Content Security Policy 的想法是告诉网络浏览器从哪里加载什么内容。这意味着如果未明确允许 'unsafe-inline'(这不是最好的做法)，攻击者将无法注入(inject)他们自己的代码。

Google 还发布了 CSP Evaluator ，旨在发现您的政策中可能存在的错误。在默认设置下，该工具建议对 'script-src' 使用 'strict-dynamic' 策略。其背后的想法是，您为需要的任何 JavaScript 源代码编写一个加载程序，并禁止其他一切。

问题

实现这种加载器的“正确”方法是什么？应该自己编写加载程序(参见下面的示例)还是应该使用工具来创建这样的加载程序？ (请注意，这个问题不是要求具体的工具推荐)

例子

var imported = document.createElement('script');
imported.src = '/path/to/imported/script';
document.head.appendChild(imported);

上下文

我的网站目前有以下政策:

default-src 'none';
img-src 'self';
style-src 'self' https://stackpath.bootstrapcdn.com 'sha256-bviLPwiqrYk7TOtr5i2eb7I5exfGcGEvVuxmITyg//c=';
script-src https://use.fontawesome.com https://code.jquery.com https://cdnjs.cloudflare.com https://stackpath.bootstrapcdn.com;
base-uri 'none';
form-action 'none';
frame-ancestors 'none';

Google 的工具建议如下:

Host whitelists can frequently be bypassed. Consider using 'strict-dynamic' in combination with CSP nonces or hashes.

因此，我想实现一个加载器来加载这些 JS 框架，并且我想知道如何最好地解决这个问题。

Answer 1

一个直接的答案是，只要您动态加载的脚本 ( /path/to/imported/script ) 托管在您已经在 script-src 中列入白名单的域中，您不必修改您的 CSP 或更改您的加载器——一切都会按预期工作。

但是，更广泛的问题是您的 script-src白名单包括托管 Javascript 的域，攻击者可以使用它在您的应用程序中发现标记注入(inject)错误以绕过您的 CSP。例如，https://cdnjs.cloudflare.com托管 Angular(https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js)，攻击者可以使用它来将 HTML 注入(inject)转换为任意脚本执行(here 是一篇关于此的论文)。

CSP Evaluator 工具中的建议是将您的应用程序切换为依赖 script-src它使用 CSP 随机数而不是白名单。为此，您需要遵循 https://csp.withgoogle.com/docs/strict-csp.html 中概述的流程。 -- 基本上，确保每个 <script>元素有一个正确的 nonce每次页面加载都会更改的属性，或者改用 CSP3 hashes用于静态脚本。

您的 CSP 将如下所示:

... script-src 'nonce-[random-value]' 'strict-dynamic' 'unsafe-inline' https:; ...

如果您使用 'strict-dynamic' ，您的脚本加载器不必更改，因为浏览器会自动信任通过编程 API 添加到您页面的脚本，例如 appendChild() .