it-roy-ru.com

Google Fonts нарушает Политику безопасности контента

Я пытаюсь использовать Google Fonts, и у меня никогда не было проблем, но теперь, когда я пытаюсь добавить CSS-файл в свой заголовок, я получаю эту ошибку на консоли:

Отказался от загрузки таблицы стилей 'http://fonts.googleapis.com/css?family=Whatever' потому что это нарушает следующую директиву политики безопасности содержимого: "style-src 'self' 'unsafe-inline'".

32
José María

Здесь нужно исправить две вещи:

  • Используйте https для ссылки на шрифты Google (https://fonts.googleapis.com/css?family=Whatever)
  • Авторизуйтесь https://fonts.googleapis.com в style-src директива и https://fonts.gstatic.com в font-src директива: "style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"
61
Rolinh

Если вы похожи на меня и немного запутались, потому что в каждом ответе просто говорится, что вам нужно авторизовать URL в 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