Safari 13.1 拒绝加载 Shopify 嵌入式应用程序

Question

我们的应用程序运行良好，但最近 Safari 中的更改导致我们的应用程序崩溃。

Safari 13.1 开始使用 iframe 阻止 Shopify 中嵌入的应用程序。

它抛出的错误是：

        refused to load https://xxdddddd.com/admin/auth/login because it does not appear in the frame-ancestor directive of content security policy.

我们尝试了各种内容安全策略，chrome 和 Firefox 运行良好，但 safari 总是中断，

我们完全删除了该标题。

我们甚至添加了：

header("Content-Security-Policy: frame-ancestors * 'unsafe-inline' 'unsafe-eval' img-src * data:");

header("Sec-Fetch-Dest: iframe");
header("Sec-Fetch-Mode: navigate");
header("Sec-Fetch-Site: cross-site");

我们尝试了各种组合，但每次在 Safari 中都失败了。我发现其他几个应用程序在 Shopify 和 Safari 13.1 的嵌入式模式下工作得很好，所以这绝对意味着它是可能的。

我注意到的一件事是 URL 需要在授权后更改，并且在我们的演员表中它不会随着 Safari 阻塞而更改，但在其他应用程序中它会更改浏览器中的 URL。但是我发现他们的代码使用 view-source 并没有什么不同。我也尝试复制所有标题。他们在给予，但没有任何效果，

Answer 1

您的 CSP frame-ancestors * 'unsafe-inline' 'unsafe-eval' img-src * data: 完全错误：

• 指令块应该用逗号分隔
• frame-ancestors 指令不支持“unsafe-inline”和“unsafe-eval”标记，

正确的语法 CSP 应类似于 frame-ancestors *; img-src * data:;

但矛盾的是，这个错误的 CSP 确实允许来自任何来源的帧祖先。删除所有不受支持的来源后，在您的情况下，有效的 CSP 为 frame-ancestors * data:。

在错误中：

refused to load https://xxdddddd.com/admin/auth/login because it does not appear in the frame-ancestor directive of content security policy.

混淆了两件事：

1. 短语in the frame-ancestor directive 包含错误的指令名称（s 在指令名称的末尾被省略）。这是真正的 Safari 浏览器错误吗？

2. /admin/auth/ 部分 - 这真的是可公开访问的 URL 吗？或者这个错误是否出现在管理员脚本中，可能有其他 CSP 规则？

您说在 Chrome 和 Firefox 中都可以正常工作，但 frame-ancestors * 'unsafe-inline' 'unsafe-eval' img-src * data: 规则不允许从任何来源加载图像。 因此，您可能正在编辑一个 CSP 标头，但该应用程序确实有另一个。如果您熟悉 Safari 浏览器控制台，您可以查看传递到应用页面的真实 CSP HTTP 标头。

无论如何，here 你可以测试 Safari 13.1 是否支持 * 帧祖先（由于 Safari 浏览器不存在，我不能这样做）。它将排除当前版本浏览器错误的情况。