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?

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

[brdata]

Hi,

Thanks for getting back to me. My Safari 12 is set to the default settings as far as I can tell. "Block All Cookies" breaks most websites including Shopify, so I don't think that is the issue. Disabling "Prevent Cross-Site Tracking" also did not help.

I tested the same demo app on another iPad with Safari 13 and it works fine, and it works fine with Chrome on Windows and Android. I haven't made any changes to the Shopify Node React demo App other than adding the API and Secret keys to the .env file and updating koa-shopify-auth and other dependencies to the latest version. 

https://github.com/Shopify/shopify-demo-app-node-react

  

Just to make sure, I retested on Safari on yet another iPad with iOS 12.4.7 (my iPad has iOS 12.4.8) with the same result. It always fails with an empty shop= parameter at https://xxxxxx.ngrok.io/auth/inline 

Ngrok reports:

GET /auth/inline   400 Bad Request

I could ask merchants to update iOS on their devices but that isn't a good solution, especially since older iPad Airs and iPad 2s will not get the iOS 13/iPadOS 13 update.

Thanks for looking in to this.

[sleyhane]

@Zeshan,

In reply to your question to me in another thread...

My solution for getting embedded Shopify apps with Safari to work (referenced in this thread) is now outdated. You should be using session tokens instead of relying on third-party cookies. I believe this is now a requirement for all new apps, in order to get through the app review process.

Here's information on session tokens:

https://shopify.dev/apps/auth/session-tokens

When we went through the process, I found Shopify's documentation a little confusing for the front-end React components. But we sorted it out in the end. Our app now uses session tokens for authentication -- and we're using C# .NET Core in the backend, like you. We use the ShopifySharp library to help with the OAuth2 flow, but we don't use it to validate the session tokens.

Hope this helps,

Stefan

[Zeshan]

@sleyhane thank you for answering. We have read about appbridge and jwt tokens but we are still confused what changes we need in existing app, which is developed on top of shopifysharp. We are using VanillaJS with Bootstrap on frontend and Backend is developed in Asp.net MVC.

Can you provide us some instructions or code boilerplate because shopify documentation is confusing us and there are no help documents for dot net. We may also need to write some articles so we can help dot net community, which is interested in shopify development. 

[sanjar]

Hello, is there any way to setup server cookies for storefront?