Safari 13.1 and embedded apps

Solved
Tourist
5 0 4

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?

4 Likes
Highlighted

Yes, we're facing the same issue.

1 Like
Highlighted
New Member
1 0 2

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

2 Likes
Highlighted
Shopify Staff
Shopify Staff
2 1 0

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
5 0 4

@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

Success.

Shopify Staff
Shopify Staff
2 1 0

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
5 0 4

@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