Refusé de charger la police «data: font / woff…», elle enfreint la directive de politique de sécurité du contenu suivante: «default-src 'self'». Notez que 'font-src'

My React WebApp donne cette erreur dans la console du navigateur

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 de la console du navigateur

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

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

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

font-src 'self' data:;

Donc, index.html meta devrait lire:

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

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

J'ai dû 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;">

D'après votre expérience personnelle, il est toujours préférable d'exécuter votre site dans Incognito (Chrome), Navigation privée (Firefox) et InPrivate (IE11 && Edge) pour supprimer les interférences des modules complémentaires / extensions. Ceux-ci peuvent toujours interférer avec les tests dans ce mode s'ils sont activés explicitement dans leurs paramètres. Cependant, il s'agit d'une première étape simple pour résoudre un problème.

La raison pour laquelle je suis ici est due au fait que Web of Trust (WoT) ajoute du contenu à ma page et que ma page a une politique de sécurité du contenu très stricte:

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 causé de nombreuses erreurs. Je cherchais davantage une réponse sur la façon de dire à l'extension de ne pas essayer de fonctionner sur ce site par programme. De cette façon, lorsque les gens ont des extensions, ils ne fonctionneront tout simplement pas sur mon site. J'imagine que si cela était possible, les bloqueurs de publicités auraient été interdits sur les sites il y a longtemps. Donc mes recherches sont un peu naïves. J'espère que cela aidera toute autre personne essayant de diagnostiquer un problème qui n'est pas spécifiquement lié à la poignée d'extensions mentionnées dans d'autres réponses.

Vous devrez peut-être ajouter ceci à webpack.config.js:

devServer: {

        historyApiFallback: true
    }
};

J'étais également confronté à la même erreur dans mon application de nœud aujourd'hui.

Ci-dessous se trouvait mon API de nœud.

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

Le correctif était très simple, il me manquait une barre oblique "/" avant mon API. Ainsi, après avoir changé le chemin de «azureTable» à «/ azureTable», le problème a été résolu.

CSP vous aide à mettre sur liste blanche les sources auxquelles vous faites confiance. L'accès à toutes les autres sources n'est pas autorisé. Lisez attentivement ces questions et réponses , puis assurez-vous de mettre sur liste blanche les polices, les connexions de socket et les autres sources si vous leur faites confiance .

Si vous savez ce que vous faites, vous pouvez commenter la metabalise à tester, probablement tout fonctionne. Mais sachez que vous / votre utilisateur êtes protégé ici, alors garder la metabalise est probablement une bonne chose.

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

"outputPath": "dist/",

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

J'étais confronté à un problème similaire.

1. Vous devez supprimer tous les paramètres CSP qui sont sélectionnés par défaut et comprendre pourquoi chaque attribut est requis.

font-src - est de dire au navigateur de charger la police de src qui est spécifiée par la suite. font-src: 'self' - cela indique de charger la famille de polices dans la même origine ou le même système. font-src: 'self' data: - cela indique le chargement de font-family dans la même origine et les appels effectués pour obtenir des données:

Vous pouvez également recevoir l'avertissement "** Échec du décodage de la police téléchargée, erreur d'analyse OTS: balise de version non valide **" Ajoutez l'entrée suivante dans CSP.

font-src: police 'self'

Cela devrait maintenant se charger sans erreur.

Vous auriez utilisé des styles en ligne à de nombreux endroits, ce que CSP (Content Security Policy) interdit car cela pourrait être dangereux.

Essayez simplement de supprimer ces styles en ligne et de les mettre dans une feuille de style dédiée.

J'ai eu le même problème et qui a été résolu en utilisant ./avant le nom du répertoire dans mon node.jsapplication, c'est-à-dire

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

Pour moi, c'était à cause de l'extension ipfs dans un navigateur courageux

Le paramètre «Bloquer les polices distantes» de l' extension de navigateur uBlock provoquera cette erreur. (Remarque: la grammaire n'était pas le problème, du moins pour moi.)

Ce n'est généralement pas un problème. Lorsqu'une police distante est bloquée, vous revenez à une autre police et un avertissement de console indiquant «ERR_BLOCKED_BY_CLIENT» est émis. Cependant, cela peut être un problème sérieux lorsqu'un site utilise Font Awesome, car les icônes s'affichent sous forme de cases.

Un site Web ne peut pas faire grand-chose pour résoudre ce problème (mais vous pouvez éviter que cela ne soit trop mauvais en étiquetant par exemple les icônes basées sur les polices). Changer le CSP (ou en ajouter un) ne le résoudra pas. Servir les polices à partir de votre site Web (et non d'un CDN) ne le résoudra pas non plus.

L'utilisateur uBlock, quant à lui, a le pouvoir de résoudre ce problème en effectuant l'une des opérations suivantes:

• Décochez l'option globalement dans le tableau de bord de l'extension
• Accédez à votre site Web et cliquez sur l'icône d'extension, puis sur l' icône `` A '' barrée pour ne pas bloquer les polices uniquement pour ce site
• Désactivez uBlock pour votre site en l'ajoutant à la liste blanche dans le tableau de bord de l'extension

Si votre projet est vue-cli et que vous exécutez, npm run buildvous devez changer

assetsPublicPath: '/' à assetsPublicPath'./'

J'ai eu le même problème et il s'est avéré qu'il y avait une erreur dans le répertoire du fichier que j'essayais de servir au lieu de:

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

J'ai eu :

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

J'ai également rencontré le même problème aujourd'hui dans mon code en cours d'exécution. Eh bien, j'ai trouvé beaucoup de réponses ici. Mais la chose importante que je veux mentionner est que ce message d'erreur est assez ambigu et ne souligne pas explicitement l'erreur exacte.

Certains l'ont fait face à des extensions de navigateur, d'autres à des modèles d'URL incorrects et j'ai été confronté à cela en raison d'une erreur dans mon instance formGroup utilisée dans une fenêtre contextuelle de cet écran. Donc, je suggère à tout le monde qu'avant d'apporter de nouvelles modifications à votre code, veuillez déboguer votre code et vérifier que vous n'avez pas de telles erreurs. Vous trouverez certainement la raison réelle en déboguant.

Si rien d'autre ne fonctionne, vérifiez votre URL car c'est la raison la plus courante de ce problème.

Dans mon projet laravel & VueJS, j'ai résolu cette erreur avec le fichier webpack.mix.js. Il contient

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

Voici une partie du code que j'utilise pour diriger mon fichier server.js vers le dossier angular dist , qui a été créé après la construction de npm

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

Je l'ai corrigé en changeant "/dist/"en"./dist/"

Dans mon cas, j'ai supprimé src / registerServiceWorker fichier de l'application générée par create-react-app. Je l'ai ajouté et maintenant tout fonctionne.