Manage Safari's Third-Party Cookie Blocking for Your Shopify Apps

In the ever-evolving landscape of web development, browser updates can sometimes throw a wrench in the works for app developers. This is particularly true for Shopify app creators who recently faced challenges with Safari’s new privacy features. Let’s dive into the issue and explore the solutions that have emerged.

The Problem: Safari’s Third-Party Cookie Blocking

What Changed?

With the release of Safari 13.1 on macOS and iOS/iPadOS 13.4, Apple implemented full third-party cookie blocking by default. This update, while great for user privacy, caused significant issues for many Shopify embedded apps that relied on cookies to store session identifiers.

Impact on Shopify Apps

The immediate effect was that many embedded Shopify apps stopped functioning correctly in Safari. This left developers scrambling for solutions and merchants frustrated with broken functionality.

The Core Challenge

The crux of the issue lies in how embedded apps within Shopify’s admin interface traditionally used cookies to maintain user sessions. With third-party cookies blocked, these apps could no longer reliably store or retrieve session data.

Solutions and Workarounds

The Storage Access API: A Promising Fix

The most effective solution that emerged was the use of the Storage Access API. This API allows embedded content to request permission to access first-party cookies, even in a third-party context.

How It Works

1. The app requests storage access when loaded.
2. Safari prompts the user to allow cookie access.
3. If granted, the app can then use cookies as before.

Implementation Challenges

Initially, there was confusion about whether the iframe needed to be sandboxed with specific tokens. However, it was clarified that for Shopify embedded apps, the iframe isn’t sandboxed, and the Storage Access API can be called directly.

Shopify’s Official Solution

Shopify responded to this challenge by updating their koa-shopify-auth library. Version 3.1.61 of this library introduced fixes specifically targeting the Safari 13.1 issue.

Key Features of the Update

• Implements the Storage Access API correctly.
• Handles the necessary redirects and permission requests.
• Works seamlessly within the Shopify admin interface.

Additional Considerations

User Experience

While the Storage Access API solves the technical problem, it introduces a new user experience challenge. Users are now prompted to allow cookie access, which can be jarring if not handled gracefully.

Performance Impact

Developers should be aware that this solution may introduce slight delays in app loading times due to the additional permission request step.

Best Practices for Developers

Updating Existing Apps

1. Upgrade Dependencies: Ensure you’re using the latest version of koa-shopify-auth or equivalent libraries.
2. Implement Storage Access API: If not using Shopify’s libraries, implement the Storage Access API manually.
3. Test Thoroughly: Check your app’s functionality across different versions of Safari and other browsers.

Developing New Apps

1. Use Latest SDKs: Start with the most recent Shopify app development tools and libraries.
2. Design for Privacy: Consider privacy-first approaches that don’t rely heavily on third-party cookies.
3. Implement Graceful Fallbacks: Ensure your app degrades gracefully if cookie access is denied.

Future-Proofing Your Shopify Apps

Embracing New Authentication Methods

Shopify has been working on new authentication approaches that don’t rely on iframes or third-party cookies. Keep an eye on Shopify’s developer blog and documentation for updates on these new methods.

Staying Informed

1. Follow Shopify’s Updates: Regularly check https://shopify.dev for the latest development guidelines.
2. Browser Release Notes: Stay updated with major browser releases, especially those related to privacy and security.
3. Community Engagement: Participate in Shopify developer forums and discussions to share and learn from peers.

Technical Deep Dive

Understanding the Storage Access API

The Storage Access API provides a way for embedded content to request permission to access its first-party cookies. Here’s a basic implementation:

document.requestStorageAccess().then(
  () => {
    // Storage access granted, proceed with normal app functionality
  },
  () => {
    // Storage access denied, implement fallback behavior
  }
);

Handling Multiple Contexts

One complexity that arose was the need to request storage access twice: once when the page is loaded at the top level, and again when loaded as an embedded page within the Shopify admin.

Prefix Handling

For apps using URL prefixes, ensure that your implementation of the Storage Access API correctly incorporates these prefixes in the authentication routes.

By understanding these challenges and implementing the appropriate solutions, Shopify app developers can ensure their embedded apps continue to function smoothly across all browsers, including Safari. As web standards evolve, staying adaptable and informed will be key to maintaining high-quality, functional Shopify apps.