Safari 13.1阻止Shopify嵌入应用问题求助

Let's break down why Safari is being stubborn here and how to fix it—since other apps are working, we know there's a clear solution:

1. Fix Your CSP Syntax (Critical Mistake!) #

First off, your current CSP has a syntax error that Safari enforces strictly, while Chrome/Firefox are more forgiving:

frame-ancestors * 'unsafe-inline' 'unsafe-eval'

The frame-ancestors directive only accepts domain values or 'self'—it doesn't recognize 'unsafe-inline' or 'unsafe-eval' (those belong to script-src/style-src directives). Mixing these in is causing Safari to reject the entire CSP or misinterpret it, leading to the block.

Replace that with a targeted CSP tailored to Shopify's embedding domains:

header("Content-Security-Policy: frame-ancestors https://*.myshopify.com https://admin.shopify.com; img-src * data:; script-src 'unsafe-inline' 'unsafe-eval'; style-src 'unsafe-inline';");

• We explicitly allow Shopify's admin and store domains (the actual parent frames for your embedded app) instead of using *—Safari treats wildcard * more cautiously for cross-origin iframe scenarios.
• Separate other directives (img-src, script-src) into their appropriate sections.

2. Remove Unnecessary Sec-Fetch Headers #

You're setting Sec-Fetch-Dest, Sec-Fetch-Mode, and Sec-Fetch-Site as response headers—these are request headers sent by the browser, not something your server should return. Adding them is likely confusing Safari's security checks, so delete those header calls entirely.

3. Fix the Authorization Flow (Top-Level Jump) #

Your note about the URL not changing post-authorization is a key clue. Other working apps are probably doing a top-level redirect for the login flow instead of trying to load the Shopify auth page inside the iframe.

Safari blocks auth/login pages in iframes even with correct CSP, so you need to kick the user out of the iframe to complete the auth:

// Add this check in your app's entry point
if (window.self !== window.top && !isUserAuthenticated()) {
  // Redirect the top-level window to Shopify's auth page
  window.top.location.href = "https://xxdddddd.com/admin/auth/login?redirect_uri=YOUR_EMBEDDED_APP_URL";
}

Once auth completes, Shopify will redirect back to your app, which will load correctly inside the iframe since your CSP now allows Shopify's domains as ancestors.

4. Validate CSP Headers in Safari Dev Tools #

Use Safari's Web Inspector (enable it via Settings > Advanced > Show Develop menu) to:

• Check the Network tab for your app's response headers—ensure the Content-Security-Policy is exactly what you set, and there are no duplicate/conflicting CSP headers (some servers/CDNs add extra ones).
• Look at the Console tab for specific CSP error details—Safari will often tell you exactly which directive is failing.

Final Check #

After implementing these changes, test again in Safari:

• The auth flow should now redirect the entire browser window (changing the URL) instead of loading inside the iframe.
• Post-auth, your app should load correctly in the Shopify embed without CSP errors.

内容的提问来源于stack exchange，提问作者turkyoung