Google Fonts verstößt gegen die Inhaltssicherheitsrichtlinie

Question 1

Ich versuche, Google Fonts zu verwenden, und ich hatte noch nie Probleme, aber wenn ich jetzt versuche, die CSS-Datei zu meinem Header hinzuzufügen, erhalte ich diesen Fehler in der Konsole:

Weigerte sich, das Stylesheet zu laden 'http://fonts.googleapis.com/css?family=Whatever' weil es gegen die folgende Richtlinie zur Inhaltssicherheit verstößt: "style-src 'self' 'unsafe-inline'".

Question 2

Hier sind zwei Dinge zu beheben:

Verwenden Sie https für den Link zu Google Fonts (https://fonts.googleapis.com/css?family=Whatever)
Autorisieren https://fonts.googleapis.com in style-src Richtlinie u https://fonts.gstatic.com in font-src Richtlinie: "style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"

Question 3

Wenn Sie wie ich und ein wenig verwirrt sind, weil jede Antwort nur besagt, dass Sie eine URL in a autorisieren müssen style-src Direktive, ohne zu zeigen, wie es geht, hier ist das vollständige Tag:

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

Question 4

Es gibt mehrere Quellen, die angegeben werden können Content-Security-Policy.

Unten finden Sie klare Details, die für mich funktioniert haben.

Je nachdem, welchen Inhaltsfehler (CSS, Bild, Schriftart, Medien) Sie haben, können Sie die URL unten ändern.

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

Ich hoffe, das hilft.

Question 5

Beim Arbeiten mit HelmFolgendes funktioniert perfekt (in TypeScript geschrieben):

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

Question 6

Die oben genannten Kombinationen haben bei mir nicht funktioniert. Mein Code importiert die Schriftarten aus einer .scss Datei so:

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

Folgendes habe ich hinzugefügt:

default-src wurde gerade eingestellt 'self'. Dies ist nicht notwendig, aber ich wollte, dass alles andere gesperrt ist. Diese Einschränkung kann Fehler in der Browserkonsole auslösen. Passen Sie sich nach Bedarf an. musste ich hinzufügen wss: planenum eine Web-Socket-Verbindung für den Angular-Debugger zuzulassen.
style-src brauchte die 'unsafe-inline' Stichwort. Ich vermute, dass es daran liegt, dass der Stil gepackt / minimiert ist.
script-src wurde auch mit benötigt 'unsafe-inline' Stichwort. Obwohl ich das heruntergeladene Stylesheet überprüft habe und nichts Offensichtliches gesehen habe, denke ich, dass es dort etwas geben muss, das als Skript betrachtet wird.

font-src brauchte die data: planen. Die Browserkonsole hat einen Fehler beim Abrufen ausgegeben data:application/font-woff;charset=utf-8… (“font-src”). Dies kann etwas sein, das von einer anderen Stelle in meinem Angular-Code kommt, aber es kann für jemanden nützlich sein.

Unten das letzte Ding.

default-src 'self' wss:;
style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
script-src 'self' https://fonts.googleapis.com 'unsafe-inline';
font-src 'self' data: https://fonts.gstatic.com