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?
Solved! Go to the solution
> There is reference to using the Storage Access API, but this requires sandbox tokens applied to the 'iframe' element in Shopify.
@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.
This is an 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).
@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.
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
Please can you provide a working example or confirm that there is an issue with Safari 13.1