未呈现的商店管理面板中的嵌入式应用程序视图

Question

我不熟悉shopify和在销售渠道上工作，默认情况下它是嵌入的，当我在我的开发存储中安装它并转到我的商店管理面板时，我得到了断开的链接，如

0e5c-103-125-178-100.ap.ngrok.io拒绝连接。

在chrome开发工具中我得到了

拒绝在帧中显示“https://0e5c-103-125-178-100.ap.ngrok.io/”，因为它将“X帧选项”设置为“相同来源”。

我只想在应用程序安装后，在这个嵌入式视图中向店主显示一条欢迎信息。

Answer 1

根据Shopify文档，您需要为嵌入式应用程序设置特定的内容安全策略。

如果您的应用程序是嵌入式应用程序，那么您需要确保您的应用程序只能由认证的商店域框架。根据当前商店域和Shopify管理域动态设置框架-祖先指令。设置此指令可以保证您的应用程序只能在商店管理员的框架内。

在这种情况下，您需要根据嵌入应用程序的经过身份验证的存储库来添加frame-ancestors的值。

如果您使用Shopify CLI在(Node、PHP或Ruby)中生成样板代码，那么这应该已经开箱即用。

如果不想使用Shopify CLI，可以在Rails应用程序中使用Shopify App Gem。

您可以看看这个按下来了解如何使用，Shopify App添加了CSP。来自PR的代码片段

content_security_policy do |policy |
  policy.frame_ancestors(- > do
      domain_host = current_shopify_domain || "*.myshopify.com"
    "https://#{domain_host} https://admin.shopify.com;"
    end)
end