Logo

dev-resources.site

for different kinds of informations.

Fix sameSite cookie issue in Cypress by installing an older version of Chromium

Published at
3/1/2022
Categories
cypress
chromium
samesite
cookies
Author
richardbray
Categories
4 categories in total
cypress
open
chromium
open
samesite
open
cookies
open
Author
11 person written this
richardbray
open
Fix sameSite cookie issue in Cypress by installing an older version of Chromium

Cypress out of the box doesn't allow you to visit different urls or domain from the base one in a given test. You can read more about that in the Cypress documentation on web security.

To get around that the following option can be for Chromium based browsers in the cypress.json file:

{
  "chromeWebSecurity": false
}
Enter fullscreen mode Exit fullscreen mode

This works great for most scenarios, but if like me, you're running a test suite that relies on putting cookies from one domain onto another, then you might face a problem.

Why would a site need to share cookies between domains?

This is quite common for passing information from one site to another or session information. If the cookie has expired it means the session has ended and the user cannot do much on the new site they've visited unless the get a new cookie from the previous site.

This doesn't work in newer version of Cypress although it did work in older version. Since Chrome 80 the SameSite attribute needs to be specified in cookies to declare how restrictive they should be. Before Chrome 80 SameSite=None was on all cookies by default but now it needs to be explicitly added in the API request or it's defaulted to SameSite=Lax.

This means running this test suites that require cookies to be shared between domains won't work:

Issue that appears in chrome dev tools when SameSite is Lax

Unfortunately newer version of Chrome (94+) have also removed the flags to disable this. The only way around this issue is to install an older version of Chromium where disabling SameSiteByDefaultCookies is possible with a flag.

Here's how that can be done.

1 - Visit the Cypress chromium downloads site

2 - Find the latest stable version for 90 and download it for your relevant Operating System

Where to download chromium 90 from cypress

NOTE: In theory any version below Chromium 94 should work but I only tested with 90 so that's why I'm recommending it.

3 - Unzip the file and place the contents in an easily accessible location

NOTE: I'd recommend contents of this folder not be pushed to somewhere like GitHub

4 - Open the browser you just downloaded and make sure you adhere to all the security requirements of your relevant operating system.

MacOS security and privacy warning for installing new browser

5 - We'll now need to add some code to the cypress/plugins/index.js. The code is an addition to this excellent solution from poponuts:

const path = require('path');

//...

function addChromiumBrowser(config) {

    const fullChromiumPath = path.resolve('cypress/browsers/chrome-90-mac');
    const chromiumOptions = {
        name: 'chromium',
        channel: 'stable',
        family: 'chromium',
        displayName: 'Chromium',
        version: '90.0.4430.93',
        path: `${fullChromiumPath}/chrome-90-mac/Chromium.app/Contents/MacOS/Chromium`,
        majorVersion: 90,
    };

    config.browsers.push(chromiumOptions);
}

module.exports = (on, config) => {
    on('before:browser:launch', (browser, launchOptions) => {
        if (browser.name === 'chromium') {
            launchOptions.args.push(
                '--disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure'
            );
            return launchOptions;
        }
    });

    addChromiumBrowser(config);

    return config;
};
Enter fullscreen mode Exit fullscreen mode

NOTE: If you are using a version of Chromium other than 90, please change the version and majorVersion fields as well

6 - If all went well, running npx cypress open Should reveal a new browser in your list.

New Chromium browser in Cypress

Running in Chromium should fix whatever issue with SameSite cookies you have in Cypress.

Sources

https://dev.to/poponuts/overcoming-samesite-cookie-issue-in-cypress-when-running-on-chrome-or-edge-274m
https://digitaldrummerj.me/cypress-custom-browser/

chromium Article's
30 articles in total
Favicon
Avoiding a "Host Permission" Review Delay When Publishing a Chrome Extension
Favicon
Proyect Fugu
Favicon
Proyecto Fugu: Revolucionando las aplicaciones web progresivas (PWA)
Favicon
How To Download An Old Version of Chromium
Favicon
Why gRPC is not natively supported by Browsers
Favicon
Running Puppeteer in a Docker container on Raspberry Pi
Favicon
Chromium Spelunking: Connecting to Proxies
Favicon
๐ŸŒ Installing Chromium on Mac Apple M2 Pro (Tutorial)
Favicon
Chromium Spelunking: The IO Thread
Favicon
Chromium Spelunking: A Stuck Task
Favicon
Chromium Spelunking: Threads and Tasks
Favicon
Chromium Spelunking: Creating a Request
Favicon
Chromium Spelunking: Churl
Favicon
Chromium Spelunking: Life and Times
Favicon
Chromium Spelunking: Getting Started
Favicon
Google Chrome ใฎ CVE ่„†ๅผฑๆ€ง: 2022 ๅนด 12 ๆœˆ้ ƒใฎใƒชใƒชใƒผใ‚นใƒใƒผใ‚ธใƒงใƒณใพใง
Favicon
CVE vulnerabilities on Google Chrome prior to releases around on Dec. 2022
Favicon
Stop Chromium from asking about default browser
Favicon
Message loop
Favicon
Share highlight in Chrome/ Chromium
Favicon
Useful Visual Studio Code Extension for Developing Chromium
Favicon
Fix sameSite cookie issue in Cypress by installing an older version of Chromium
Favicon
Why HTTP streaming upload matters on Web browser
Favicon
Google refusing to connect to other sites?!
Favicon
Chromium console stopped working. - What's wrong? How do I fix it?
Favicon
Chrome Omnibox
Favicon
Using Chromium to replace Electron Applications
Favicon
Snapd doesn't work on WSL2 Ubuntu20.04
Favicon
Prevent chromedp Chromium zombie processes from stacking
Favicon
Overcoming SameSite cookie issue in Cypress when running on Chrome or Edge

Featured ones: