Why we should avoid <iframe>

For security, usability, accessibility, and design

3 min readOct 18, 2023

Security Issues

What if https://phishing-site.com hosts your https://my-bank.com as an iframe and leads you to enter your password, e.g, “Forgot password?”

What if an iframe execute this script, document.top.location.href = https://phising-site.com to make your site to be redirected to a phishing site to enter a password and average users don’t pay attention to changes on address bar.

To avoid this security issue, we need to set extra header settings to allow certain websites, which requires extra maintenance on the server.
e.g., X-Frame-Options: DENY
In addition, IFRAME element may be a security risk if any page on your site contains an XSS vulnerability which can be exploited.
Content within the <iframe> is allowed to automatically open a link over current page location (the new location will be visible in the address bar). The only way to avoid that is to add sandbox attribute without value allow-top-navigation

Usability Issues

“Back” button inside iframe does not work like a normal “back” button. When users click back button, it only goes back to the page within an iframe. It does not apply to the parent window.
Navigation of the site in the iframe only works within iframe.
Let’s say you have ‘Contact’ page link in an iframe. When users click this link, it does not open parent window Contact page, but it only works within an iframe
Every <iframe> in a page requires increased memory and other computing resources.

Accessibility Issue

It confuses visually impaired visitors, using screen readers.
Jump to main contents should be disabled when it’s in an iframe
Vertical and horizontal scrollbars are needed for <iframe>. Because <iframe> contents are not expanding automatically unlike an html block.

Architectural Issues

We need to style every single <iframe> separately not to use the browser-built-in iframe style. Styling of an iframe has to match to the parent window.
Iframe does not set width and height by its contents. We need to write a Javascript code to to width and height of an iframe automatically.
<iframe> and parent window cannot communicate by a security reason. Thus, we need to pass message for this communication by using Javascript. We need to pass message using window.addEventListener for receiving a message, and window.postMessage to send a messagfe. Furthermore, the message format must be agreed between parent window and iframe.

References

Hope this helps

If this is helpful to you, please send me some claps, 👏👏👏👏👏

Happy coding

Allen Kim, Oct 18th 2023