Hello everyone,
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 :
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;">
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 stupid problem that does not let the application work correctly? thanks