SameSite Cookie & Shopify Apps

Sharing is caring!

With the release of Chrome 80 on February 4th, 2020, the default behaviour of Chrome will change from allowing cookies in a cross-site or third-party context to denying them, unless specific attributes are included as a part of the cookie.

The new version of Google Chrome will be blocking 3rd party cookies, and hence breaks lots of Shopify apps.

In May 2019 Google announced that cookies that do not include the “SameSite=None” and Secure” labels will not be accessible by any third parties, in Chrome version 80 and further. The Secure label means cookies need to be set and read via HTTPS connections.

SameSite prevents the browser from sending this cookie along with cross-site requests. The main goal is mitigate the risk of cross-origin information leakage. It also provides some protection against cross-site request forgery attacks. Possible values for the flag are lax or strict.

Shopify embeded apps can use this as an alternative:

When in Apps screen, check if any 3rd party cookies are blocked. If yes, then show a warning message at top that Apps require 3rd party cookies to be enabled, and a support link to a page on how to enable them, i.e. https://support.boldcommerce.com/hc/en-us/articles/202650579-Enable-Third-Party-Cookies

Chrome prevents server side scripts to read httponly cookies when the request is initiated via 302 redirect. Shopify uses a 302 redirect to “App URL” when loading the app.

As a workaround, when 3rd party cookies are blocked, show again the warning and an “Open app” link for merchants to click, instead of a redirect.

It is hard to handle by app developers from client side, as we don’t even get to execute our app JS, since the auth is stuck between “App URL” and the “Whitelisted redirection URL(s)” (which does work and can read cookies properly set by “App URL”, since the redirect is on the same host).

Shopify recommend developers to embed their apps in Shopify for a better experience for the merchants.

Shopify have some documentations about authenticating embedded apps with OAuth that covers how to make sure the Oauth redirects work properly.

If the app renders UI during this redirect step, it creates visible flashes of content that can be confusing for the merchant. So Shopify recommends rendering a plain blank/white page during the Oauth redirect steps.

In addition to making the redirects less jarring, this has the added benefit of speeding the Oauth process up (since the browser doesn’t have to waste time downloading/rendering content).

Apps not following this will be rejected by shopify:
https://community.shopify.com/c/Shopify-APIs-SDKs/How-to-enable-third-party-cookies-embedded-apps/td-p/439425

For more details about Samesite Cookie please visit here.

Chromium has posted a list of known incompatible clients and accompanying psudocode of a potential fix.

Leave a Reply

Your email address will not be published. Required fields are marked *

Got Project on mind? Let's ConnectContact Us

Secured By miniOrange