How to Allow Same-Origin iframes in Shopify Online Stores

Technical Q&A
, ,
1

Hello,

I’m currently working on an external widget that users can embed on their websites via a simple script tag. To maintain widget functionality across different pages, we utilize iframes. However, Shopify’s Content Security Policy (CSP) seems to block iframes, even from the same origin, which isn’t an issue on other platforms.

I understand that Shopify applies strict frame-ancestors settings in its CSP, which prevents iframes from being used. My questions are:

  1. Is there any way to configure or allow specific same-origin iframes in Shopify, for instance via the admin settings or in the Shopify Theme HTML code?
  2. Would embedding an app within Shopify (e.g., using Shopify App Bridge) allow us to bypass this restriction?
  3. Are there any recommended approaches or workarounds to enable iframe functionality without violating Shopify’s CSP?

I’ve researched this issue and found several related discussions in the forum, but no clear solution. Any guidance would be appreciated.

Relevant discussions:

Thank you in advance for your help!

2

Same problem here did you find a solution?
Seems crazy that Shopify prevents iframes even from the same domain… This is a big problem.

3

Still no solution on my end either. Hoping someone from Shopify can provide guidance soon!