Checkout WebURL in an iframe

[davetacker]

After creating a Checkout using the GraphQL API, I need to load the Checkout's webURL in an iframe but I'm getting the following error:

Refused to frame 'https://ecu-dev-store.myshopify.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

I found this, which states:

By default, Shopify prevents stores from being rendered in an iframe, which mitigates the possibility of clickjacking attacks. This includes setting the CSP header to none, and setting X-Frame-Options to DENY. To have this disabled, the account owner can contact our support team and ask them to disable clickjacking protection.

To enable iframe support, we would need to disable clickjacking protection for our app? Would this require every store using our app to submit a request, or would it be possible to disable this for any Store with our app installed automatically?

[davetacker]

For anyone coming across this post in the future, it doesn't look like there are any plans to support loading the Checkout web URL in an iframe element. Here's the response from the Technical Merchant Support:

Click to expand...

Hi Dave,

Thanks for getting back to me about this for your store, and checking on that further, Checkout WebURL is not something that would work within an iframe. Currently, the only controls we have related to embedding via an iframe, would be for disabling the clickjacking protection for your store. If this is something you would like implemented for your store, I can reach out to our development team, and have them look into that on your behalf.

Alternatively, if Checkout WebURL is something you would prefer to look into instead, it would be best to post in our API and Technology forum.. It's the best place to get help from both Shopify's dev team and other developers for assistance with API related questions and development.