由于内容安全政策，Google 字体无法加载

Question

我有一个渐进式网络应用程序。我正在使用 Google 字体，并且在我的服务人员中使用 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';

我已经按照配方here 设置了工作箱来缓存字体。代码如下：

  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

看来我也需要在connect-src 下声明谷歌字体。我没有看到任何地方提到过（我搜索了很多）所以我想知道这是一个错误还是我确实需要在connect-src CSP 指令中定义字体？

Answer 1

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

注意：禁止内联样式和内联脚本是 CSP 提供的最大安全优势之一。但是，如果您绝对必须使用它，有一些机制可以允许它们。

仅关注这一点，Google 的字体不能很好地与 SRI（子资源完整性）配合使用，这将解决安全问题。如果需要尊重安全性，一个更好的选择是严格为您的字体使用辅助服务器（除非您选择实现从例如 CDNJS 加载的 SRI 友好的 Web 字体）。这将允许您使用 google 字体实现散列，只需确保在 SERVER 和字体服务器之间具有正确的 CORS 设置。我还强烈建议将您的 default-src 锁定为“none”，然后定义 MDN 在此处详述的每个以下 fetch 指令：https://developer.mozilla.org/en-US/docs/Glossary/Fetch_directive，但请确保不要在 script-src 或 style-src 中使用 unsafe-inline并避免 unsafe-eval 为好。 frame-ancestors 'none'、upgrade-insecure-requests（以及 block-all-mixed-content 用于任何使用 IE 或 Edge 的人），如果您决定实施 SRI，require-sri-for script style。

我希望我的回答没有夸大其词，而且它对你有帮助。