Google 字体违反了内容安全策略

Question

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

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

Answer 1

这里有两件事需要解决：

Google 字体使用 https link (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"

Answer 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;">

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

希望对您有所帮助。

Answer 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.
      ],
    }
  })
);

Google 字体违反了内容安全策略

Google Fonts violates Content Security Policy

html

css

http

google-font-api

content-security-policy