3 Reasons You Might Not Want To Use Iframes

3 Reasons You Should Never Use Iframes

One of our customers implemented an iframe on their website. They right away bumped into a layout issue.

This was very typical of the iframe tag. It often creates more problems rather than solving them.

Breaking design is not the only issue with this tag. In this blog post, you will learn the three main reasons why you might not want to use the iframe.


Reason #1. Iframes Bring Security Risks

If you create an iframe, your site becomes vulnerable to cross-site attacks.

  • You may get a submittable malicious web form, phishing your users’ personal data.
  • A malicious user can run a plug-in.
  • A malicious user can change the source site URL.
  • A malicious user can hijack your users’ clicks.
  • A malicious user can hijack your users’ keystrokes.

Don’t put your visitors at risk to the XSS attacks.


Reason #2. Iframe Cause Usability Issues

The iframe tag is notorious for creating usability annoyances. Among most common of them are:

  • It tends to break the browsers’ “Back” button.
  • It confuses visually impaired visitors, using screen readers.
  • It confuses users, suddenly opening the iframe content in a new browser window.
  • Content within the iframe doesn’t fit in and looks odd.
  • Content within the iframe is missing since the source URL changed.
  • Navigation of the site in the iframe stops working.
  • Every <iframe> in a page requires increased memory and other computing resources.

Find better ways to refer your visitors to external content instead of placing it within the iframe tag.


Reason #3. Iframes Cause SEO Problems

Google recommends refraining from creating iframes.

At there Webmasters Help Forum, Google clearly stated that iframes may cause problems for them:

IFrames are sometimes used to display content on web pages. Content displayed via iFrames may not be indexed and available to appear in Google’s search results. We recommend that you avoid the use of iFrames to display content. If you do include iFrames, make sure to provide additional text-based links to the content they display, so that Googlebot can crawl and index this content.

I recommend not using the iframe tag. Create pages that Google can crawl and associate with your site easily.

Conclusion

You may be facing what seems like a small layout issue with your iframe tag today. You might manage to rectify it now, only for you and your visitors to get problems with Google, usability, or security later.

I strongly advise you stay away from using the iframe tag.

Instructor

  • Born from Ukrainian mother and Russian father, Alex migrated to the United Kingdom in 1999. He is a self-taught Microsoft Certified Professional. He enjoys learning content management systems and helping web site developers make the most of them.

0 0 votes
Blog Rating
Subscribe
Notify of
29 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Thierry

Hi
This solution for Responsive Google Maps https://www.ostraining.com/blog/coding/responsive-google-maps/ is then not recommended correct ?

Thierry

Thanks Alex for these precisions 🙂

Hassan Mehmood

Hi, Whats the best solution if we want to create browser like tab system in website, if we avoid iframe?

Stefano

This article is mileading and should be corrected. Reason #3. Iframes Cause SEO Problems refers to tag not

Dave

Thanks Alex for the article. So, if I understand correctly, if you use your own site (i.e. one you also have administrative control over) in an iframe you should be okay; Because it is a trusted site? The same if you use a different webpage from the parent site?

Jen A.

Personally I think that iFrames are useful. Obviously you won’t add an iFrame from a website that isn’t trusted. Add iFrames for websites that you trust. Check the website you use before you add an iFrame. Why the heck would you add an iFrame from a possibly malicious website?

Uttam

Hi Alex,
We have an application with payment form which captures card details and processes it through the back-end system. We are planning to allow third party application to use payment form as iframe content. Is it safe to use Payment form as iframe content?
FYI, our application is HTTPS enable
Appreciate your help on this

Thanks,
Uttam

Imran

Hi Uttam! Did you ever get a response to this question? What was your ultimate solution here, did you go with the iframe for the payment screens?

mikall

