Shopify App Displays Blank Page on Shopify but Works When Iframe Link is Opened Directly

Question

I have successfully deployed and executed my application on a dedicated server. However, when I access the application through Shopify, it displays a blank page without any content. Intriguingly, when I inspect the Shopify admin iframe and directly open its source link in a browser, the application functions as expected, displaying all content correctly.

Could anyone please help me understand why this discrepancy between the Shopify environment and direct browser access is occurring? Any insights, diagnostic tips, or similar experiences shared would be greatly appreciated. I am looking to understand the potential causes and find a resolution to ensure that my application displays correctly within Shopify.

Answer 1

The Why

The CORs policy has become an integral part of the Shopify security. You can refer to this doc

This helps in ensuring that the content loaded into iFrame is from your trusted domain/shopify's admin domain only. ( Also know as Click-jacking. Read here )

How to setup

Its fairly simple to set-up. In the server section, add a middle ware thats sets the frame-anscestors directive in all response header

For embeded apps

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

• This will tell the shopify's iFrame that the content is coming from trusted domain ( the shop's ) ✅

• If we have any other source of components being sent to front end, we should declare them too in the frame anscester. ( Just in case )

For non embeded apps

• We don't need the frame-anscestors directive. We can turn it off using
  • Content-Security-Policy: frame-ancestors 'none';