Refused to Load the Font '<Url>' Because It Violates the Following Content Security Policy Directive Default-Src ,So Default-Src Is Used as a Fallback

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

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

Electron: Google Fonts violates Content Security Policy

Easiest way would probably be to set a Content-Security-Policy meta tag in the header of your template like this:

<head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta 
        http-equiv="Content-Security-Policy" 
        content="default-src 'self'; 
          script-src 'self'; 
          font-src 'self' https://fonts.gstatic.com;
          style-src 'self' https://fonts.googleapis.com">
    <!-- ...other stuff... -->
</head>

Guide on how to use these is here:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#multiple_content_security_policies

I'm currently in my first hours of electron myself, without react for now, and that's how I got around it and I think that's how you're supposed to do it.

Refused to load the image because it violates the following Content Security Policy directive: "default-src 'none'"

You have status code 500 Internal Server Error Server, but not 200 OK. In this case NodeJS runs the finalhandler which publish the default CSP: Content-Security-Policy: default-src 'none' for security reasons.

default-src 'none' blocks all resourses include images.

I guess you have /favicon.ico blocked, browsers loads it by default from the web pages root /, here is a similar issue was solved.

You need to fix 500 Internal Server Error Server.

Refused to load the script because it violates the following Content Security Policy directive

It was solved with:

script-src 'self' http://xxxx 'unsafe-inline' 'unsafe-eval';

Refused to Load the Font '<Url>' Because It Violates the Following Content Security Policy Directive Default-Src ,So Default-Src Is Used as a Fallback

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

Electron: Google Fonts violates Content Security Policy

Refused to load the image because it violates the following Content Security Policy directive: "default-src 'none'"

Refused to load the script because it violates the following Content Security Policy directive

Related Topics

Leave a reply