Why You Shouldn’t Use Iframes?
A few days ago while working on an open source project I discovered Iframes. The goal was to display an iframe within a modal and inside of it the content of a website.
Initially it opened up a new tab but this was taking away from the purpose of the application.
Once I got familiar with the codebase it was easy to implement this using MaterialUI’s Dialog component. It was working fine until this was logged in the console:
Refused to display 'https://www.tec.ac.cr/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.This caused the modal to render a Chrome ‘refused to connect’ error page.
Most websites were loading correctly but some of them were throwing errors. This made me wonder why some websites were preventing third parties from loading their content on Iframes.
Here I’ll be covering the what I learned going down this Iframe rabbit hole.
What Are Iframes?
The <iframe> tag is an HTML element which allows us to embed an HTML document inside another.
<iframe>‘s behave similar to <img> in the sense that they are both inline elements, with block display, and take in a src attribute. One renders images where the other renders an HTML document.
They are commonly used to display ads, YouTube videos… If you go to a website and inspect one of the ads, you will be able to see the embedded document by checking the <iframe>’s children.
Big companies like Youtube and Facebook have a way to[safely] embed their content into third party websites. Through the embed option HTML code is generated from a specific resource which you can then copy into your document.
But how come we can’t just copy the URL and pass it to the src attribute to the <iframe>?
Why Are Iframes Bad?
The reason why some websites deny access to their content is because of Cross-Frame Scripting(XFS) attacks.
This type of attack uses JavaScript and <iframe>‘s to steal information from unsuspecting users.
For example, let’s imagine a hacker who loads the login page from Facebook in an <iframe> and styles it so that it takes up the entire outer window. Sets up some way to listen to keystrokes, like event listeners. Some regular joe might think this is the actual Facebook login page and enter their credentials. And boom, they’re hacked!
You can read more about XFS attacks here.
More Reasons Why
XFS attacks are the reason why third party sites wouldn’t allow you to use their content within iframes.
However, there are also reasons why you shouldn’t use them in your website, even if they successfully load.
They Are Bad For SEO. If one of your concerns is getting more traffic to your webpage is best to stay away from <iframe>. Some search engines have difficulties indexing the content inside of them. It is not fully known how much this affects SEO but experts have agreed that there is some negative effect.
Unable To Send Links. Say one of your users decide to navigate through the website inside inside the <iframe>, find something interesting, and wants to send their friend a link. They can’t because the URL didn’t update as the user navigated.
Affects Performance. Because <iframe> have a totally different context than the parent that of the parent’s window, they require more memory and computations. Thus, slowing down your website and taking up extra memory.
Make Debugging Harder. You won’t know where exactly the error is coming from. Is it coming from the outer page or from within the iframe?
I should add that one or maybe two <iframe> tags wont’t have much of a negative effect on your site. These disadvantages become noticeable as you begin to abuse them by using them as a workaround for poor design.
Conclusion
Overall, iframes are powerful elements when used correctly. Don’t let this information discourage you from using <iframe> tag within your documents. Do your own research and experimentation and let me know down in the comments how you feel about them.
