javascript - 如何从服务器获取 JavaScript，跟踪下载进度，而不是在 Content-Security-Policy 中使用 `unsafe-eval`？

Question

我在服务器上有一个很重的 JavaScript 文件(> 3MB)。我想快速加载页面并向用户显示加载进度条。目前，我正在使用 fetch和 WritableStream下载数据并跟踪下载进度:

let resource = await fetch('heavy_file.js')
resource.clone().body.pipeTo(new WritableStream({
    write(t) { on_receive(t.length) }
}))

然后我使用 Function来评估它。这有几个问题。我怎样才能:

最好使用 fetch 加载脚本(我正在使用相同的方法加载 WASM 文件，我也想跟踪它们的下载进度，而 WebAssembly.compileStreaming API 需要使用 fetch )。

以当今适用于现代浏览器的方式跟踪下载进度。

无需启用 script-src 'unsafe-eval' 即可使用此解决方案在 Content-Security-Policy ?

PS。
当然，目前我们需要使用 script-src 'wasm-eval'在 Chrome 中加载 WASM 文件直到 the bug是固定的。

Answer 1

选项1

如果您可以提前计算您正在加载的脚本的哈希值(如果它不是动态生成的)，那么一个简单的选项可以避免

enabling script-src 'unsafe-eval' in Content-Security-Policy

将仅将该特定脚本的哈希添加到 CSP header 中 - 这仍将确保您没有执行任何不受信任的代码，同时允许您手动加载和执行脚本。

MDN 有更多实现此类 CSP 策略的示例 here .

至于加载本身，您有两条不同的路径:

选项 1.1

将散列与 CSP3 策略 unsafe-hashes 相结合这将允许您继续使用 Function或 eval像你现在一样，同时仍然将代码限制在受信任的范围内。

例如，如果你有一个像

alert('Hello, world.');

那么您的 CSP header 应包含

Content-Security-Policy: script-src 'unsafe-hashes' 'sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng='

不幸的是，CSP 级别 3，或者至少，这个选项是 supported only in Chromium在写作的那一刻。

选项 1.2

而不是使用 Function或 eval ，您可以从 JavaScript 动态创建脚本标签，填充其 textContent使用您的响应内容并将其注入(inject) DOM:

let resource = await fetch('heavy_file.js')
resource.clone().body.pipeTo(new WritableStream({
    write(t) { on_receive(t.length) }
}));
resource.text().then(res => {
  let s = document.createElement('script');
  s.textContent = res;
  document.head.appendChild(s);
});

在这种情况下，您只需将脚本的哈希添加到 CSP 中，它将适用于所有浏览器:

Content-Security-Policy: script-src 'sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng='

选项 2

如果您确实想支持动态生成的脚本，那么您唯一的选择可能是将您的进度跟踪代码移动到 Service Worker，然后使用 Client.postMessage 将进度传达给页面上的脚本。

这将适用于从您的来源提供的任何内容，但仅在安装 Service Worker 后 - 通常在后续页面加载时，因此如果您正在加载的大型脚本是用户首先访问的页面的一部分，则可能对您没有帮助网站。