Cypress SameSite cookie issue when running Chromium based browsers

— 3 minute read

While working on a fresh Cypress install I noticed that once I moved away from the default Electron browser that comes with Cypress to a Chromium based one, my spec wouldn't finish because it didn't get passed the login screen.

Since the login screen is self-hosted and does not depend on a 3rd party, we also wanted to test this but that came with a first hurdle. Chromium doesn't allow cross-origin navigation. Luckily there is a flag called chromeWebSecurity that can be modified in the Cypress configuration. Setting this flag to false allows you to do the following:

  • Display insecure content
  • Navigate to any superdomain without cross-origin errors
  • Access cross-origin iframes that are embedded in your application

After a debugging session with a colleague where we went through every possible step we suddenly noticed the little warning triangle on one of our requests Response Headers, more specifically: Set-Cookie. The warning triangle told us the following:

This Set-Cookie header didn't specify a "SameSite" attribute and was defaulted to "SameSite=Lax", and was blocked because it came from a cross-site response which was not the response to a top-level navigation. The Set-Cookie had to have been set with "SameSite=None" to enable cross-site usage.

Which got us to an article which provides us with a solution by disabling SameSiteByDefaultCookies, by adding the following code block in our plugins script.

module.exports = (on, config) => {
    on('before:browser:launch', (browser = {}, launchOptions) => {
        if (browser.name === 'chrome' || browser.name === 'edge') {
            launchOptions.args.push('--disable-features=SameSiteByDefaultCookies') // bypass 401 unauthorised access on chromium-based browsers
            return launchOptions
        }
    })
}

Quite the adventure but luckily with a good ending.