FROM CACHE - en_header

Loading storefront in iFrame, X-Frame-Options

Jamie_D_
Shopify Staff (Retired)
Shopify Staff (Retired)
533 1 107

UPDATE: This change has been temporarily reverted in order to allow apps to migrate away from an iFrame-based solution. We're putting this change back into production on October 16th. Merchant security remains a top priority for all of us, and this change is an important part of that security.

The solution based on frame_tokens is being retired internally in the near future, so we won't be offering that to 3rd party apps as a solution. There are a number of apps on the app store that have migrated away from an iFrame based strategy already.

Original Announcement:


Hey Shopify Developers,

Going forward, new shops provisioned by Shopify will serve the X-Frame-Options: DENY response header, preventing storefront on these shops from being rendered within an iFrame.

This is a security measure in order to prevent a clickjacking (aka “UI redress”) attack on storefront.

Previously, all Shopify Plus shops had this behaviour enabled by default.

Some apps rely on loading the merchant’s storefront in an iFrame in order to provide a “preview” of the app’s functionality on storefront. This is not possible for shops that serve the X-Frame-Options: DENY header.

If your app offers such a “preview” functionality, you should load the storefront in a separate window in order to prevent this from breaking on certain shops.

Any questions or concerns? Please feel encouraged to reply directly to this thread.

Jamie | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 32 (32)
ThomasBorowski
Shopify Expert
803 71 217

Hey Jamie,

what does "new shops provisioned by Shopify" mean? Aren't all shops effectively provisioned by Shopify?

Thomas

★ Smart Upgrades, Tips and Tutorials for Shopify themes: themepunk.io
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up
TravisJohnson
Shopify Expert
10 0 5

Is this able to be disabled or removed if the store owner approves for it to be removed? Reason I ask is our app is 100% dependent on being able to show the store in an iFrame, along side a left sidebar of controls.

Founder / Creative Director of WITTY // Shopify Expert & Partner // Founder of Carrt (carrt.com)
Jamie_D_
Shopify Staff (Retired)
Shopify Staff (Retired)
533 1 107

What does "new shops provisioned by Shopify" mean? Aren't all shops effectively provisioned by Shopify?

Correct – to clarify, I mean new shops created going forward.

Is this able to be disabled or removed if the store owner approves for it to be removed

No, this setting is not configurable by the merchant. 

Reason I ask is our app is 100% dependent on being able to show the store in an iFrame, along side a left sidebar of controls.

Regardless of the recent change, this would already be an issue for the vast majority of Shopify Plus storefronts that serve the X-Frame-Options: DENY header.

There are apps that are accomplishing this without loading the storefront in an iFrame – to my knowledge, they are loading storefront as normal while continuing to load the sidebar in an iFrame.

Jamie | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Bogdan_Radu
Shopify Expert
34 0 23

This is bad. I know that Shopify uses iframes into the theme customization mode. After i checked, i see that in order to achieve that, you generate a 

frame_token

 in order to remove the header from the request. You should allow apps to generate their own frame_token. I bet there are hundreds of apps on the store that rely on iframe to work.

A simple and elegant solution would be to also remove this header from authenticated requests where

access_token

 param is also present. You could allow frame_tokens to be valid if it's also a hash of an active access_token + parent_domain. This would help all the app developers who rely on iframes to make the app work and it will still block any kind of iframe attack.

 

Make more sales by sending discount links or apply discounts automatically based on what's in their shopping cart with ✌ Automatic Discount https://apps.shopify.com/automatic-discount-rules ❖ App that allows you to upsell add-ons and bundles without duplicate variants and without any coding needed ✌Ultimate Upsell https://apps.shopify.com/ultimate-upsell

Derek_Morin
Shopify Expert
216 1 34

Hi, I agree with Bogdan. This is a simple fix by Shopify to save hundreds of apps a lot of headaches.

Here's our use case. We built a widget for non-techy merchants (at least 80% of Shopify merchants) to select inside the theme a location to insert an upsell (some products). At first we were loading this widget in a new tab. But then many app conflicts happened because for example some apps redirect the product url to the variant url. So we decided to make this widget load inside an iframe, and that fixes all the merchant bugs and reduced complaints/tickets by 80%. One the main value proposition of all apps is when they don't require any coding, merchants love it. And for us, this widget is the way to do it. I bet hundreds of app developers have a similar use case.

Thanks to consider the access_token solution suggested above.

TravisJohnson
Shopify Expert
10 0 5

+1 Bogdan's solution

Founder / Creative Director of WITTY // Shopify Expert & Partner // Founder of Carrt (carrt.com)
smahr
Shopify Partner
5 0 2

Hi, adding our voice to the concerns posted here. Our app is 100% dependent on an iFrame for a positive user experience and we consider this a significant (and for us, breaking) change to the platform.

We provide live preview functionality with a sidebar editor similar to Shopify's own. Communication to and from this iFrame is crucial, opening the store in a new tab/window isn't an option. Without support for an iFramed store, our app is unusable. We're already starting to hear from new signups who are being denied the ability to configure our app.

