CSP с сервисным работником

Question

Я хочу внедрить CSP на своем сайте, но у меня также есть Service Service Worker, который кэширует ресурсы и выдает уведомление, если вы не в сети. Я определил следующую политику:

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

Оценщик CSP от Google выдает предупреждение о функции init для работника, поскольку встроенные сценарии могут использоваться для выполнения плохих действий, даже если я указал загрузку работников только из моего домена (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

Даже если вы ограничили возможность загрузки рабочих, встроенные теги сценариев можно использовать для выполнения XSS-атак .

CSP предотвращает 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. Использование хеша

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='.

Примечание: любые изменения в коде, включая пробелы, изменят хеш. Вам нужно будет пересчитать хеш и заменить заголовок. Этот метод является громоздким и не рекомендуется