All Tutorials

Working with the SameSite cookie attribute

All Tutorials

Working with the SameSite cookie attribute

Working with the SameSite cookie attribute

In the spring of 2019, Chrome announced an intent to change cookies to improve security on the web. The mechanism used builds on the web's SameSite cookie attribute.

Starting February 18th 2020, Chrome slowly rolled out their updated default for the SameSite attribute. The default behaviour of Chrome changed from allowing cookies in a cross-site or third-party context to denying them, unless specific attributes were included as a part of the cookie.

Is your app ready for SameSite?

To test your app’s compatibility with SameSite, you will need to enable a Chrome experiment flag.

  1. Download Chrome Canary, then install and launch it.

  2. In Canary, navigate to chrome://settings/help and verify that you see Google Chrome is up to date, if not then update Canary.

  3. Navigate to chrome://flags/#samesite and enable these three SameSite flags:

  • SameSite by default cookies
  • Enable removing SameSite=None cookies
  • Cookies without SameSite must be secure Chrome experiment flags for SameSite
  1. Click Relaunch to restart Chrome with the experimental flags enabled.

  2. Navigate to your development store's app listing page and select your app. If you already have the app listing page open, it’s a good idea to refresh, then select your app. Navigating to the Shopify App index in the admin

  3. If the app fails to open, there are a few different errors you may see:

Fails with an error New SameSite cookie warning that shows in Chrome 80 or higher

Fails by incorrectly displaying If your app looks different from the way it usually would without the experiment flags, the SameSite changes you have made were not successful.

For example, some apps will identify the error themselves and throw their own error page, while other apps might show with missing functionality.

Fails by continuing to refresh or redirect This occurs if your app refreshes to the point where your browser throws the error message, likely indicating an issue with SameSite cookies.

Updating your app for SameSite

Since embedded Shopify apps run in an iframe on a different domain than the Shopify admin, they are considered to be in a third-party context.

Shopify app running in a third party context

To designate cookies for cross-site access, it must be set as SameSite=None. In addition, the SameSite=None setting must always be paired with another attribute, Secure, which ensures that the cookie can only be accessed by a secure connection.

If this attribute is not explicitly set, then Chrome defaults the cookie to SameSite=Lax, which prevents cross-site access.

Known incompatiblities

Some browsers are known to be incompatible with the SameSite=None attribute. Chromium has posted a list of known incompatible clients and accompanying pseudocode of a potential fix.

Examples

The Chrome team has provided a small list of examples in ASP.NET, JavaScript, PHP, and Python on GitHub.

If you are not using a library please see our shopify_app pull request for a guide on how to update your app.