CODEWITHSUNDEEP
javascriptreactjswebpack
MD Ashik
MD Ashik

Reputation: 9835

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

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

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

Upvotes: 180

Views: 229300

Answers (22)

Ali
Ali

Reputation: 325

for webpack.config.js file

new CspHtmlWebpackPlugin({
        'font-src': ["'self'", "data:"]
    }),

Upvotes: 0

Keshav Gupta
Keshav Gupta

Reputation: 41

if it says report only, refused to execute content policy error. Then the warning can be ignored and it may be caused by the page shield feature on cloudflare.

Upvotes: 0

Swapnil Sourabh
Swapnil Sourabh

Reputation: 519

Running my frontend application on a different port worked for me.

Initially I had ng serve --port 3000 which I later changed to ng serve --port 5000

Upvotes: -1

Ahmad Habony
Ahmad Habony

Reputation: 159

You may need to add this to webpack.config.js:

devServer: {
    historyApiFallback: true
}

Upvotes: 15

Laurel
Laurel

Reputation: 6173

The browser extension uBlock’s setting “Block remote fonts” will cause this error. (Note: Grammarly was not the problem, at least for me.)

Usually this isn’t a problem. When a remote font is blocked, you fall back to some other font and a console warning saying “ERR_BLOCKED_BY_CLIENT” is issued. However, this can be a serious problem when a site uses Font Awesome, because the icons show as boxes.

There’s not much a website can do about fixing this (but you can prevent it from being too bad by e.g. labeling font-based icons). Changing the CSP (or adding one) will not fix it. Serving the fonts from your website (and not a CDN) will not fix it either.

The uBlock user, on the other hand, has the power to fix this by doing one of the following:

  • Uncheck the option globally in the dashboard for the extension
  • Navigate to your website and click on the extension icon, then on the crossed out ‘A’ icon to not block fonts just for that site
  • Disable uBlock for your site by adding it to the whitelist in the extension’s dashboard

Upvotes: 2

Kantanand US
Kantanand US

Reputation: 108

For me it was because of ipfs extension in brave browser

Upvotes: 1

Amila Weerasinghe
Amila Weerasinghe

Reputation: 849

Here is a part of code I use to direct my server.js file to angular dist folder, which was created after npm build

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

I fixed it by changing "/dist/" to "./dist/"

Upvotes: 1

Ahmed Tareque
Ahmed Tareque

Reputation: 161

In my laravel & VueJS project I solved this error with webpack.mix.js file. It contains 

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

Upvotes: 0

Praveen
Praveen

Reputation: 119

I also faced the same issue today in my running code. Well, I found a lot of answers here. But the important thing I want to mention is that this error message is quite ambiguous and doesn't explicitly point out the exact error.

Some faced it due to browser extensions, some due to incorrect URL patterns and I faced this due to an error in my formGroup instance used in a pop-up in that screen. So, I would suggest everyone that before making any new changes in your code, please debug your code and verify that you don't have any such errors. You will certainly find the actual reason by debugging.

If nothing else works then check your URL as that is the most common reason for this issue.

Upvotes: 0

Ray Lin
Ray Lin

Reputation: 9

I had the same issue and it turns out there was an error in the directory of the file I was trying to serve instead of:

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

I had :

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

Upvotes: 0

Eshaan Kumar
Eshaan Kumar

Reputation: 69

I was facing similar issue.

  1. You need to remove all the CSP parameter which are picked up by default and understand why each attribute is required.

font-src - is to tell the browser to load the font's from src which is specified after that. font-src: 'self' - this tells to load font family within the same origin or system. font-src: 'self' data: - this tells load font-family within the same origin and the calls made to get data:

You might also get warning "** Failed to decode downloaded font, OTS parsing error: invalid version tag **" Add the following entry in CSP.

font-src: 'self' font

This should now load with no errors.

Upvotes: 6

CriptoGirl
CriptoGirl

Reputation: 51

I had the same problem and which got resolved by using ./ before the directory name in my node.js app, i.e.

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

Upvotes: 1

Sibeesh Venu
Sibeesh Venu

Reputation: 21719

I was also facing the same error in my node application today.

enter image description here

Below was my node 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)
  });
});

The fix was very simple, I was missing a slash "/" before my API. So after changing the path from 'azureTable' to '/azureTable', the issue was resolved.

Upvotes: 3

Harshal
Harshal

Reputation: 8310

You would have used inline styles at many places, which CSP(Content Security Policy) prohibits because it could be dangerous.

Just try removing those inline styles and put it inside dedicated stylesheet.

Upvotes: 1

chengheai
chengheai

Reputation: 1

If your project is vue-cli and you run npm run build you should change

assetsPublicPath: '/' to assetsPublicPath'./'

Upvotes: 0

Ritwik
Ritwik

Reputation: 1725

In my case, I deleted src/registerServiceWorker file from create-react-app generated app. I added it and now it's all working.

Upvotes: -1

brightmatter
brightmatter

Reputation: 192

From personal experience, it is always a best, first step to run your site in Incognito (Chrome), Private Browsing (Firefox), and InPrivate (IE11 && Edge) to remove the interference of add-ons/extensions. These can still interfere with testing in this mode if they are enabled explicitly in their settings. However, it is an easy first step to troubleshooting an issue.

The reason I am here, was due to Web of Trust (WoT) adding content to my page, and my page having had very strict Content Security Policy:

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

This caused many errors. I was looking more for an answer on how to tell the extension to not try and run on this site programatically. This way when people have extensions, they just won't run on my site. I imagine if this were possible, ad blockers would have been banned on sites long ago. So my research is a bit naive. Hope this helps anyone else trying to diagnose an issue that is not specifically tied to the handful of mentioned extensions in other answers.

Upvotes: 20

nourish
nourish

Reputation: 1655

To fix this specific error, CSP should include this:

font-src 'self' data:;

So, index.html meta should read:

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

Upvotes: 148

Subhashi
Subhashi

Reputation: 4081

For me it was because of the Chrome extension 'Grammarly'. After disabling that, I did not get the error.

Upvotes: 302

Pramod
Pramod

Reputation: 434

I had a similar issue. I had mentioned a wrong output folder path in angular.json 

"outputPath": "dist/",

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

Upvotes: 2

JackDev
JackDev

Reputation: 5062

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

Upvotes: 31

Sventies
Sventies

Reputation: 2756

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.

Upvotes: 3

Related Questions