CSP 与 Service Worker

Question

我想在我的网站上实施 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>

Answer 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：使用哈希

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

以下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 header：Content-Security-Policy: script-src 'sha256-vTdjucjBZWvbihWowJ2vrpjYlv4kalHHBIgd7vBr124='。

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

CSP 与 Service Worker

CSP with a Service Worker

content-security-policy

service-worker

方法一：单独文件

方法 2：使用哈希