Shopify 应用程序在 Shopify 上显示空白页面，但直接打开 Iframe 链接时可以工作

Question

我已在专用服务器上成功部署并执行了我的应用程序。但是，当我通过 Shopify 访问该应用程序时，它显示一个没有任何内容的空白页面。有趣的是，当我检查 Shopify 管理 iframe 并直接在浏览器中打开其源链接时，应用程序按预期运行，正确显示所有内容。

有人可以帮我理解为什么 Shopify 环境和直接浏览器访问之间会出现这种差异吗？任何见解、诊断技巧或分享的类似经验将不胜感激。我希望了解潜在原因并找到解决方案，以确保我的应用程序在 Shopify 中正确显示。

Answer 1

为什么

COR 政策已成为 Shopify 安全不可或缺的一部分。 你可以参考这个doc

这有助于确保加载到 iFrame 中的内容仅来自您的受信任域/shopify 的管理域。 （也称为点击劫持。请阅读此处）

如何设置

设置相当简单。在服务器部分，添加一个中间件，在所有

frame-anscestors

 中设置 

response header

指令

对于嵌入式应用程序

• Content-Security-Policy: frame-ancestors https://{{YOUR_MERCHANT'S_SHOP_NAME}}.myshopify.com https://admin.shopify.com;

• 这将告诉shopify的iFrame内容来自受信任的域（商店的）✅

• 如果我们有任何其他组件源发送到前端，我们也应该在框架祖先中声明它们。 （以防万一）

对于非嵌入式应用程序

• 我们不需要框架祖先指令。我们可以使用将其关闭

  • Content-Security-Policy: frame-ancestors 'none';