it-swarm.com.de

Weigerte sich, die Schriftart "data: font/woff ....." zu laden, verstößt sie gegen die folgende Richtlinie für Inhaltssicherheitsrichtlinie: "default-src 'self'". Beachten Sie, dass 'font-src'

Meine WebApp reagieren 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 enter image description here

index.html Diese meta haben:

<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,
    }
};
46

Für mich war es wegen der Chrome-Erweiterung 'Grammarly'. Nach dem Deaktivieren habe ich den Fehler nicht erhalten.

110
Hydrogirl

Für 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;">
13
IonicBurger

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

font-src 'self' data:;

Index.html meta 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/">
10
nourish

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 Interferenzen von Add-Ons/Erweiterungen zu entfernen. Diese können den Test in diesem Modus dennoch beeinträchtigen, wenn sie in ihren Einstellungen explizit aktiviert sind. Es ist jedoch ein einfacher erster Schritt, um ein Problem zu beheben.

Der Grund, warum ich hier bin, war, dass Web of Trust (WoT) meiner Seite Inhalt hinzufügte und dass meine Seite sehr strikte Inhaltssicherheitsrichtlinien 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 hat viele Fehler verursacht. Ich habe mehr nach einer Antwort gesucht, wie man der Erweiterung sagt, sie sollte nicht auf dieser Site programmatisch ausgeführt werden. Wenn Benutzer Erweiterungen haben, werden sie auf meiner Website einfach nicht ausgeführt. Ich stelle mir vor, wenn dies möglich wäre, wären Werbeblocker auf Websites längst gesperrt worden. Meine Forschung ist also etwas naiv. Ich hoffe, das hilft allen anderen, die versuchen, ein Problem zu diagnostizieren, das nicht speziell an die Handvoll erweitereter Erweiterungen in anderen Antworten gebunden ist.

4
brightmatter

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

devServer: {

        historyApiFallback: true
    }
};
1
Ahmad Habony

Mit CSP können Sie Quellen, denen Sie vertrauen, als Positivliste hinzufügen. 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, Socketverbindungen und andere Quellen in der Positivliste anzeigen, wenn Sie ihnen vertrauen.

Wenn Sie wissen, was Sie tun, können Sie den Tag meta zum Testen auskommentieren, wahrscheinlich funktioniert alles. Beachten Sie jedoch, dass Sie/Ihr Benutzer hier geschützt sind. Es ist daher wahrscheinlich eine gute Sache, das Tag meta zu behalten.

1
Sventies

Ich hatte ein ähnliches Problem ... Ich hatte einen falschen Pfad für den Ausgabeordner in angle.json erwähnt 

"outputPath": "dist/",

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

Ich habe heute auch den gleichen Fehler in meiner Knotenanwendung erhalten. 

 enter image description here

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' in '/ azureTable' geändert wurde, wurde das Problem behoben. 

1
Sibeesh Venu

Ich hatte das gleiche Problem und es stellte sich heraus, dass im Verzeichnis der Datei, die ich zu bedienen versuchte, ein Fehler aufgetreten ist.

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

Ich hatte :

app.use(express.static('./dist'));
0
Ray Lin

Ich hatte das gleiche Problem, das durch Verwendung von ./ Vor dem Verzeichnisnamen in meiner node.js - App behoben wurde, d. H.

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

0
CriptoGirl

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

Einige hatten es mit Browsererweiterungen zu tun, andere mit falschen URL-Mustern, und ich hatte es mit einem Fehler in meiner formGroup-Instanz zu tun, die in einem Popup in diesem Bildschirm verwendet wurde. Daher würde ich jedem empfehlen, dass Sie, bevor Sie neue Änderungen an Ihrem Code vornehmen, Ihren Code debuggen und sicherstellen, dass Sie keine derartigen Fehler haben. Den eigentlichen Grund finden Sie sicher beim Debuggen.

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

0
Invoker

Ich hatte ein ähnliches Problem.

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

font-src - Weist den Browser an, die Schriftarten aus dem danach angegebenen src zu laden. font-src: 'self' - Damit wird festgelegt, dass die Schriftfamilie in demselben Origin oder System geladen werden soll. font-src: 'self' data: - Hiermit wird das Laden der Schriftfamilie innerhalb desselben Ursprungs und die Aufrufe zum Abrufen von Daten angegeben:

Möglicherweise wird auch die Warnung "** Fehler beim Dekodieren der heruntergeladenen Schriftart, OTS-Analysefehler: Ungültiges Versions-Tag **" angezeigt. Fügen Sie den folgenden Eintrag in CSP hinzu.

font-src: 'self' font

Dies sollte nun ohne Fehler geladen werden.

0
Eshaan Kumar

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

Versuche einfach, diese Inline-Styles zu entfernen und in ein eigenes Stylesheet zu legen.

0
anoNewb

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

assetsPublicPath: '/' bis assetsPublicPath'./'

0
chengheai