Why isn’t my iframe loading?
One of my favourite side projects over the years is Am I Responsive, a little tool that provides a high fidelity view of your website across four different devices (Mobile, Tablet, Laptop, Desktop).
One of my favourite side projects over the years is Am I Responsive, a little tool that provides a high fidelity view of your website across four different devices (Mobile, Tablet, Laptop, Desktop).
You can read about how the tool was made, but essentially it is a set of four <iframe> that load in an external (or local) site.
Over the years it has been active the most frequent email/tweet I get is asking
Why doesn’t my site load in Am I Responsive?
This question, when translated for the technical implemenation of the tool, is essentially
Why isn’t my site loading in an <iframe>?
For 100% of the time that question is asked the answer because of the X-Frame-Options.
What is X-Frame-Options?
X-Frame-Options is a response header which is used by the server to tell the browser whether or not the URL being requested can be used inside of a <iframe> — or <frame> or <object> as well. It’s a very handy security measure that means that you won’t have your site showing up in places that you don’t want it to, and it is especially important on sites that you might opt in for ‘keep me logged in’ like Facebook and Twitter.
Why are X-Frame-Options useful?
Most of us have sites that we probably don’t care if people are using them in <iframe>, but as I mentioned above for sites that allow you to log in and maintain a session over a long period of time it can be invaluable.
Imagine this example:
You visit a site, and seeing as this is an example lets say the site is example.com
On the page is an <iframe> which is pulling through Twitter.com
The person that owns that page is really clever though, so they make the <iframe> and any of its content disappear by styling it to be transparent.
Then the clever person positions a button under the now transparent <iframe> which says “Don’t click here”.
We, of course being presented with a button that say’s don’t click, click the button.
This is when the really clever stuff starts. The <iframe> doesn’t just pull in twitter.com, but it pulls in the twitter site with a web intent i.e. https://twitter.com/intent/tweet?text=I+told+you+not+to+click+the+button&via=reswebdes . The button is carefully positioned in the same place as the ‘tweet’ button, and because it is set behind the actual twitter button via z-index AND the *<iframe>* contents are set to opacity:0 you think you’re clicking on the “don’t click” button when you are in fact sending the tweet.
The below the animated gif demonstrates how the yellow button is added, how the z-index works by toggling it between being in front of the form and behind it, and then setting the form opacity:0 before clicking on our yellow button to see the result.
The other clever thing about this is that because we ALL are logged into twitter all of the time, we don’t get any confirmations or login requests.
Genius!
And it was actually done to twitter back in day, which forced them (and a lot of others) to adopt the X-Frame-Options settings to disallow <iframe>ing of their content.
X-Frame-Options options
There are three possible settings for for X-Frame-Options:
X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
X-Frame-Options: ALLOW-FROM https://example.com/
Lets take a look at what each of these will do.
DENY
The page cannot be displayed in a frame, regardless of the site attempting to do so… even if example.com wants to <iframe> another example.com page it won’t work.
SAMEORIGIN
The page can only be displayed in a frame on the same origin as the page itself. This would allow example.com to <iframe> another example.com page on the site.
ALLOW-FROM uri
The page can only be displayed in a frame on the specified origin. You could use ALLOW-FROM https://example.com and achieve the same thing on the example.com domain that you would if you used the SAMEORIGIN directive. If you wanted your site to always appear on the Am I Responsive tool then you could add *ALLOW-FROM http://ami.responsivedesign.is*
Debugging iframes for X-Frame-Options
The most straight forward way to understanding what is happening when your <iframe> isn’t loading is to review the Dev tools to see what is happening. For those of you that aren’t well versed in Dev tools, don’t be alarmed, this is a fairly straight forward thing to do.
Open the dev tools in your browser
Load the webpage that contains your <iframe>
Check the Console Logs.
If there is an issue with loading the <iframe> source you will get an error in the web console about the state of the X-Frame_options (see below)
These four errors show that Google.com is set to Same Origin, so they can iframe their own content but no one else can.
Further Reading
For the past few years if anyone every asked why the site wasn’t working I would always refer them to the MDN Documentation which is where I keep up-to-date with just about everything.
