Safari 13.1拒绝加载shopify嵌入式应用

如何解决Safari 13.1拒绝加载shopify嵌入式应用

我们的应用运行正常，但野生动物园的最新变化导致我们的应用中断了

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");

我们尝试了各种组合，但每次组合都失败了。我发现在shopify和safari 13.1中的嵌入模式下，其他几个应用程序也可以正常工作，因此这绝对意味着有可能。

我注意到一件事，需要在授权后更改网址，在我们的演员表中，它并没有更改为Safari块，但在其他应用中，它更改了浏览器中的网址，但是我发现使用view-source的代码没有什么不同以及尝试复制他们提供的所有标头，但没有任何效果。

任何帮助都会很棒。

解决方法

您的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.

混淆了两件事：

短语in the frame-ancestor directive包含错误的伪指令名称（伪指令名称末尾省略 s ）。这是真正的Safari浏览器错误吗？
/admin/auth/部分-这是真正可公开访问的URL吗？还是此错误出现在管理脚本中，该脚本可能还有其他CSP规则？

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

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