Question

我想在我的站点上实现CSP，但是我还拥有一个服务工作者，该服务工作者可以缓存资源并在您离线时提供通知。我定义了以下策略：

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'）。 / p>

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

<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>

Answer 1

即使您限制了加载工作程序的能力，内联脚本标签也可以用于执行XSS attacks。

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

方法1：单独的文件

您可以将脚本放入另一个文件（如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的哈希值

   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并替换标题。这种方法很麻烦，不建议使用

CSP与服务人员

1 个答案:

方法1：单独的文件

方法2：使用哈希