Das Laden der Schriftart 'data: font / woff…' wurde abgelehnt. Dies verstößt gegen die folgende Richtlinie zur Inhaltssicherheitsrichtlinie: "default-src 'self'". Beachten Sie, dass 'font-src'

Meine reagierende WebApp gibt diesen Fehler in der Browserkonsole aus

Refused to load the font 'data:font/woff;base64,d09........' because it` 
`violates the following Content Security Policy directive: "default-src` `'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

Ebenfalls:

Refused to connect to 'ws://localhost:3000/sockjs-node/782/oawzy1fx/websocket' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Screenshot der Browserkonsole

index.html Haben Sie dieses Meta:

<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://121.0.0:3000/">

WebPack.cofig.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
    context: path.join(__dirname, "./src"),
    devtool: debug ? "inline-sourcemap" : true,
    entry: "../src/index.js",

    module: {
        rules: [
            {
                test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf)$/i,  // a regular expression that catches .js files
                exclude: /node_modules/,
                loader: 'url-loader',
            },
            {
                test: /\.(js|.jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react','es2016', 'stage-0',],
                    plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
                }
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                    }
                ]
            }
        ]
    },
    resolve: {
        modules: [
            path.join(__dirname, "src"),
            "node_modules",
        ]
    },
    output: {
        path: __dirname + "/public/",
        // publicPath: "/public/",
        filename: "build.js"
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ],
    devServer: {
        port: 3000, // most common port
        contentBase: './public',
        inline: true,
        historyApiFallback: true,
    }
};

Für mich lag es an der Chrome-Erweiterung 'Grammarly'. Nachdem ich das deaktiviert habe, habe ich den Fehler nicht erhalten.

Um diesen speziellen Fehler zu beheben, sollte CSP Folgendes enthalten:

font-src 'self' data:;

Das Meta index.html sollte also lauten:

<meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src 'self' data:; default-src 'self' http://121.0.0:3000/">

Für das, was es wert ist - ich hatte ein ähnliches Problem, vorausgesetzt, es hängt mit einem Chrome-Update zusammen.

Ich musste font-src hinzufügen und dann die URL angeben, da ich ein CDN verwendete

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data: fonts.gstatic.com;">

Aus persönlicher Erfahrung ist es immer der beste erste Schritt, Ihre Website in Incognito (Chrome), Private Browsing (Firefox) und InPrivate (IE11 && Edge) auszuführen, um die Interferenz von Add-Ons / Erweiterungen zu beseitigen. Diese können das Testen in diesem Modus weiterhin beeinträchtigen, wenn sie in ihren Einstellungen explizit aktiviert sind. Dies ist jedoch ein einfacher erster Schritt zur Fehlerbehebung.

Der Grund, warum ich hier bin, war, dass Web of Trust (WoT) meiner Seite Inhalte hinzufügte und meine Seite sehr strenge Richtlinien zur Inhaltssicherheit hatte:

Header set Content-Security-Policy "default-src 'none'; font-src 'self' data:; style-src 'self' 'unsafe-inline' data:; img-src 'self' data:; script-src 'self' 'unsafe-inline'; connect-src 'self';"

Dies verursachte viele Fehler. Ich suchte eher nach einer Antwort, wie ich der Erweiterung mitteilen kann, dass sie nicht versuchen soll, diese Site programmgesteuert auszuführen. Auf diese Weise werden Personen, die Erweiterungen haben, auf meiner Website einfach nicht ausgeführt. Ich stelle mir vor, wenn dies möglich wäre, wären Werbeblocker auf Websites schon vor langer Zeit verboten worden. Meine Forschung ist also ein bisschen naiv. Ich hoffe, dies hilft allen anderen, die versuchen, ein Problem zu diagnostizieren, das nicht speziell mit der Handvoll der in anderen Antworten genannten Erweiterungen zusammenhängt.

Möglicherweise müssen Sie Folgendes hinzufügen webpack.config.js:

devServer: {

        historyApiFallback: true
    }
};

Ich hatte heute auch den gleichen Fehler in meiner Knotenanwendung.

Unten war meine Knoten-API.

app.get('azureTable', (req, res) => {
  const tableSvc = azure.createTableService(config.azureTableAccountName, config.azureTableAccountKey);
  const query = new azure.TableQuery().top(1).where('PartitionKey eq ?', config.azureTablePartitionKey);
  tableSvc.queryEntities(config.azureTableName, query, null, (error, result, response) => {
    if (error) { return; }
    res.send(result);
    console.log(result)
  });
});

Das Update war sehr einfach, mir fehlte ein Schrägstrich "/" vor meiner API. Nachdem der Pfad von 'azureTable' zu '/ azureTable' geändert wurde, wurde das Problem behoben.

Mit CSP können Sie vertrauenswürdige Quellen auf die Whitelist setzen. Alle anderen Quellen haben keinen Zugriff auf. Lesen Sie diese Fragen und Antworten sorgfältig durch und stellen Sie dann sicher, dass Sie die Schriftarten, Socket-Verbindungen und anderen Quellen auf die Whitelist setzen, wenn Sie ihnen vertrauen .

Wenn Sie wissen, was Sie tun, können Sie das zu testende metaTag auskommentieren. Wahrscheinlich funktioniert alles. Beachten Sie jedoch, dass Sie / Ihr Benutzer hier geschützt sind. metaDaher ist es wahrscheinlich eine gute Sache , das Tag beizubehalten.

Ich hatte ein ähnliches Problem. Ich hatte in angular.json einen falschen Ausgabeordnerpfad erwähnt

