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页面设置它的正确方法吗？我还没有找到任何阅读。

Answer 1

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

虽然这很直观，但答案是不。

在通配符主题（HTML5rocks introduction to Content Security Policy部分）上看到相当不错的Implementation details：

接受通配符，但仅作为方案，端口或主机名的最左侧位置：*：//*.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 directives是一种很好的做法。在您的情况下，您应该使用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现在变得非常严格。 F.E.你不再允许'unsafe-inline'用于脚本来源了。这意味着内联javascript现在被禁止。禁止从之前允许的https://fonts.gstatic.com/加载脚本。等等...

注意2：您可以使用散列或随机数来删除'unsafe-inline'关键字。我无法为此示例做这项工作，但如果您有兴趣，请再次查看HTML5rocks intro。

将Google字体（fonts.googleapis.com）添加到CSP标头

1 个答案: