Content Security Policy issue node js react

Question

I am working on a react project in node js. I have two external sources in my index.html as

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Beside that I have a post request to the server that still due to CSP, the connection is failed. The post request failure is:

Refused to connect to 'localhost:3000/visitor' 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.

For the external links I got some errors regarding to Content Security Policy which I show one of them in the below.

Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

I did two strategies and none of the resolved my problem:

1. meta data by pass:

above all the script tags in index.html to basically have open to load any type of external files via script tag but still I get the same error in the browser and such js files does not load in my app

2. In my node js I used helmet module as the below:

app.use(helmet({

  contentSecurityPolicy: false,

}));

What should I do to fix this problem that does not let the application work correctly?

Answer 1

I did two strategies and none of the resolved my problem: 1- meta data by pass:

 <meta http-equiv="Content-Security-Policy" content="...">

Content Security Policy can be delivered in 2 ways: HTTP header and <meta> . You have one restrictive CSP via HTTP header and have add the second via <meta> . 2 CSP work as 2 consequented filters, only soures passed through both will allowed. Therefore the <meta> do allow nothing additional to the header's CSP. Instead of <meta> you need to add sources to the first CSP, something like that:

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"], 
        scriptSrc: ["'self'", "'unsafe-inline'",  'https://ajax.googleapis.com', 'https://stackpath.bootstrapcdn.com'],
        styleSrc: ["'self'"],
        imgSrc: ["*", 'data:'],
        connectSrc: ["'self'"],
        frameSrc: ["'self'"],
      },
    }
  })
);

this workaround will help to solve second error message.

2- In my node js I used helmet module as the below:

 app.use(helmet({ contentSecurityPolicy: false, }));

This totally switch Off the CSP header, so it helps to avoid Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'... error.

But the first error Refused to connect to 'localhost:3000/visitor' because it violates the following Content Security Policy directive: "default-src 'self'" still remain.
This happens because you do not have a route on the server for localhost:3000/visitor URL, therefore you get 404 Not found error.

NodeJS finalhandler serving the error pages, has it's own CSP default-src 'self' for safety so you observe error in CSP not you manage.
Make correct static route for /visitor URL and this error disappears.