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
Related
Why when I add the helmet middleware to my app, the dropdown menus stops working and I get the following error in the console:
Refused to load the script 'https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.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.
This is how I added helmet to my app:
const helmet = require('helmet');
...
app.use(helmet())
Helmet maintainer here.
This is happening because of something called Content Security Policy, which Helmet sets by default. To solve your problem, you will need to configure Helmet's CSP.
MDN has a good documentation about CSP which I would recommend reading for background. After that, take a look at Helmet's README to see how to configure its CSP component.
To give some help specific to this question, let's take a look at one error you're seeing:
Refused to load the script 'https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.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.
This error is telling you that the script-src directive of your CSP does not allow JavaScript to load from cdn.jsdelivr.net, and so it was blocked.
There are several ways to fix this:
Update your CSP to allow JavaScript to load from this domain. You'd do something like this:
app.use(
helmet({
contentSecurityPolicy: {
useDefaults: true,
directives: {
"script-src": ["'self'", "cdn.jsdelivr.net"],
},
},
})
);
Refactor your app to avoid loading JavaScript from that domain. Probably not possible, but it is an available solution.
Disable CSP. This is the most dangerous option so I don't recommend it.
app.use(
helmet({
contentSecurityPolicy: false,
})
);
In summary: to solve your problem, you will need to tell Helmet to configure your CSP.
I am doing a react + node project with google sign in.
Have already configured cors with
{
origin: 'http://localhost:3000',
credentials: true
}
and using fetch with
credentials: 'include'
also I am using cookie parser middleware
and I am setting a cookie which is being sent with response header but chrome is not setting the cookie while firefox does save it.
I have seen other answers indicating that its the bug in chromium where it does not set cookies set by
localhost but a cookie named "G_AUTHUSER_H" is set with domain "localhost".
The cookie was once set but I deleted it to test again. But now chrome does not set the cookie.
I'm want to create a link in my website who download a PDF file but I get a white window with:
Cannot GET /file
and a Content Security Policy (CSP) error:
Content Security Policy: The page settings prevented a resource from loading at inline ("default-src").
I use ExpressJs and Nginx for the back-end.
I've tried to set CSP default-src header like this in my app.js file:
//Headers setup
app.use((req, res, next) => {
res.setHeader('Content-Security-Policy',"default-src 'self' https://www.mydomain.fr");
next();
});
i've also tried to add this in my .conf file in Nginx:
add_header Content-Security-Policy "default-src 'self';" always;
It is still not working. Do you have any idea what is wrong?
My router:
const express = require('express');
const router = express.Router();
const fileController = require('../controllers/file');
router.get('/', fileController.getFile);
module.exports = router;
My controller:
const path = require('path');
exports.getFile = (req, res, next) => {
res.set({'Content-Type':'application/pdf'});
res.set({'Content-Disposition':'attachment, filename=file.pdf'});
const filePath = path.join(__dirname, '/public/documents/file.pdf');
res.download(filePath, 'file.pdf', (e) => {res.status(404).json({e: e})});
}
I guess your resource is embedded inline (see the csp error).
To allow that use unsafe-inline:
app.use((req, res, next) => {
res.setHeader('Content-Security-Policy',"default-src 'self' 'unsafe-inline'");
next();
});
SabSab43, you have been given the correct leads in the comments and answers, but you shouldn't recklessly publish the CSP. You can publish CSP in several ways:
add_header in Nginx
HTTP header via res.setHeader()
specialized Helmet package
using <meta http-equiv='Content-Security-Policy' content="...CSP rules here..."> in the HTML code.
But if you do use all of above at the same time, you'll publish a several different CSPs and as result more restrictive one will acts.
Therefore remove all CSP you added and lets go step by step:
Do check the jonrsharpe's remark abt Helmet. The fact is that if you have Helmet 4 connected to Express, it issues the restrictive default-src 'self' policy by default.
Therefore after removing all your CSPs, check do you have CSP header in browser, tutorial is here. If CSP header is presents - some middleware (like Helmet) does publish it. You need to find it and modify the policy in it, or switch it off and use your res.setHeader(...)
If there is no header (and there is no meta tag either), publish the CSP with any of the methods, and add 'unsafe-inline' to it, as kmgt said. You need to have policy:
"default-src 'self' 'unsafe-inline' https://www.mydomain.fr"
to get rid of "The page settings prevented a resource from loading at inline ("default-src")"
Note that 'prevented a resource from loading at inline' can be about not only inline <script>, but about inline <style> too. But since you use `default-src', it covers both.
PS: Chrome's console more verbose than Firefox's one. If you fail to fix this issue, pls show the message about the blocking from the Сhrome's console - it will show the rules that block.
I've deleted all my CSP Rules (I don't use Helmet or any CSP dependencies) in my app and Nginx .conf file and when I look in browsers developers tools I see again the CSP Rule.
In chrome:
capture
In Firefox:
capture
therefore, I've tried to put this code:
app.use((req, res, next) => {
res.set({"Content-Security-Policy":"default-src 'self' 'unsafe-inline' https://www.myDomain.fr"});
next();
});
I've the same result than without the CSP Rules...
In Chrome I juste have a 404 error:
GET https://www.myDomain.fr/file 404 (Not found)
In Firefox
GET https://www.myDomain.fr/file [HTTP/1.1 404 Not found 96ms]
Content Security Policy: The page settings prevented a resource from loading at inline ("default-src").
The 404 is probably caused by the CSP Error...
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:">
Has anyone encountered this message while trying to display a toast while using Helmet?
The toast still displays but, I'm not sure why the error is.
Your browser seems to be blocking this because data: images are not whitelisted in the content security policy. The img-src directive of your CSP looks like this:
img-src 'self' https://cdnjs.cloudflare.com
It should look something like this:
img-src 'self' https://cdnjs.cloudflare.com data:
You can use Helmet to set this policy like this:
app.use(helmet.csp({
directives: {
// ...
imgSrc: ["'self'", "https://cdnjs.cloudflare.com", "data:"]
}
}))