Safari 13.1 and embedded apps

Solved
Highlighted
Tourist
8 1 5

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?

Highlighted

Yes, we're facing the same issue.

Highlighted
New Member
1 0 2

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

Highlighted
Shopify Staff
Shopify Staff
35 2 10

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...

0 Likes
Highlighted
Tourist
8 1 5

@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.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
35 2 10

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).

0 Likes
Highlighted
Tourist
8 1 5

@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.

0 Likes
Highlighted

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

SPO - SEO App to research keywords & edit social link preview
0 Likes
Highlighted
Shopify Staff
Shopify Staff
35 2 10

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.

0 Likes
Highlighted
Shopify Partner
127 0 14

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

0 Likes