由于内容安全策略，Google字体未加载

Question

我有一个进步的网络应用程序。我在使用谷歌字体，在我的服务工作者中使用工作箱。

“我的内容安全策略”定义为：

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

看来我也需要在connect-src下声明google字体。我没有看到任何地方都提到过这个(我搜索了很多)，所以我想知道这是否是一个bug，还是我确实需要在connect-src CSP指令中定义字体？

Answer 1

尽管您当前的内容-安全性-策略，connect-src 'fonts.googleapis.com'仍然是必需的。请允许我用您没有特别要求的其他材料来回答这个问题: CSP的目的是安全性；为style-src设置不安全的内联设置是不安全的。来自专用于style-src - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src的页面上的MDN：

注意:不允许内联样式和内联脚本是CSP提供的最大的安全胜利之一。但是，如果您一定要使用它，有几个机制将允许它们。

专注于这一点，谷歌的字体不能很好地发挥SRI (子资源完整性)，这将解决安全问题。如果您需要尊重安全性，一个更好的选择是严格为您的字体使用辅助服务器(除非您选择实现从CDNJS加载的对SRI友好的web字体)。这将允许您使用google字体实现散列，只需确保服务器和字体服务器之间有适当的CORS设置。我还强烈建议将默认的-src锁定为“none”，然后按照MDN这里的详细说明定义以下每个获取指令：指令，只需确保不使用脚本-src或样式-src中的不安全内联，并避免不安全-eval。frame-ancestors 'none'，upgrade-insecure-requests (以及任何使用例如或边缘的人的block-all-mixed-content )以及如果您决定实现SRI，require-sri-for script style。

我希望我没有夸大我的答案，ofc，这对你有帮助。