I am making a React app where I use React router, and on the backend nodejs + express. My task, when contacting http://example.ru, I give one react application, and when http://example.ru/admin another. The problem is that if I go to http://example.ru/shop via react router (NavLink) my CSP settings work. But if I use the browser address bar, then the CSP settings do not work, or rather they work only on http://example.ru.
My CSP settings
<meta http-equiv="Content-Security-Policy" content="default-src *; img-src http://localhost:3001 https://sun9-23.userapi.com https://steamcdn-a.akamaihd.net https://gspics.org data:">
Error if you go to http://example.ru/shop through the browser address bar
https://i.stack.imgur.com/CMV9b.png
In browser developer tools, there is a meta tag.
https://i.stack.imgur.com/S15C7.png
If you want to load an external image, you need to include its domain in the img-src policy, which in this case is https://i.stack.imgur.com.
You should also replace http://localhost:3001 with 'self'.
Your meta tag should be:
<meta http-equiv="Content-Security-Policy" content="default-src *; img-src 'self' https://sun9-23.userapi.com https://steamcdn-a.akamaihd.net https://i.stack.imgur.com https://gspics.org data:">
Related
I added host to host_pernissions and content_security_policy.extension_pages: "default-src 'self'; connect-src 'self' https://example.org/;"
I tryed sending reqs with mode: cors and credentials: include but it did not help.
In developer tools we can enable show filtered out request cookies and we will see all discarded cookies:
Solved, you need set SameSite cookie to None
I want to add these libs to my app.
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-database.js" crossorigin="anonymous"></script>
The server is run on localhost.
But the console says it cannot access the script to CORS policy. I searched and tried all solutions but nothing worked. Please help.
The server doesn't allow CORS access to those scripts, so either stop asking for CORS access (remove the crossorigin attribute) or reconfigure the server to grant permission with a Access-Control-Allow-Origin response header.
NOTICE: Revised issue down below at the EDIT section.
I've been learning about Content-Security-Policies in an attempt to learn various security concepts, because I am building a website from scratch. I realize it may not be a huge deal since I won't be receiving any user input, however I want to learn these concepts and begin to apply them to keep my site from being vulnerable to things like Javascript injection.
In my server.js file, I serve my pages via Express in the following code:
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "/views/home.html"));
});
To add the Content-Security-Policy (CSP) to my server code, I added the following code before the above code, and before using Express to serve static files:
//the following code is called right after the creation of the express server
app.use(function(req, res, next) {
res.setHeader("Content-Security-Policy", "default-src 'self'; script-src 'self' https://apis.google.com");
return next();
});
//static css/js/img files served here:
app.use('/public', express.static(__dirname + '/public'));
//then the app.get method I defined above
I restarted my node server, opened up chrome, went to http://localhost:8080 where I have my node website listening, and as expected, my home page wasn't loading the various external scripts, CDNs, and external styles I have in my project.
After seeing that the CSP worked, I decided to remove the entire app.use function that set the CSP so I could create my list of directives so I could add the CSP later.
I removed that code block, saved, restarted the node server, and when I opened up Google Chrome, I was still getting notices under the security tab in the Chrome Dev Tools saying that all of my external content was being blocked due a violation of "default-src 'self'" or the "script-src 'self'" directives - again, this is after I removed the CSP code above from my server file. However, when I opened up my application in Safari, everything loaded fine. Why is Chrome still blocking content even though I removed the code to set a CSP in the HTTP headers in my server code?
EDIT: I ended up reseting my Chrome settings which fixed the issue. However, I'm unsure of which setting to go to in Chrome now, rather than resetting all settings. Also obviously the CSP only applied to the home page in that instance, I would need to set the CSP within each html page's GET method, yes?
We have deployed the api on azure and trying to consume in our web app written in angular 5. However when we try to consume the api we are getting following errors.
Chrome Mixed Content: The page at 'https://somedevapp.azurewebsites.net/#/managesomething' was loaded
over HTTPS, but requested an insecure XMLHttpRequest endpoint
'http://admindevapp.azurewebsites.net/api/data/getdata'. This request
has been blocked; the content must be served over HTTPS.
Firefox Blocked loading mixed active content
Is this issue related to CORS? How to resolve this issue?
Any help on this appreciated!
If your web app is being hosted over HTTPs as you've indicated, then all external resources it is consuming (CDN, scripts, CSS files, API calls) should also use SSL and be secured through HTTPs. Think about it. It would defeat the purpose of your app being secure, if your app was in turn making insecure requests to an API.
You can either therefore:
As Chrome suggests, change your API calls to use HTTPs (recommended)
Use HTTP instead of HTTPs
Add the following meta tag to your <head> element in your HTML:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
More information about this can be found here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests.
Use this ---- Add in your head section
I will try this with my weather application & now it's working fine
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
only add this on header section.
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
you can use this only if your resource API supports the HTTPS request.
example: "http://ip-api.com/json" and "https://ip-api.com/json" both will not return the same response if "ip-api.com" doesn't support HTTPS requests.
The meta tag below helps to prevent Chrome complaining about HTTP request made. I was working on a class projects (a weather app) and the API call over HTTP and adding an S to the HTTP call doesn't help. Since this a project a there no major issue. The meta tag share above by #Medhi Ibrahim does the trick.
<meta
http-equiv="Content-Security-Policy"
content="upgrade-insecure-requests"
/>
i tried to remove the "meta solution" on index.
And removed the "s" on environment.prod.ts
When i sign in " http://app.finoview.com" the api Nestjs works.
But when i try to log in "https://finoview.com", angular works, but the api nestjs doesnt work.
Here is the image:
Greeting All ,
i have just started implementing CSP in my website development.
i have Nodejs/express server that serves react js with redux and react router 4
i have used create react app for frontend
i found that in nodejs there is a module called helmet and csp that i have implemented them
and i managed to get the response header as shown in the image below
but nothing happend in the frontend app unless i add the meta tag
<meta http-equiv="Content-Security-Policy" content=" frame-src 'none'">
by this meta tag i was able successfully not to load any iframe in the page but could not manage to do that without the tag
so here is my questions
is there a need for nodejs helmet module in my app ?
if so then how to integrate the nodejs helmet module with my react app
is using the meta tag of CSP in the index.html the preferred way to do it
any help is appreciated thanks
In your example, the header set by helmet: x-frame-options has the value 'SAMEORIGIN', in your meta tag it's 'none'. They just have different values, that's why the different behaviour.
Just change the config:
// ... code to create your express instance here
app.use(helmet({
frameguard: {
action: 'deny'
}
// other helmet settings...
}));
// other app middleware and starting express here...
Always use the HTTP headers rather than the meta tag. Meta tags are just DOM elements, hence can be tampered with. Not so easily with headers and by using headers you ask browsers to comply with your CSP.
RFC 7034:
Furthermore, X-Frame-Options must be sent as an HTTP header field and
is explicitly ignored by user agents when declared with a meta
http-equiv tag.