Violation of Content Security Policy directive

Question

In my full-stack project (server-side rendered) I have my bundle.js file which I am including in my base HTML file using a simple script tag, but on trying to render the page and using the JS functionality, it gives the error of violation of content security policy

This is the error I receive

I found several solutions on Stack Overflow here : Refused to load the script because it violates the following Content Security Policy directive

However none of the given solutions seem to fix the issue. Please tell how to resolve this issue

Nikas music and gaming · Answer 1 · 2020-12-02T12:33:29.070

Try this:

// Download helmet
npm install helmet

const helmet = require('helmet')

app.use(helmet());

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      "default-src": ["'self'"],
      "connect-src": ["'self'", "'unsafe-inline'"],
      "img-src": ["'self'", "data:"],
      "style-src-elem": ["'self'", "data:"],
      "script-src": ["'unsafe-inline'", "'self'"],
      "object-src": ["'none'"],
    },
  })
);

Please add some more code so I can help you more

score 0 · Answer 2 · answered Dec 03 '20 at 02:48

Guess you don't even use Content Security Policy in your project and got very surprised to get related errors.

Thing is your bundle.js creates websocket connection (in line 8769) and makes some XMLHttpRequest() or fetch() requests (in line 7655) to URLs which don't have a routing in the server.
For nonexistent pages (404 Not found) the finalhandler is performed, which publish default-src 'self' policy by default (by the way you use old software, the finalhandler after May 2019 uses default-src 'none' by default).

Your requests fall to 404 Not found page which haven't the content requested, and additionally all is block by CSP default-src 'self'.

Therefore you need to set right static routing and I think here is your right topic.

PS: it was the fact that Express does not serve the root folder by default. Here it was solved exactly the same issue with favicon.ico locked by CSP out of blue sky.

Violation of Content Security Policy directive

2 Answers2