Safari 13.1 and embedded apps

[sleyhane]

Yesterday, Apple released new versions of Safari with its OS updates (Safari 13.1 on macOS and  iOS/iPadOS 13.4). This release blocks all third-party cookies by default across the board. This has broken our embedded Shopify apps, which make use of cookies to store a session identifier.

Full Third-Party Cookie Blocking and More:

https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/

Does Shopify have an approach for getting embedded apps to work in Safari on the latest release?

Disabling the privacy option 'Prevent cross-site tracking' allows the apps to work, but we're looking for a solution that doesn't require users to change the default settings.

We managed to work around the restrictions in the previous release (by redirecting to the top window and setting a first-party cookie) but I can't see a way yet with these changes. There is reference to using the Storage Access API, but this requires sandbox tokens applied to the 'iframe' element in Shopify.

Has anyone else tackled this issue?

[Michael_Ragalie · Accepted solution]

The embedded app iframe isn't sandboxed, so there's no sandbox token to be added. Calling the Storage Access API will just work, give it a try! We use it in the apps we build internally (with some exceptions that have regrettably not updated as quickly as they should have).

[Josef_Rousek]

Yes, we're facing the same issue.

[christie699]

I can't even access the Themes, Pages, or Preferences pages in the online store for customization.

[Michael_Ragalie]

Hi!

> There is reference to using the Storage Access API, but this requires sandbox tokens applied to the 'iframe' element in Shopify.

I think the Storage Access API should work for embedded apps. I know it's used in the shopify_app ruby gem to request permission to access cookies. If you're able to use that API you should be able to get the cookie access you need. Maybe try taking a look at how shopify_app does it and see if it also works for you? Here's what appears to be the relevant JS: https://github.com/Shopify/shopify_app/blob/master/app/assets/javascripts/shopify_app/storage_access...

[sleyhane]

@Michael_Ragalie The rules changed in last week's Safari 13.1 release.

We were able to work around previous privacy changes ('Prevent cross-site tracking' and ITP 2.3) by using App Bridge to redirect the top window to set a cookie from our domain and then back into our app (which App Bridge automatically puts back in its correct frame). If you are classified as a tracking domain, then the user activation was required.

Safari 13.1 is a different beast, though. As I understand it, our app can only read its (previously set) first-party cookies after user interaction. And this only works if the app 'iframe' element is sandboxed with the appropriate tokens:

<iframe sandbox="allow-scripts allow-same-origin allow-top-navigation allow-storage-access-by-user-activation"></iframe>

So we need Shopify to add these to the embedded app iframe element in order to support this.

I've confirmed that Shopify's own 'Order Printer' app does not work in Safari 13.1. It redirects a few times and then gives up with an error. Presumably, all other apps are broken on this browser too.

[Michael_Ragalie · Accepted solution]

The embedded app iframe isn't sandboxed, so there's no sandbox token to be added. Calling the Storage Access API will just work, give it a try! We use it in the apps we build internally (with some exceptions that have regrettably not updated as quickly as they should have).

[sleyhane]

@Michael_Ragalie Sorry, I stand corrected. I was under the impression that the iframe **had** to be sandboxed to get access to storage. You're correct. Thanks for your help!

All third-party cookies are blocked and user activation is required to get access to previously set first-party cookies. This means that user activation is required every time an admin link extension page is accessed. This makes for a terrible user experience in Safari, but this is outside of Shopify's control.

[sillycube]

I've the same issue. Except removing all cookie, is there any fix by the developer or Shopify can handle it?

[Michael_Ragalie]

Hello! You'll want to use the Storage Access API to request cookie access: https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API

Once you've successfully requested access via the Storage Access API you can read and modify cookies as normal.

It's admittedly a little tricky to get this right, but unfortunately this is the user experience that Safari has defined for this use case.

[GhostApps]

I've been testing with Safari 13.1 and I can't get it to work unless I disable "Prevent cross-site tracking" in Safari Preferences -> Privacy, there is also a couple of issues open on GitHub that say this previously fixed issue has re-emerged https://github.com/Shopify/shopify_app/issues/845 

https://github.com/Shopify/shopify_app/issues/944

Please can you provide a working example or confirm that there is an issue with Safari 13.1

Thanks

[Workbench360]

Hi, We are having the same issue using Safari 12 and 13 with our app using App-Bridge on Node.js which was working before.

I try started a brand new sample app following the latest tutorial instruction from Shopify and downloaded the latest packages but still have the problem that the session cookies cannot be stored. The app won't even start and my  "Prevent crossing site tracking" in Safari Preference is off.

https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-express

Since we have no control over the Shopify packaged code which try to store the access token and shop id into the cookies, how can we change to use the Storage Access API to solve the problem.  

