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

Question

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

nothing change ` ; ` still give Error – MD Ashik Jul 28 '17 at 07:08 — MD Ashik, Jul 28 '17 at 07:08

score 292 · Accepted Answer · answered Jun 04 '18 at 02:00

292

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

answered Jun 04 '18 at 02:00

Subhashi

4,145
1
23
22

17

What a silly hack for this. can't even imagine the problem is due to Grammarly chrome app. – Pardeep Jain Jul 20 '18 at 07:50
6

I can't believe I spent couple of hours trying to realize what was going on and it was being caused by Grammarly app. Just remove that tash! – Andre Evangelista Aug 17 '18 at 16:55
4

Dangit, Grammarly! I had two other developers helping me with this issue to no resolve. We thought we incorrectly implemented our content security policy. Removed my Grammarly expension from Chrome and the errors went away. Thanks or this tip! – amlane86 Aug 20 '18 at 15:07
7

Note: only "disabling" on the plugin config dropdown is not enough, you have to remove or disable it on the chrome plugins pages – Juan Biscaia Sep 24 '18 at 15:53
2

Same issue with my Angular app. This fixed it right up! – Stack Underflow Jan 25 '19 at 23:43
1

OMG, Thanks for this, I assigned this as an issue to the my angular developer. I should close that issue now. – manikantanr Feb 01 '19 at 16:42
1

What the hell with grammerly :S – Abubakar Ikram Feb 26 '19 at 14:37
1

LOL this is ilarious (sorry for my grammar, I disabled Grammarly xD ) – Piyey Jun 05 '19 at 21:54
1

How the hell you find this out? I did google for half hour but at last your answer yielded results.. Thanks Girl!! – Ranger Jul 22 '19 at 01:53
1

Yeah this was the issue -__- – Disapamok Nov 27 '19 at 08:25
2

I had to disable the Markdown Viewer v3.9 Chrome Extension ID ckkdlimhmcjmikdlpkmbgfkaikojcbjk – wnm3 May 05 '20 at 21:12
1

The same happened to me on Grammarly for Firefox and Safari – Sudara May 15 '20 at 12:38
5

The `Save to Pocket` extension can also cause this in Edge and Chrome. – sevenam Dec 21 '21 at 11:21
1

Removing the "Save to Pocket Extension" worked for me as well. @johnbt Do you have a workaround for making sure I can use the extension still without it breaking my browsing experience – Anshuman Kumar Jun 07 '22 at 11:41
1

@anshuman-kumar: No sorry... just wanted to share the information in case it would be helpful to anyone else. Maybe getpocket support can help you though. – sevenam Jun 08 '22 at 12:32
1

Yeah I have reported the bug to them @johnbt – Anshuman Kumar Jun 08 '22 at 16:12
@sevenam Jesus Christ; I've spent over an hour looking for the cause. I'll go file a bug report too. – RobIII Aug 21 '23 at 22:30

score 125 · Answer 2 · answered Aug 07 '18 at 16:13

125

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

answered Aug 07 '18 at 16:13

nourish

1,425
1
11
9

1

Thanks this solves the problem as well. Consider that for some users it is not viable to disable the extension, and your site will avoid issues with any possible extension loading assets locally :) – JuanDMeGon Oct 02 '18 at 00:35
4

I think this will leave your site insecure to bad extensions and would advise against it without further research. – binz Dec 05 '19 at 14:32
Is it required to specify `http://121.0.0:3000/` while using 'self' already ? – Saurabh Tiwari Jan 28 '20 at 07:35
THIS is why stackoverflow exists! Thank you so much @nourish – Fausto T. Toloi Aug 03 '22 at 15:42
1

So, my answer is popular, but, to everyone who is going to use it: make sure you understand security implications as well. Spend some time and read something useful about content security policies. – nourish Aug 04 '22 at 16:16

score 29 · Answer 3 · answered Aug 08 '17 at 08:21

29

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

answered Aug 08 '17 at 08:21

JackDev

4,891
1
39
48

2

but I was Use Fonts from my local computer so what i will be write hare ?? `data: fonts.gstatic.com` – MD Ashik Aug 08 '17 at 16:39
6

@JavaScriptLearner - in that case you can just try data: – JackDev Aug 09 '17 at 10:34

score 17 · Answer 4 · answered Sep 03 '18 at 17:17

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.

Yeah I had a whole bunch of CSP-Report-Only (I'm just using Report-Only for now) errors in the Dev Tools console but they didn't make sense and were referring to a CSP that apppeared out of date since I had modified it. I disabled the "Content Security Policy Generator" extension and that fixed those weird errors, lol. — clamum, Aug 31 '22 at 15:49

score 13 · Answer 5 · edited Nov 16 '21 at 21:58

13

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

devServer: {
    historyApiFallback: true
}

edited Nov 16 '21 at 21:58

Zach Saucier

24,871
12
85
147

answered Jul 14 '19 at 04:20

Ahmad Habony

139
1
3

score 6 · Answer 6 · answered Mar 18 '19 at 13:21

I was facing similar issue.

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.

score 3 · Answer 7 · answered Jul 28 '17 at 08:09

3

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.

answered Jul 28 '17 at 08:09

Sventies

2,314
1
28
44

1

Thanks For Nice answer but Still I can solve `Refused to load the font 'data:font/woff;base64,d09` this error – MD Ashik Jul 28 '17 at 10:54
2

But this meta Solve Maximum Error: ` – MD Ashik Jul 28 '17 at 10:56

score 3 · Answer 8 · answered Jan 16 '19 at 13:01

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

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.

score 2 · Answer 9 · edited May 24 '18 at 09:26

2

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

edited May 24 '18 at 09:26

DaFois

2,197
8
26
43

answered May 24 '18 at 08:46

Pramod

424
2
7
28

score 2 · Answer 10 · answered Mar 25 '20 at 16:51

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

score 1 · Answer 11 · answered Nov 11 '18 at 17:15

1

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.

answered Nov 11 '18 at 17:15

Harshal

7,562
2
30
20

score 1 · Answer 12 · edited Feb 01 '19 at 17:14

1

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

edited Feb 01 '19 at 17:14

Andrew

26,706
9
85
101

answered Feb 01 '19 at 17:05

CriptoGirl

51
2

score 1 · Answer 13 · answered Jan 22 '20 at 09:51

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

score 1 · Answer 14 · answered Feb 28 '20 at 18:15

1

For me it was because of ipfs extension in brave browser

answered Feb 28 '20 at 18:15

Kantanand US

108
1
1
7

score 0 · Answer 15 · edited Oct 12 '18 at 04:50

0

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

assetsPublicPath: '/' to assetsPublicPath'./'

edited Oct 12 '18 at 04:50

Henry Woody

14,024
7
39
56

answered Oct 12 '18 at 04:00

chengheai

1

score 0 · Answer 16 · answered Apr 02 '19 at 20:16

0

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

answered Apr 02 '19 at 20:16

Ray Lin

9
1

score 0 · Answer 17 · answered Jul 02 '19 at 05:05

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.

score 0 · Answer 18 · answered Nov 11 '19 at 13:25

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

score 0 · Answer 19 · answered Feb 19 '22 at 20:19

0

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.

answered Feb 19 '22 at 20:19

Keshav Gupta

41
5

score -1 · Answer 20 · answered Sep 05 '18 at 15:29

-1

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

answered Sep 05 '18 at 15:29

Ritwik

1,597
16
17

score -1 · Answer 21 · answered Dec 07 '21 at 10:56

-1

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

answered Dec 07 '21 at 10:56

Swapnil Sourabh

459
4
17

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

21 Answers21

Linked