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?

[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!