A refusé de charger la police 'data: font/woff .....', elle enfreint la directive de sécurité du contenu suivante: "default-src 'self'". Notez que 'font-src'
Mon webApp réagit 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.
Également:
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 ceci 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,
}
};
Pour moi, c'était à cause de l'extension Chrome 'Grammarly'. Après avoir désactivé cela, je n'ai pas eu l'erreur.
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;">
Pour résoudre 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/">
D'après votre expérience personnelle, il est toujours préférable de commencer par exécuter votre site dans Incognito (Chrome), Navigation privée (Firefox) et InPrivate (IE11 && Edge) pour supprimer les interférences de modules complémentaires. 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 facile pour résoudre un problème.
La raison de ma présence ici était due au fait que Web of Trust (WoT) avait ajouté du contenu à ma page et que ma page avait 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 plus une réponse sur la façon de dire à l'extension de ne pas essayer de fonctionner sur ce site par programmation. Ainsi, lorsque les utilisateurs ont des extensions, ils ne s'exécutent tout simplement pas sur mon site. J'imagine que si cela était possible, les bloqueurs de publicités auraient été bannis sur des sites depuis 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
}
};
CSP vous aide à ajouter des sources fiables en liste blanche. Toutes les autres sources ne sont pas autorisées à accéder à. Lisez cette Q & R avec précaution, puis assurez-vous d’inscrire la liste blanche des polices, connexions de socket et autres sources si vous leur faites confiance.
Si vous savez ce que vous faites, vous pouvez commenter la balise meta à tester, probablement que tout fonctionne. Mais sachez que vous/votre utilisateur êtes protégé (e) ici. Conserver la balise meta est probablement une bonne chose.
J'ai eu un problème similaire ..__J'ai 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'));
});
Je rencontrais également la même erreur dans mon application de noeud aujourd'hui.
Ci-dessous était 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.
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 à la place 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 signale pas explicitement l'erreur exacte.
Certains y ont fait face en raison d'extensions de navigateur, d'autres en raison de modèles d'URL incorrects. J'ai dû y faire face en raison d'une erreur dans mon instance de formGroup utilisée dans une fenêtre contextuelle de cet écran. Donc, je suggérerais à 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 par le débogage.
Si rien d'autre ne fonctionne, vérifiez votre URL car c'est la raison la plus courante de ce problème.
Je faisais face à un problème similaire.
- 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 - consiste à indiquer au navigateur de charger la police à partir de src, qui est ensuite spécifiée. font-src: 'self' - indique le chargement de la famille de polices dans la même origine ou le même système. font-src: 'self' data: - indique au chargement de la famille de polices dans la même origine et aux appels passés pour obtenir des données:
Vous pouvez également recevoir un avertissement "** Échec de la 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: fonte 'self'
Cela devrait maintenant 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 le mettre dans une feuille de style dédiée.
Si votre projet est vue-cli et que vous exécutez npm run build, vous devriez changer
assetsPublicPath: '/' à assetsPublicPath'./'