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?
5 Likes
Yes, weāre facing the same issue.
1 Like
I canāt even access the Themes, Pages, or Preferences pages in the online store for customization.
2 Likes
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.js
@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:
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.
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).
@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.
Iāve the same issue. Except removing all cookie, is there any fix by the developer or Shopify can handle it?
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.
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
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
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
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
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=c747754dacdc8f35403af17f2794d4a3
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.
1 Like
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
This is amazing, thank you!
@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.
Any one try to fix koa-shopify-auth?
Weāre working on a fix! Iāll post back once we have something for you to try! Thanks for the ping!
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!