Fix sameSite cookie issue in Cypress by installing an older version of Chromium
Tags: cypress, chromium, samesite, cookies
Published: 2022-03-01 16:26:11

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](https://docs.cypress.io/guides/guides/web-security).

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

```json
{
  "chromeWebSecurity": false
}
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d849m0ma1yot9cudcmjs.png)

Unfortunately newer version of Chrome (94+) have also [removed the flags to disable this](https://www.chromium.org/updates/same-site/). 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](https://chromium.cypress.io/)

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


![Where to download chromium 90 from cypress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t639uidxwucbtsb9i1di.png)

_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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/no025ibkl2bt5ux0bpqx.png)

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](https://dev.to/poponuts/overcoming-samesite-cookie-issue-in-cypress-when-running-on-chrome-or-edge-274m):

```js
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;
};
```

_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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ufwt33ec3lqfyvdh4xxi.png)

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/