web-dev-qa-db-fra.com

Google Fonts enfreint la politique de sécurité du contenu

J'essaie d'utiliser Google Fonts et je n'ai jamais eu de problème, mais maintenant quand j'essaie d'ajouter le fichier CSS sur mon en-tête, j'obtiens cette erreur sur la console:

Refus de charger la feuille de style 'http://fonts.googleapis.com/css?family=Whatever' car il enfreint la directive de politique de sécurité du contenu suivante: "style-src 'self' 'unsafe-inline'".

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

Il y a deux choses à corriger ici:

  • Utilisez https pour le lien des polices Google (https://fonts.googleapis.com/css?family=Whatever)
  • Autoriser https://fonts.googleapis.com dans style-src directive et https://fonts.gstatic.com dans font-src directive: "style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"
61
Rolinh

Si vous êtes comme moi et un peu confus parce que chaque réponse dit simplement que vous devez autoriser une URL dans un style-src directive sans montrer comment le faire, voici la balise complète:

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

Il existe plusieurs sources qui peuvent être fournies pour Content-Security-Policy.

Ci-dessous, des détails clairs, qui ont fonctionné pour moi.

En fonction de l'erreur de source de contenu (css, img, police, média) que vous avez, vous pouvez modifier l'URL ci-dessous.

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

J'espère que ça t'as aidé.

3
Manohar Reddy Poreddy

Lorsque vous travaillez avec Helmet , ce qui suit fonctionne parfaitement (écrit en 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