Imran, I found [url= https://www.spreedly.com/blog/online-merchants-3-things-consider-choosing-iframe-payment-form%5Dthis article[/url] useful when talking about iFrames and payment gateways. I am NOT promoting their product in any way, just passing along info that happens to be found on their website. 

not amused

Never say never, there are very valid exceptions.

iorbita

… could you develop your comment please?

Alex

see my comment below

Jinseung Eu

This seems to be for websites. Is there any issue for using i-frames for desktop apps? Thank you very much. 

Greg

I recently had a developer create a method of making animatable text which involved using css, javascript and a database. This was uploaded to a specific folder on my site. I wanted to import the generated animations into webpages on my site using iframes. The developer insisted (to the point of nastiness) that iframes were not secure and created a system whereby I could create whole web pages (HTML plus embedded animations) but couldn’t put these pages in their appropriate folders on the site. They went into a special folder that I could securely control from my computer. If I wanted the same look and feel on pages created with his software, I had to link to style sheets at the appropriate part of the site. Needless to say, this would result in a highly rigid, ungainly system that would make editing a nightmare. The guy who did this was obviously a professional but I’m now stuck with a program that I paid for but can’t use. Do you really stand by your absolute prohibition on iframes? I am not planning on linking to other sites; only to a generated page on the same server and website. And the kind of thinking that lies behind prohibition that you’re supporting has cost me money with no appreciable benefit.

Lorenz

Is this article up-to-date? Other sites say that you can use iframes actually with html5. Also your link to google support is broken. At another [url=https://support.google.com/webdesigner/answer/3214587?hl=en]google support page[/url] there is no hint not to use iframes.

Dries

Hi,

I’d like to add that all embed codes for Instragram, Facebook and Youtube fully rely on IFrames.
So the most important question is: do you trust the source?
Practically there is just no other solution to embed such content on another domain, or is there?

Thanks!

robbieadair

Dries, 
True many of those large social media sites use iframes for their embed widgets. And, absolutely you should always check the source of content you pull in via iFrame.
The other option is utilizing APIs when available, but it will require some coding knowledge, or pre-built plugins for whatever system you are using for your site. For example, YouTube does offer a fairly extensive API – https://developers.google.com/youtube/v3/docs
But, if you aren’t a coder, it might just be easier to use the widgets provided from reputable sources.
Cheers,
Robbie

Mazedul Islam

Wow!!! I have got a clear concept using iframe. I also share it with my co-workers. 

Nunya

Hope you read the comments….A lot of this information is outdated or inaccurate.

Mr Mackey

This article reminds me ‘drugs are bad, mkay…because….drugs are bad, mkay’

Michael

I disagree with #1.  

IFRAME’s sandbox properties lets you prevent any parent <-> child interactions; as it’s being served from another domain.  You’d need to explicetely code up the postMessage() pipeline for interactions.  

But yes, you need to somehow trust what you load in an IFRAME, which is true with all web components (do you trust all JS/CSS/CDN’s that you use?), Iframes let you sandbox it at least.

AMK

Folks what are the alternatives then?
We are facing lot of issues when working with Angular and iframe..

S3C_MM

I use

Chaitanya

We have an application where we are using iframes to launch a payment page from a POS machines, which are on windows7. The POS machines are behind a f/w and we are facing page launch issues of the payment page for the 1st few attempts and after couple of times page refresh in the iframe the page loads and from there on there were no issues. To troubleshoot the issue we did the network packet tracing and found the TCP 3 way handshake is successful and the TLS negotiation is not initiated by the client, when it fails to load. Either side of the network we are not seeing any issues with the packet tracing. also directly calling the page also we are not seeing. Is there any limitations with iframe in such scenarios.

Mars

Hi, Alex

I appreciate your article, it’s very helpful.
But I might need some suggestion from you.
What would be the suggested solution from you if we want to implement a chatbox?
The chatbox is plugged-in in the parent webpage (like facebook messenger plugged-in)
I have checked that for facebook, they implement the plugged-in using iframe as well.

The chatbox is from a different domain than its parent window.
Thank you for your response.

Mars

imrodmartin

Hi Mars,

there are always use case scenarios for pretty much anything in web design – and you bring up a good example.

Alex isn’t saying NEVER, he’s just saying avoid them if possible for these three reasons.

29
0
Would love your thoughts, please comment.x
()
x