My front end uses React and is hosted by https://render.com/ with a domain purchased on SquareSpace. My backend is in Express.js and requires a CSRF token for verification in order to prevent CSRF. However, since I am setting cookies to send to the backend for verification and Chrome Incognito mode by default blocks third party cookies, I am getting the error below:
Set-Cookie was blocked because its Domain attribute was invalid with regards to the current host url
This is my relevant code in Express.js:
const corsOptions = {
origin,
credentials: true, // This allows the server to accept the included credentials
allowedHeaders: ['Content-Type', 'Authorization', 'x-csrf-token'],
methods: ['GET', 'POST', 'PUT', 'DELETE'],
};
const CSRF_SECRET = process.env.CSRF_SECRET;
const COOKIES_SECRET = process.env.COOKIES_SECRET;
const CSRF_COOKIE_NAME = process.env.CSRF_COOKIE_NAME;
app.use(cookieParser(COOKIES_SECRET));
const { generateToken, doubleCsrfProtection } = doubleCsrf({
getSecret: () => { return CSRF_SECRET; },
cookieName: CSRF_COOKIE_NAME,
cookieOptions: {
// development is false, otherwise true
httpOnly: process.env.NODE_ENV === 'production',
secure: process.env.NODE_ENV === 'production',
sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax',
},
ignoredMethods: [],
});
Although I can just disable third party blocking on Chrome, I want users on my website who don't know about the bug to not face the same problem. I do I make it so the CSRF cookie is properly sent to the backend?