We support a frame_token solution as well.

 

speedy
Shopify Partner
3 0 0

Our Mega Menu app is also dependent on loading the store front in an iframe in order to design the menu and preview it before it goes live.

I agree with Bodgan Radu's frame_token solution. That way we can continue providing a better user exprience to the merchant.

 

Alex_Stanhope
Tourist
9 0 1

+1 Bogdan's solution

Jamie, please resource this properly and support the developer community with a well-defined, well-presented alternative.  Cheers, Alex

@lightenna
Jamie_D_
Shopify Staff (Retired)
Shopify Staff (Retired)
533 1 107

Hey all,

This change has been reverted for the time being, until we can either come up with a strategy to prevent clickjacking without impacting third-party apps, or allow sufficient time for partners to migrate away from a solution that's dependent on embedding storefront in an iframe.

For now, all new shops will not serve this header values. 

Shops that were created in the last week or so will still serve the `X-Frame-Options: Deny` header for now, but this is expected to change at some point today or tomorrow.

You can expect further updates in the coming weeks.

Cheers everyone.

Jamie | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Shayne
Shopify Staff
Shopify Staff
208 9 47

We're putting this change back into production on October 16th. Merchant security remains a top priority for all of us, and this change is an important part of that security.

The solution based on frame_tokens is being retired internally in the near future, so we won't be offering that to 3rd party apps as a solution. There are a number of apps on the app store that have migrated away from an iFrame based strategy already. If you have technical hurdles with implementing an alternative to iFrames, make a forum post in our API and Technology board and we'll try to work with you towards a solution that works for your use case.

Shayne | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Derek_Morin
Shopify Expert
216 1 34

In other words, Shopify cares about merchants and they "care" about app developers for 1 month 😄

When you say "There are a number of apps on the app store that have migrated away from an iFrame based strategy already.", did you make the count? What about the count of apps that depends on an iFrame?

 

Bogdan_Radu
Shopify Expert
34 0 23

@Shayne, When you say: 

The solution based on frame_tokens is being retired internally in the near future, so we won't be offering that to 3rd party apps as a solution.

What will you guys use for the theme customization screen instead? If you found a neat solution to use rather than iframes, can you share it with us so we can adopt it as well?

Make more sales by sending discount links or apply discounts automatically based on what's in their shopping cart with ✌ Automatic Discount https://apps.shopify.com/automatic-discount-rules ❖ App that allows you to upsell add-ons and bundles without duplicate variants and without any coding needed ✌Ultimate Upsell https://apps.shopify.com/ultimate-upsell

Shayne
Shopify Staff
Shopify Staff
208 9 47

In other words, Shopify cares about merchants and they "care" about app developers for 1 month 😄

This is definitely not the case. We always try to give at least 60 days (or more) of notice before breaking changes, but with BFCM looming on the horizon, this is a change that we need to make to protect 500,000+ merchants from potential clickjacking attempts during the busiest online shopping time of the year.
 

The solution based on frame_tokens is being retired internally in the near future, so we won't be offering that to 3rd party apps as a solution.

Some apps have had success with making requests for the desired storefront from the server side, and then returning the response body to the client to be rendered by the browser. As long as you're not creating carts or fetching product JSON, there isn't any kind of throttling on storefront — so this approach should do the trick for some people. 

I can't speak to specific implementation details of existing apps that are avoiding iFrames, but if you want an example of an app that's doing a good job — I'd suggest checking out Shogun.

Shayne | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Danijel
Shopify Partner
21 0 18

I'm confused, does this mean that:

- Stores which load shopify app code inside of an IFRAME will now not work? or;

- Shopify apps that loads a store inside an IFRAME won't work? 

 

 

Busfox
Shopify Staff (Retired)
Shopify Staff (Retired)
628 49 107

Hi Danijel,

In this case, the latter would apply. Once the change goes live again, Shopify storefronts will not load inside an iframe.

Andrew | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

bolle
Excursionist
28 1 5

What is the status on this? I'm working on an embedded app at the moment and having a handful of iFrame issues and am thoroughly confused about this vs the documentation.

 

Eric9
Shopify Partner
3 0 0

The recommendation to follow the lead of the Shogun pagebuilder app is something that is easy to understand. Use a server-side script to fetch the page and generate a static clone which can be served from the application's own domain. Makes perfect sense.

However, if a storefront is password-protected, or if the page/product/post is hidden or yet to be published, the application will not be able to access the desired resource.

Further, when attempting to access a storefront from a server-side cURL request so that caching may take place, this beauty is returned.

The directive to email developer support is great, but perhaps they could respond?

Alex
Shopify Staff
Shopify Staff
1561 81 333

Hey Eric,

Maybe I'm confused by the issue you're conveying. You were able to pull protected pages (either from behind a storefront password or an unpublished resource) through an iframe in the first place? I don't believe this was ever a way to simply bypass the storefront password/publishing mechanisms.

Alex | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog