将 google 字体 (fonts.googleapis.com) 添加到 CSP 标头

Question

我在 gitHub 页面上托管一个个人项目，并使用 cloudflare 来强制执行 https。现在我想实施 CSP 政策。

我尝试将元标记添加到我的页面的头部：

<meta HTTP-EQUIV='Content-Security-Policy' CONTENT="default-src 'self' *.fonts.googleapis.com/* *.cloudflare.com/* *.fonts.googleapis.com/*;">

但我收到以下错误：

拒绝加载样式表 ' https://fonts.googleapis.com/icon?family=Material+Icons ' 因为它违反了以下内容安全策略指令：“default-src 'self' .fonts.googleapis.com/ .cloudflare .com/ .fonts.googleapis.com/ ”。请注意，'style-src' 未明确设置，因此使用 'default-src' 作为后备。

这是我包含的脚本：

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans|Roboto" rel="stylesheet">

不会设置*.fonts.googleapis.com/*允许页面中的所有内容吗？

由于这是我第一次设置 CSP，这是为 github 页面设置 CSP 的正确方法吗？我还没有找到任何关于此的阅读。

Answer 1

不会设置 *.fonts.googleapis.com/* 允许页面中的所有内容吗？

尽管这很直观，但答案是否定的。

请参阅关于通配符主题的内容安全策略的 HTML5rocks 介绍（部分实现细节）：

接受通配符，但仅作为方案、端口或在主机名的最左侧位置： *://*.example.com:* 将匹配 example.com 的所有子域（但不匹配example.com 本身），在任何端口上使用任何方案。

因此，这两种字体的工作 CSP 可能如下所示：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.googleapis.com/ https://fonts.gstatic.com/ 'unsafe-inline';">

注 1：使用相应的CSP 指令是一种很好的做法。在您的情况下，您应该像这样使用font-src和style-src：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' https://fonts.gstatic.com/; style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline';">

使用相应指令的优点是您的 CSP 现在变得非常严格。例如，您不再允许'unsafe-inline'脚本源。这意味着现在禁止内联 javascript。也禁止从https://fonts.gstatic.com/加载脚本 ，这是之前允许的。等等...

注意 2：您可以'unsafe-inline'通过使用散列或随机数来完全摆脱关键字。我无法在此示例中完成这项工作，但如果您有兴趣，请再次查看HTML5rocks 介绍。