A refusé de charger la police 'data: font / woff .....', elle enfreint la directive suivante relative à la politique de sécurité du contenu: "default-src 'self'". Notez que 'font-s

Question

Mon réagir webApp donner cette Erreur dans le Navigateur de la Console

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.

Aussi:

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.

Capture d'écran du navigateur de la console

index.html Avoir cette méta:

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

Answer 1

Pour moi, c'était à cause de l'extension Chrome 'Grammarly'. Après avoir désactivé cela, je n’ai pas eu l’erreur.

Answer 2

Pour corriger cette erreur spécifique, CSP doit inclure ceci:

 font-src 'self' data:;
 

Donc, index.html meta devrait se lire:

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

Answer 3

Pour ce que ça vaut - j'ai eu un problème similaire, en supposant qu'il soit lié à une mise à jour de Chrome.

Je devais ajouter font-src, puis spécifier l'URL car j'utilisais un CDN

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

Answer 4

Par expérience personnelle, il est toujours le meilleur des cas, la première étape pour exécuter votre site dans Incognito (Chrome), la Navigation Privée (Firefox), et InPrivate (IE11 && Edge) pour supprimer l'interférence des modules complémentaires/extensions. Ceux-ci peuvent interférer avec les tests dans ce mode, si ils sont activés de manière explicite dans leurs paramètres. Cependant, il est facile de première étape de la résolution d'un problème.

La raison pour laquelle je suis ici, a été en raison de Web of Trust (WoT) l'ajout de contenu de ma page, et ma page ayant très strict de la Sécurité du Contenu de la Politique:

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';"

Cela a provoqué de nombreuses erreurs. J'étais à la recherche de plus pour une réponse sur la façon de raconter l'extension de ne pas essayer de l'exécuter sur ce site par programmation. De cette façon, quand les gens ont des extensions, ils ont juste ne fonctionne pas sur mon site. J'imagine que si c'était possible, les bloqueurs de publicité aurait été interdits sur les sites il y a longtemps. Donc ma recherche est un peu naïf. Espérons que cela aide quelqu'un d'autre qui tente de diagnostiquer un problème qui n'est pas spécifiquement liée à la poignée des extensions dans d'autres réponses.

Answer 5

J'ai eu un problème similaire. J'avais mentionné un chemin de dossier de sortie incorrect dans angular.json

 "outputPath": "dist/",

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