CODEWITHSUNDEEP
javascriptnode.jsexpresscompiler-errorscontent-security-policy
Cyborg7459
Cyborg7459

Reputation: 167

Violation of Content Security Policy directive

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

enter image description here

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

Upvotes: 1

Views: 3211

Answers (2)

granty
granty

Reputation: 8546

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.

Upvotes: 0

Nikas music and gaming
Nikas music and gaming

Reputation: 1282

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

Upvotes: 1

Related Questions