Google шрифт не загружается из-за политики безопасности контента

Question

У меня есть прогрессивное веб-приложение. Я использую Google Fonts и использую workbox в своем сервисном работнике.

Моя политика безопасности контента определяется как:

// Omitting all the other directives
style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
font-src 'self' https://fonts.gstatic.com;
connect-src 'self';

Я настроил рабочую коробку для кэширования шрифтов, следуя рецепту здесь . Код выглядит так:

  workbox.routing.registerRoute(
    /^https:\/\/fonts\.googleapis\.com/,
    new workbox.strategies.StaleWhileRevalidate({
      cacheName: 'google-fonts-stylesheets',
    })
  );

  workbox.routing.registerRoute(
    /^https:\/\/fonts\.gstatic\.com/,
    new workbox.strategies.CacheFirst({
      cacheName: 'google-fonts-webfonts',
      plugins: [
        new workbox.cacheableResponse.Plugin({
          statuses: [0, 200],
        }),
        new workbox.expiration.Plugin({
          maxAgeSeconds: 60 * 60 * 24 * 365,
          maxEntries: 30,
        }),
      ],
    })
  );

Проблема в том, что при попытке загрузить мое приложение в браузере (Google Chrome / Safari) или в автономном приложении шрифт не загружается. После многих моментов, вызывающих утомление волос, Chrome наконец-то выдал мне ошибку в консоли:

Refused to connect to 'https://fonts.googleapis.com/css?family=Montserrat|Quicksand&display=swap' because it violates the following Content Security Policy directive: "connect-src 'self'".

Uncaught (in promise) no-response: no-response :: [{"url":"https://fonts.googleapis.com/css?family=Montserrat|Quicksand&display=swap","error":{}}]
    at o.makeRequest (https://storage.googleapis.com/workbox-cdn/releases/4.2.0/workbox-strategies.prod.js:1:3983)

GET https://fonts.googleapis.com/css?family=Montserrat|Quicksand&display=swap net::ERR_FAILED

Похоже, мне нужно также объявить шрифты Google под connect-src. Я не видел нигде упомянутого (и много гуглял), поэтому я хотел знать, если это ошибка, или мне действительно нужно определить шрифт в директиве connect-src CSP?

Answer 1

connect-src 'fonts.googleapis.com' потребуется, несмотря на вашу текущую Content-Security-Policy.Если я могу ответить на это дополнительным материалом, который вы специально не запрашивали: целью CSP является безопасность;небезопасный встроенный набор для style-src небезопасен.От MDN на странице, посвященной style-src - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src:

Примечание. Запрещение встроенных стилей и встроенных сценариев - одно из самых больших достижений безопасности, предоставляемых CSP.Однако, если вам абсолютно необходимо его использовать, есть несколько механизмов, которые позволят им.

Сосредоточившись на этом одном, шрифты Google не очень хорошо работают с SRI (целостность подресурса), что может решитьвопрос безопасности.Лучшим вариантом, если безопасность - это то, к чему нужно относиться с уважением, будет использование дополнительного сервера строго для вашего шрифта (если вы не решите внедрить дружественные к SRI веб-шрифты, загруженные из, например, CDNJS).Это позволит вам реализовать хеширование с помощью шрифтов Google, просто убедитесь, что установлены правильные настройки CORS между сервером SERVER и сервером шрифтов.Я также настоятельно рекомендую заблокировать ваш default-src на 'none' и после этого определять каждую следующую директиву извлечения, как подробно описано в MDN здесь: https://developer.mozilla.org/en-US/docs/Glossary/Fetch_directive, только убедитесь, что не используете unsafe-inline в script-src ИЛИstyle-src и избегайте unsafe-eval.frame-ancestors 'none', upgrade-insecure-requests (а также block-all-mixed-content для всех, кто использует IE или Edge) и, если вы решите внедрить SRI, require-sri-for script style.

Я надеюсь, что не переоценил свой ответ иэто, конечно, вам помогает.