web-dev-qa-db-ja.com

Google Fontsはコンテンツセキュリティポリシーに違反しています

Google Fontsを使用しようとしており、問題は一度もありませんでしたが、ヘッダーにCSSファイルを追加しようとすると、コンソールに次のエラーが表示されます。

スタイルシートの読み込みを拒否しました'http://fonts.googleapis.com/css?family=Whatever'次のコンテンツセキュリティポリシーディレクティブに違反しているため："style-src 'self' 'unsafe-inline'"。

htmlcsshttpgoogle-font-apicontent-security-policy
32
José María

ここで修正することが2つあります。

  • Googleフォントリンクにhttpsを使用します（https://fonts.googleapis.com/css?family=Whatever）
  • 承認https://fonts.googleapis.com in style-srcディレクティブとhttps://fonts.gstatic.com in font-srcディレクティブ："style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"
61
Rolinh

あなたが私と似ていて、少し混乱している場合、すべての答えはstyle-srcディレクティブは、それを行う方法を示すことなく、完全なタグです：

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

Content-Security-Policyに指定できるソースは複数あります。

以下に明確な詳細があり、私にとってはうまくいきました。

どのコンテンツ（css、img、font、media）ソースエラーがあるかに応じて、以下の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>

お役に立てば幸いです。

3
Manohar Reddy Poreddy

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.
      ],
    }
  })
);
0
Daniel Danielecki