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    lt meta http-equiv  Content-Security-Policy  content  img-src  self  data   default-src  self  http   121 0 0 3000   gt    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

User · Answer

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

User · Answer

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   lt meta http-equiv  Content-Security-Policy  content  default-src  self   font-src  self  data  fonts gstatic com   gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

In my laravel  amp  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

User · Answer

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

User · Answer

You may need to add this to webpack config js   devServer             historyApiFallback  true

User · Answer

CSP helps you whitelisting sources that you trust  All other sources are not allowed access to  Read this Q amp 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

User · Answer

From personal experience  it is always a best  first step to run your site in Incognito  Chrome   Private Browsing  Firefox   and InPrivate  IE11  amp  amp  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

User · Answer

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

User · Answer

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    x000D   x000D  app use express static   dirname        dist     x000D   x000D   x000D    I had     x000D   x000D  app use express static    dist     x000D   x000D   x000D

User · Answer

For me it was because of ipfs extension in brave browser

User · Answer

I had a similar issue  I had mentioned a wrong output folder path in angular json    outputPath    dist     app get       req  res    gt        res sendFile path join   dirname   dist index html

User · Answer

I was also facing the same error in my node application today      Below was my node API   app get  azureTable    req  res    gt      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    gt        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

User · Answer

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

User · Answer

To fix this specific error  CSP should include this   font-src  self  data     So  index html meta should read    lt meta http-equiv  Content-Security-Policy  content  font-src  self  data   img-src  self  data   default-src  self  http   121 0 0 3000   gt

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

Examples related to javascript

Examples related to reactjs

Examples related to webpack