Shopify 嵌入式应用被 CSP 拦截怎么处理

现象#

应用在 Shopify 后台以 iframe 打开后白屏，控制台报 Refused to frame 或 frame-ancestors 相关错误。

原因#

• 响应头设置了 X-Frame-Options: DENY，禁止被后台 iframe 嵌入
• CSP 的 frame-ancestors 未包含 https://*.myshopify.com 与 https://admin.shopify.com
• 会话 Cookie 设置了 SameSite=Strict，在 iframe 内不发送导致反复跳转登录
• App Bridge 脚本未加载或版本与当前后台不兼容

处理步骤#

1. 移除 X-Frame-Options，改用 CSP frame-ancestors 'self' https://*.myshopify.com https://admin.shopify.com;
2. 把会话 Cookie 改为 SameSite=None; Secure，确保 iframe 内可携带
3. 确认页面按当前方式引入 App Bridge（新版为 shopify-app-bridge 脚本），并在加载完成后再读取宿主信息
4. 在应用后台把 App URL 设为 embedded = true 对应地址，避免跳出 iframe

验收标准#

应用在后台 iframe 内正常加载，控制台无 CSP 与 Cookie 告警，登录态可保持。