The impact of ITP 2.0

Safari is expected to release a new version of its Intelligent Tracking Prevention (ITP) on September 24th with macOS 10.14 Mojave.

ITP 2.0, as opposed to earlier versions, immediately partitions cookies after a user interaction occurs on the top level domain (TLD) . The previous general cookie access window of 24 hours after user interaction has been removed. This means that if your Shopify app is embedded, your cookies may be blocked if ITP classifies you as a tracker and no user interaction has occured on the TLD.

To solve this problem, Safari requires that the merchant interacts with your app while it is the parent window, and accepts to receive cookies from you for 30 days.

Fortunately, the Embedded App SDK (EASDK) will allow you to use the remoteRedirect method to change the location of the parent window. This allows you to redirect the merchant to your app as a parent window, set a cookie, and then redirect back to Shopify to set the cookie in the embedded context.

The following flow is our recommended pattern for dealing with the changes to Safari. Make sure to check the merchant's User-Agent before directing them through this flow, as it's only required for Safari 12.0+ users.

ITP 2.0 flow

  1. When merchant first visits app:

    • Set shopify.testCookie cookie with a value
    • If logged in, remove shopify.topLevelOAuth cookie. Else, redirect to login page with shop param
  2. When merchant visits login page:

    • Check for shopify.testCookie cookie
      • If shopify.testCookie is present, check for shopify.topLevelOAuth cookie
        • If shopify.topLevelOAuth cookie is present, redirect to auth page within iframe
        • If shopify.topLevelOAuth cookie is not present, set shopify.topLevelOAuth cookie and redirect to auth page in top-level context using remoteRedirect
      • If shopify.testCookie is not present
        • Redirect to enable cookies page in top-level context using remoteRedirect
  3. When merchant visits the enable cookies page:

    • Render page that induces a user gesture, but with content hidden
    • If JS context document.hasStorageAccess exists:
      • Display page content
      • Upon user gesture, set shopify.testCookie cookie
      • Redirect to https://${shop}/admin/apps/${apiKey}
    • If document.hasStoreAccess does not exist:
      • Set shopify.testCookie cookie
      • Redirect to https://${shop}/admin/apps/${apiKey}
  4. When merchant visits the auth page:

    • Remove shopify.topLevelOAuth cookie
    • Generate nonce / other query parameters for OAuth and redirect to https://${shop}/admin/oauth/authorize
  5. When merchant visits OAuth callback:

    • Same as current process!

Sign up for a Partner account to get started.

Sign up