Invalid CSRF Token Because Chrome Blocks third-party cookies in Incognito mode

68 Views Asked by At

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?

0

There are 0 best solutions below