Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”)
The CSP can be defined either in your index.html (front-end) or in the web server (back-end).
In case of front end, you should find something like:
<html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=11"/> <meta http-equiv="Cache-Control" content="no-cache"/> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self';"/> <title> </title> </head> According to your error message, you need to replace
default-src 'none'by
default-src 'self'As for the back-end, apparently there is no CSP reference in your NodeJS code.
I highly suggest to secure your headers with helmet library (https://helmetjs.github.io/), but you need to be careful because by default helmet will block your page scripts e.g. AJAX requests, so when using defaults you will get error such as: Content Security Policy: The page's settings blocked the loading of a resource at inline ("default/src") or similar, to fix this I needed to write helmet options manually.
In my project I was using the following configuration:
app.use( helmet.contentSecurityPolicy({ useDefaults: false, "block-all-mixed-content": true, "upgrade-insecure-requests": true, directives: { "default-src": [ "'self'" ], "base-uri": "'self'", "font-src": [ "'self'", "https:", "data:" ], "frame-ancestors": [ "'self'" ], "img-src": [ "'self'", "data:" ], "object-src": [ "'none'" ], "script-src": [ "'self'", "https://cdnjs.cloudflare.com" ], "script-src-attr": "'none'", "style-src": [ "'self'", "https://cdnjs.cloudflare.com" ], }, }), helmet.dnsPrefetchControl({ allow: true }), helmet.frameguard({ action: "deny" }), helmet.hidePoweredBy(), helmet.hsts({ maxAge: 123456, includeSubDomains: false }), helmet.ieNoOpen(), helmet.noSniff(), helmet.referrerPolicy({ policy: [ "origin", "unsafe-url" ] }), helmet.xssFilter()I disabled default to write everything manually, since I might have external scripts, requests etc. so I needed to define them additionally.
This configuration will solve blocked resource errors like:
- Content Security Policy: The page's settings blocked the loading of a resource at inline ("default/src")
- Content Security Policy: The page's settings blocked the loading of a resource at inline ("img/src")
- Content Security Policy: The page's settings blocked the loading of a resource at inline ("script/src")