Will Shopify be releasing an updated package that will use Storage Access API or expect the partner developers to hack around Shopify code to get it working with the Storage Access API.

Please help and give proper instruction/ example on how to do it as this is very frustrating that we have to support the unhappy customers while we are hacking for a solution around the Shopify code.

Thanks

[Michael_Ragalie]

Hello!

I'm sorry for the confusion, but that tutorial doesn't work, as we deprecated express support a while ago (see, e.g.https://www.npmjs.com/package/@shopify/shopify-express). I don't know how this slipped through the cracks. I've asked our team to note that that tutorial is deprecated to avoid confusion in the future.

We recommend using our `koa` library which properly handles requesting access via the Storage Access API: https://www.npmjs.com/package/@shopify/koa-shopify-auth

Again, sorry for the confusion!

-Mike

[Workbench360]

Hi,

We have just tried to use koa with the following tutorial "Shopify App with Node and React" which is using koa-shopify-auth.

Still have the same problem. Don't see where it uses the storage access API. When we debug it using the Safari inspect, we see that the cookie is created and then disappeared in a split second and it does not use the local storage.

https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/set-up-your-app

[sleyhane · Accepted solution]

I went through the 'Build a Shopify App with Node and React' tutorial:

https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react

and the result doesn't work in Safari 13.1 -- I get into an endless redirect loop. So I suspect the 'koa-shopify-auth' library needs to be patched.

I wrote up how we fixed our apps:

https://medium.com/@sleyhane/shopify-embedded-apps-and-safari-81903dec20f7?sk=c747754dacdc8f35403af1...

We don't use either of the Shopify-provided libraries since our apps have a .NET Core (C#) backend but I hope this help others.

[Ghost_Test]

Ok I finally figured it out.

Starting with Safari 13.1 you need to request access to set cookies twice

Once when the page is loaded at the top level and then again when the page is loaded as an embedded page within the Shopify admin

Then you can set cookies and it works as normal

[Michael_Ragalie]

This is amazing, thank you!

[AvocadosLab]

@Michael_Ragalie should we expect any patch from Shopify soon around this in koa-auth library? Would be great if you update templates with a fix so that everyone benefits from it rather using their own implementations.

[arenacommerce]

Any one try to fix koa-shopify-auth? 

[Michael_Ragalie]

We're working on a fix! I'll post back once we have something for you to try! Thanks for the ping!

[Michael_Ragalie]

We released v3.1.61 of koa-shopify-auth this afternoon that should fix issues with Safari 13.1: https://www.npmjs.com/package/@shopify/koa-shopify-auth/v/3.1.61

Please give it a try and let us know if it works for you!

[AvocadosLab]

I just tested "v3.1.61" of "koa-shopify-auth" on Safari 13.1 it did fix cookie redirect issue! Thanks a ton for releasing patch quickly. Much appreciated 🙂 

I'm seeing following prompt every time I'm trying to open my app on Safari 13.1 though, is that a new normal?

[Michael_Ragalie]

Glad it's working for you!

Yes, that's the new normal (for the moment). But we're working on something better 🙂 https://twitter.com/jmwind/status/1256249454430224386

[raymmondxma]

I'm still running into an issue with safari after auth redirect (following the next js and Shopify-koa-auth tutorial). 

After seeing the accept cookies screen I get redirected a few times (with shop parameter defined) but ultimately it takes me to this URL where the shop parameter is undefined.

[Ben-from-Obviyo]

Thanks for v3.1.61 - one issue we are running into with shopifyAuth is we use "prefix", so when the new client-side redirect attempts to hit the "/auth/enable_cookies..." route, instead of "/{prefix}/auth/enable_cookies", the result is a 404 and not the nice "enable cookies" page.  i've added a note to the commit #1413, hope that helps, and thanks for all the efforts to get this to work!

[redalert1917]

I have the same problem.. What can I do?

22

[Michael_Ragalie]

Hi! I think these two lines should incorporate the prefix: https://github.com/Shopify/quilt/blob/master/packages/koa-shopify-auth/src/auth/client/request-stora...

Would you mind opening an issue in the repo (or you can open a PR if you're up to it)? Thanks!

[Ben-from-Obviyo]

Ok, filed an issue https://github.com/Shopify/quilt/issues/1426 regarding "prefix" support.  Will try to have a look at a fix.

[Ben-from-Obviyo]

Hi @Michael_Ragalie, PR is here: https://github.com/Shopify/quilt/pull/1428

Cheers.

[dom-linq]

Hi @Michael_Ragalie,

v3.1.61 works with being able to open the app without the enable cookies loop but still continues to be a problem when using an iframe modal. It will ask for permission again and redirect the iframe to the home page of the app. In my case, this makes my app unusable in Safari. Will there be any expected solutions to this issue? Thanks!

[sleyhane]

@dom-linq: Shopify is beta testing a new approach that doesn't rely on iframes. I was invited to participate but haven't seen anything yet.

Here's the partner update on it:

https://www.shopify.com/partners/blog/whats-new#cookies-authorization

[Michael_Ragalie]

Hello! Thanks for the report! Did this work properly before the v.3.1.61 upgrade?

@sleyhane is correct, we are working on an alternative auth approach that avoids many of these issues. We're beta-ing it right now and plan to release it to everyone this summer. That has taken time away from ongoing maintenance work, so we may not get to this issue as quickly as we'd like.

However, you can open an issue with this information in our repo, which will help us track it: https://github.com/Shopify/quilt/issues

If you're especially ambitious you're welcome to open a PR with a fix too, if you think you know why it's not working 🙂

Thanks again!

[dom-linq]

@sleyhane @Michael_Ragalie 

Thank you for the update! I'll be sure to watch this closely.

No, Safari was stuck in the enable cookies loop before the koa-auth v.3.1.61 upgrade but was resolved except when using modal iframes. I will remove the modal iframe usage from my app for now until this is figured out.

Thanks!

[brdata]

Hi,

I tried out the Shopify sample embedded app at -

https://github.com/Shopify/shopify-demo-app-node-react

The app works fine on Chrome/IE on Windows and the Shopify POS app on Android but fails with Safari/Shopify POS on iOS 12.4.8 running on my iPad.

I get a couple of redirects, it asks me for "Enable cookies" permission and then it fails with:

Expected a valid shop query parameter

Appears to be related to this discussion. Any plans on fixing this for iOS 12?

Thanks!

[Michael_Ragalie]

Hi!

This seems like a different issue; I'm going to report internally and see if we can figure out what's going on.

Thanks for the report!

-Mike

[NabeelAhsen]

@brdata 

Hi there, 

We've been taking a look at this internally and wanted to make sure the following was communicated: 

1. The message "Expected a valid shop query parameter" usually means that the shop your app is trying to be installed/viewed on was not passed in as a query parameter in the URL. A typical URL would look something like <public_app_host>/auth?shop=<your_shop_name>.myshopify.com.
2. Make sure your mobile browser doesn't disable all cookies (this may include third-party / cross-site cookies as well for the time-being). Safari manages cookies differently for both Android and iOS. Check this guide to see if Safari is accidentally blocking all cookies: https://help.overdrive.com/en-us/0606.html

[brdata]

Hi,

Thanks for getting back to me. My Safari 12 is set to the default settings as far as I can tell. "Block All Cookies" breaks most websites including Shopify, so I don't think that is the issue. Disabling "Prevent Cross-Site Tracking" also did not help.

I tested the same demo app on another iPad with Safari 13 and it works fine, and it works fine with Chrome on Windows and Android. I haven't made any changes to the Shopify Node React demo App other than adding the API and Secret keys to the .env file and updating koa-shopify-auth and other dependencies to the latest version. 

https://github.com/Shopify/shopify-demo-app-node-react

  

Just to make sure, I retested on Safari on yet another iPad with iOS 12.4.7 (my iPad has iOS 12.4.8) with the same result. It always fails with an empty shop= parameter at https://xxxxxx.ngrok.io/auth/inline 

Ngrok reports:

GET /auth/inline   400 Bad Request

I could ask merchants to update iOS on their devices but that isn't a good solution, especially since older iPad Airs and iPad 2s will not get the iOS 13/iPadOS 13 update.

Thanks for looking in to this.

[sleyhane]

@Zeshan,

In reply to your question to me in another thread...

My solution for getting embedded Shopify apps with Safari to work (referenced in this thread) is now outdated. You should be using session tokens instead of relying on third-party cookies. I believe this is now a requirement for all new apps, in order to get through the app review process.

Here's information on session tokens:

https://shopify.dev/apps/auth/session-tokens

When we went through the process, I found Shopify's documentation a little confusing for the front-end React components. But we sorted it out in the end. Our app now uses session tokens for authentication -- and we're using C# .NET Core in the backend, like you. We use the ShopifySharp library to help with the OAuth2 flow, but we don't use it to validate the session tokens.

Hope this helps,

Stefan

[Zeshan]

@sleyhane thank you for answering. We have read about appbridge and jwt tokens but we are still confused what changes we need in existing app, which is developed on top of shopifysharp. We are using VanillaJS with Bootstrap on frontend and Backend is developed in Asp.net MVC.

Can you provide us some instructions or code boilerplate because shopify documentation is confusing us and there are no help documents for dot net. We may also need to write some articles so we can help dot net community, which is interested in shopify development. 

[sanjar]

Hello, is there any way to setup server cookies for storefront?