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.
Download Chrome Canary, then install and launch it.
In Canary, navigate to
chrome://settings/helpand verify that you see
Google Chrome is up to date, if not then update Canary.
chrome://flags/#samesiteand enable these three SameSite flags:
- SameSite by default cookies
- Enable removing SameSite=None cookies
- Cookies without SameSite must be secure
Click Relaunch to restart Chrome with the experimental flags enabled.
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.
If the app fails to open, there are a few different errors you may see:
Fails with an error
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.
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.
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.
If you are not using a library please see our
shopify_app pull request for a guide on how to update your app.