"outputPath": "dist/",

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'));
});

Ich hatte ein ähnliches Problem.

1. Sie müssen alle CSP-Parameter entfernen, die standardmäßig erfasst werden, und verstehen, warum jedes Attribut erforderlich ist.

font-src - soll den Browser anweisen, die Schriftarten von src zu laden, die danach angegeben werden. font-src: 'self' - Hiermit wird angegeben, dass die Schriftfamilie innerhalb desselben Ursprungs oder Systems geladen werden soll. font-src: 'self' data: - Dies teilt die Lade-Schriftfamilie innerhalb desselben Ursprungs und die Aufrufe zum Abrufen von Daten mit:

Möglicherweise wird auch die Warnung "** Heruntergeladene Schriftart konnte nicht dekodiert werden, OTS-Analysefehler: ungültiges Versions-Tag **" angezeigt. Fügen Sie den folgenden Eintrag in CSP hinzu.

font-src: 'self' Schriftart

Dies sollte jetzt fehlerfrei geladen werden.

Sie hätten an vielen Stellen Inline-Stile verwendet, was CSP (Content Security Policy) verbietet, da dies gefährlich sein könnte.

Versuchen Sie einfach, diese Inline-Stile zu entfernen, und fügen Sie sie in ein spezielles Stylesheet ein.

Ich hatte das gleiche Problem, das durch die Verwendung ./vor dem Verzeichnisnamen in meiner node.jsApp behoben wurde , dh

app.use(express.static('./public'));

Für mich lag es an der ipfs-Erweiterung im mutigen Browser

Die Einstellung der Browser-Erweiterung uBlock "Remote-Schriftarten blockieren" verursacht diesen Fehler. (Hinweis: Grammatik war zumindest für mich nicht das Problem.)

Normalerweise ist das kein Problem. Wenn eine Remote-Schriftart blockiert ist, greifen Sie auf eine andere Schriftart zurück und es wird eine Konsolenwarnung mit der Meldung "ERR_BLOCKED_BY_CLIENT" ausgegeben. Dies kann jedoch ein ernstes Problem sein, wenn eine Site Font Awesome verwendet, da die Symbole als Kästchen angezeigt werden.

Es gibt nicht viel, was eine Website tun kann, um dies zu beheben (aber Sie können verhindern, dass es zu schlecht wird, indem Sie beispielsweise schriftbasierte Symbole kennzeichnen). Durch Ändern des CSP (oder Hinzufügen eines) wird das Problem nicht behoben. Durch das Bereitstellen der Schriftarten von Ihrer Website (und nicht von einem CDN) wird dies ebenfalls nicht behoben.

Der uBlock-Benutzer kann dies jedoch beheben, indem er einen der folgenden Schritte ausführt:

• Deaktivieren Sie die Option global im Dashboard für die Erweiterung
• Navigieren Sie zu Ihrer Website und klicken Sie auf das Erweiterungssymbol und dann auf das durchgestrichene Symbol "A" , um Schriftarten nicht nur für diese Website zu blockieren
• Deaktivieren Sie uBlock für Ihre Site, indem Sie es der Whitelist im Dashboard der Erweiterung hinzufügen

Wenn Ihr Projekt vue-cli ist und Sie es ausführen npm run build, sollten Sie es ändern

assetsPublicPath: '/' zu assetsPublicPath'./'

Ich hatte das gleiche Problem und es stellte sich heraus, dass im Verzeichnis der Datei, die ich bedienen wollte, ein Fehler aufgetreten ist, anstatt:

app.use(express.static(__dirname + '/../dist'));

Ich hatte :

app.use(express.static('./dist'));

Ich hatte heute auch das gleiche Problem in meinem laufenden Code. Nun, ich habe hier viele Antworten gefunden. Das Wichtigste, was ich erwähnen möchte, ist, dass diese Fehlermeldung ziemlich mehrdeutig ist und nicht explizit auf den genauen Fehler hinweist.

Einige waren aufgrund von Browsererweiterungen, andere aufgrund falscher URL-Muster und aufgrund eines Fehlers in meiner formGroup-Instanz, der in einem Popup auf diesem Bildschirm verwendet wurde, damit konfrontiert. Daher würde ich jedem empfehlen, vor dem Vornehmen neuer Änderungen an Ihrem Code Ihren Code zu debuggen und sicherzustellen, dass Sie keine derartigen Fehler haben. Den eigentlichen Grund finden Sie sicherlich beim Debuggen.

Wenn nichts anderes funktioniert, überprüfen Sie Ihre URL, da dies der häufigste Grund für dieses Problem ist.

In meinem Laravel & VueJS-Projekt habe ich diesen Fehler mit der Datei webpack.mix.js behoben. Es beinhaltet

const mix = require('laravel-mix');

mix.webpackConfig({
   devServer: {
     proxy: {
       '*': 'http://localhost:8000'
     }
   },
   resolve: {
     alias: {
       "@": path.resolve(
         __dirname,
         "resources/assets/js"
       )
     }
   }
 });

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

Hier ist ein Teil des Codes, mit dem ich meine Datei server.js in den Winkel dist- Ordner leite , der nach dem Erstellen von npm erstellt wurde

// Create link to Angular build directory
var distDir = __dirname + "/dist/";
app.use(express.static(distDir));

Ich habe es behoben, indem ich zu gewechselt "/dist/"habe"./dist/"

In meinem Fall habe ich die Datei src / registerServiceWorker aus der von create-react-app generierten App gelöscht . Ich habe es hinzugefügt und jetzt funktioniert alles.