All Tutorials

Update your app to support intelligent tracking prevention

All Tutorials

Update your app to support intelligent tracking prevention

Update your app to support intelligent tracking prevention

Safari 12.0, released September 2018, includes version 2.0 of the Intelligent Tracking Prevention (ITP) system.

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

Both the App Bridge and the Embedded App SDK (EASDK) allow you to change the location of the parent window. In App Bridge, use the Redirect action. In EASDK, use the remoteRedirect method. These allow 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 a remote Redirect action (App Bridge) or remoteRedirect (EASDK)
      • If shopify.testCookie is not present
  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!