CSP: script-src-elem и Serviseworker

Question

Обычный сервис-воркер

const staticCacheName = 's-cache-app-v1';
const dynamicCacheName = 'd-cache-app-v1';
const assetUrls = ['index.html', 'offline.html'];

self.addEventListener('install', async () => {
  const cache = await caches.open(staticCacheName);
  await cache.addAll(assetUrls);

});


self.addEventListener('activate', async () => {
  const cacheNames = await caches.keys();
  await Promise.all(
    cacheNames
      .filter(name => name !== staticCacheName)
      .filter(name => name !== dynamicCacheName)
      .map(name => caches.delete(name))

  )
});

self.addEventListener('fetch', e => {
  const { request } = e;
  const url = new URL(request.url);
  if (url.origin === location.origin) {
    e.respondWith(cacheFirst(request));
  } else {
    e.respondWith(networkFirst(request))
  }
});


async function cacheFirst(request) {
  const cached = await caches.match(request);
  return cached ?? await fetch(request);
}

async function networkFirst(request) {
  const cache = await caches.open(dynamicCacheName);
  try {
    const response = await fetch(request);
    await cache.put(request, response.clone());
    return response;
  } catch {
    console.log(caches);
    const cached = await cache.match(request);
    return cached ?? await caches.match('/offline.html');
  }

}

и выдает ошибку

Refused to load the script 'http://localhost:3000/offline.html' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Получается запрет на выполнение сторонних скриптов. Много перепробовал чего (и в манифест добавлял СSP и через <meta http-equiv="...">) Чет ничего не получается.

Answer 1

Путь 1

Эта ошибка возникает из-за того, что политика безопасности контента (Content Security Policy, CSP) на странице запрещает загрузку скриптов из внешних источников, включая http://localhost:3000/offline.html.

Чтобы исправить эту ошибку, необходимо изменить политику безопасности контента на странице, чтобы разрешить загрузку http://localhost:3000/offline.html. Для этого можно добавить http://localhost:3000/offline.html в директиву CSP 'script-src' в вашем HTML-файле, попробуйте еще раз это провернуть

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'http://localhost:3000' 'wasm-unsafe-eval' 'inline-speculation-rules';">

Путь 2

Если изменение политики безопасности контента не помогло, то можете попробовать другие варианты:

Проверьте, что файл offline.html действительно существует и доступен по адресу 'http://localhost:3000/offline.html'.
Попробуйте изменить строку return cached ?? await caches.match('/offline.html'); в функции networkFirst() на return cached ?? await caches.match('offline.html');. Это поможет загружать файл offline.html из кэша, если он был сохранен там ранее.
Если вы работаете с HTTPS, а не с HTTP, попробуйте изменить адрес запроса на https вместо http, т.е. https://localhost:3000/offline.html вместо http://localhost:3000/offline.html.
Если ничто из вышеперечисленного не помогло, то попробуйте добавить директиву script-src-elem с адресом http://localhost:3000/offline.html в свой HTML-файл

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules'; script-src-elem 'http://localhost:3000/offline.html';">

Обратите внимание, что этот вариант менее безопасен, чем предыдущие, поэтому его следует использовать только в случае, если вы уверены в безопасности загружаемого файла.

БЛОГ НА HUSL

CSP: script-src-elem и Serviseworker

Ответы (1 шт):

Путь 1

Путь 2