Google 字体违反了内容安全政策答案

【问题标题】：Google Fonts violates Content Security PolicyGoogle 字体违反了内容安全政策
【发布时间】：2016-03-03 06:43:59
【问题描述】：

我正在尝试使用 Google 字体，我从来没有遇到过任何问题，但现在当我尝试在我的标题上添加 CSS 文件时，我在控制台上收到此错误：

拒绝加载样式表'http://fonts.googleapis.com/css?family=Whatever'，因为它违反了以下内容安全策略指令："style-src 'self' 'unsafe-inline'"。

【问题讨论】：

因此您必须更改您发送的 CSP 标头以允许该资源。如果查看当前设置，您可以清楚地看到样式仅限于位置 self 很可能不包括 googleapis.com 。
我尝试使用元标记对其进行修改并添加一些我在互联网上看到的东西，但我无法解决这个问题...
这与元标记无关。 CSP header 是一个 http 标头，因此是协议的一部分，而不是内容。您发送它，无论是有意还是无意。也许是因为你使用了一些框架，但如果你不发布更多细节，我们就不能再说了。
嗯，我用的是 Meteor JS
如果您不相信看到的错误消息，您可以自己轻松检查该标头：只需打开浏览器开发控制台并查看已完成的基本请求的标头即可。它们将包含所述标题。或者你使用网络嗅探器，结果是一样的。

标签： html css http google-font-api content-security-policy

【解决方案1】：

这里有两点需要解决：

使用 https 作为 Google 字体链接 (https://fonts.googleapis.com/css?family=Whatever)
在style-src 指令中授权https://fonts.googleapis.com，在font-src 指令中授权https://fonts.gstatic.com："style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"

【讨论】：

data: 是干什么用的？
Allows data: URIs to be used as a content source. 来自developer.mozilla.org/en/docs/Web/Security/CSP/…
对于查看此答案的其他人，不要复制“不安全内联”，因为它会无缘无故降低安全性 - 字体不需要它来工作。它存在的唯一原因是 OP 在他的原始代码中包含它。使用style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;
@KevinLee 如果你把你的评论变成答案，我会投赞成票。
@KevinLee 实际上，如果你内联你的样式，它可能非常需要 - 例如，女巫在反应应用程序中很常见。

【解决方案2】：

如果您像我一样有点困惑，因为每个答案都只是说您需要在 style-src 指令中授权一个 URL 而没有展示如何去做，这里是完整的标签：

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

【讨论】：

您遗漏的内容选项（如 default-src 等）是否会降低安全性，还是与一开始就没有 meta csp 标签一样？
允许unsafe-inline 属性实际上会降低安全性。没有这个标签可以正常工作，因为它会使您的应用更容易受到 XSS 攻击。
删除了“不安全内联”
我只是使用如下：<meta http-equiv="Content-Security-Policy" content="style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com">
@Owen 在meta 标签 csp 上很难找到好的信息。我没有信心解决我的字体警告，冒着降低其他一切安全性的风险:-) 我的网站是一个投资组合网站，我不想被问到“你为什么这样做？？”在采访中:-)

【解决方案3】：

Content-Security-Policy 有多个来源。

下面有清晰的细节，这对我有用。

根据您遇到的内容（css、img、字体、媒体）源错误，您可以更改下面的 URL。

<html>

<head>

  <meta http-equiv="Content-Security-Policy"
    content="
      default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; 
      style-src   'self' https://fonts.googleapis.com;
      font-src    'self' data: https://fonts.gstatic.com;
      img-src     'self' data: content:;
      media-src   *;
            "
  />

 <title>My page title</title>

</head>

<body>
  some text
</body>

</html>

希望对您有所帮助。

【讨论】：

你的img-src 中的content: 有什么作用？我以前从未见过那个
我和你一样，搜索并修复。

【解决方案4】：

使用 Helmet 时，以下内容完美运行（用 TypeScript 编写）：

import * as express from 'express';
import { Express } from 'express';
const helmet = require('helmet');
const expressApp: Express = express(); // Create Express instance.

expressApp.use(
  helmet.contentSecurityPolicy({
    directives: {
      fontSrc: [
        "'self'", // Default policy for specifiying valid sources for fonts loaded using "@font-face": allow all content coming from origin (without subdomains).
        'https://fonts.gstatic.com' // Google Fonts.
      ],
      styleSrc: [
        "'self'", // Default policy for valid sources for stylesheets: allow all content coming from origin (without subdomains).
        'https://fonts.googleapis.com' // Google Fonts.
      ],
    }
  })
);

【讨论】：