带有 Service Worker 的 CSP答案

【问题标题】：CSP with a Service Worker带有 Service Worker 的 CSP
【发布时间】：2019-03-08 15:05:54
【问题描述】：

我想在我的站点上实现 CSP，但也有一个 Service Worker，它可以缓存资源并在您离线时提供通知。我已经定义了以下政策：

style-src 'self'; object-src 'none'; script-src 'self' 'unsafe-inline'; worker-src 'self'; frame-ancestors 'none';

Google 的 CSP 评估器会针对 worker 的 init 函数发出警告 - 因为内联脚本可用于做坏事 - 即使我已指定仅从我的域加载 worker (worker-src 'self')。

将此函数列入白名单的首选方法是什么？

<script>
   if (navigator.serviceWorker) {
     navigator.serviceWorker.register('/sw.js')
     .then( function (registration) {
       console.log('Success!', registration.scope);
     })
     .catch( function (error) {
       console.error('Failure!', error);
}); }
</script>

【问题讨论】：

“工人的初始化功能”指的是什么？正在运行的实际代码是什么，就像它内嵌在 HTML 中的 <script> 标记中一样？
它实际上只是一个基本的服务工作者 - 代码在上面。虽然我已经在几个站点上部署了它们，但这也是我第一次尝试实现 CSP，所以我不知道这是否可以抽象为它自己的脚本。例如，你能不能让setup.js 初始化sw.js？

标签： service-worker content-security-policy

【解决方案1】：

即使你限制了加载worker的能力，内联脚本标签也可以用来执行XSS attacks。

CSP prevents XSS 通过阻止所有内联脚本。使用'unsafe-inline' 指令，CSP 的有效性大大降低，因此最好使用其他方法。

方法一：单独文件

您可以将脚本放入另一个文件中，例如 loadWorker.js，并通过常规脚本标签包含它：

loadWorker.js：

if (navigator.serviceWorker) {
  navigator.serviceWorker.register('/sw.js')
    .then(function (registration) {
      console.log('Success!', registration.scope);
    })
    .catch(function (error) {
      console.error('Failure!', error);
    });
}

您的 html 文件：

<script src="./loadWorker.js"></script>

方法 2：使用哈希

如果您明确允许特定脚本using a hash，CSP 允许内联脚本。

以下js的hash

   if (navigator.serviceWorker) {
     navigator.serviceWorker.register('/sw.js')
     .then( function (registration) {
       console.log('Success!', registration.scope);
     })
     .catch( function (error) {
       console.error('Failure!', error);
}); }

是'sha256-vTdjucjBZWvbihWowJ2vrpjYlv4kalHHBIgd7vBr124='。

将其添加到您的 CSP 标头中，如下所示：Content-Security-Policy: script-src 'sha256-vTdjucjBZWvbihWowJ2vrpjYlv4kalHHBIgd7vBr124='。

注意：对代码的任何更改，包括空格都会更改哈希值。您将需要recalculate the hash 并替换您的标题。这种方法比较麻烦，不推荐

【讨论】：

谢谢，这很有意义。很高兴有你在这里。