3 Reasons You Might Not Want To 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.
Hi
This solution for Responsive Google Maps https://www.ostraining.com/blog/coding/responsive-google-maps/ is then not recommended correct ?
Hey, Thierry.
Thanks for dropping by.
Adding an iframe embed code from well-trusted sites like Google would not harm. Things can get tricky when you create your own iframe. And when you include in your iframe not so well-reputable sites.
Cheers,
Alex
Thanks Alex for these precisions 🙂
Hi, Whats the best solution if we want to create browser like tab system in website, if we avoid iframe?
Hi, Hassan. For tabs I suggest “Tabs & Sliders” from our sister web site JoomlaShack.com. Please take a look at the “Tabs example” section at https://demoextensions.joomlashack.com/tabs-and-sliders.
This article is mileading and should be corrected. Reason #3. Iframes Cause SEO Problems refers to tag not
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?
You are welcome, Dave.
[quote=Dave]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?[/quote]
Are you talking about referring to one of your sites from another of your sites?
If yes, then you do minimize a risk of a XSS attack. I just don’t see why would you need to use IFrame though. Can it be done with a short video, for example?
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?
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
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?
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.
Never say never, there are very valid exceptions.
… could you develop your comment please?
see my comment below
This seems to be for websites. Is there any issue for using i-frames for desktop apps? Thank you very much.
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.
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.
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!
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
Wow!!! I have got a clear concept using iframe. I also share it with my co-workers.
Hope you read the comments….A lot of this information is outdated or inaccurate.
This article reminds me ‘drugs are bad, mkay…because….drugs are bad, mkay’
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.
Folks what are the alternatives then?
We are facing lot of issues when working with Angular and iframe..
I use
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.
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
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.