Refused to load the font 'data:font/woff…'it violates the following Content Security Policy directive: “default-src 'self'”. Note that 'font-src'

匿名 (未验证) 提交于 2019-12-03 02:16:02

问题:

My react webApp give this Error in Browser 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. 

Also:

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 of browser console

index.html Have this 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,     } }; 

回答1:

For what it's worth - I had a similar issue, assuming it's related to a Chrome update.

I had to add font-src, and then specify the url because I was using a CDN

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


回答2:

CSP helps you whitelisting sources that you trust. All other sources are not allowed access to. Read this Q&A carefully, and then make sure that you whitelist the fonts, socket connections and other sources if you trust them.

If you know what you are doing, you can comment out the meta tag to test, probably everything works. But realise that you / your user is being protected here, so keeping the meta tag is probably a good thing.



回答3:

JavaScript Learner: If you add unsafe-inline you are giving up most of the protection CSP offers.



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!