An iframe (short for “inline frame”) is HTML syntax that allows you to embed a web page within another web page. The most useful feature of an iFrames is its ability to have multiple HTML pages displayed in the same browser windows (while keeping them static and logically segregated).
However, the web world soon realised that using frames is a flawed approach. Even though there were some benefits to using them, there were other issues that came into light, particular around issues relating to websites security, usability and SEO.
Reason #1: iFrames introduce security risks
When an iFrame is added to a page, the website becomes vulnerable to cross-site attacks. Some things that can happen are:
- 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; and,
- a malicious user can hijack your users' keystrokes.
Basically, avoiding the use of iFrames will lower the risk of XSS attacks and maintain the security integrity of your website. To avoid the potential security risks, our hosting accounts prevent the use of iFrames by default. If you need to use an iFrame, we will need to "relax" the security configuration of your hosting account.
Reason #2: iFrames cause usability issues
The iFrame tag is notorious for creating usability annoyances. Among most common of them are:
- it tends to break the "Back" button in the browser being used;
- 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 because it can ignore the styles sheets from within the main website;
- content within the iframe is missing since the source URL changed; and,
- navigation of the site in the iframe stops working.
It is recommended to find better ways to refer your visitors to external content, or by serving the content from your own website, instead of placing it within an iFrame tag.
Reason #3: iFrames cause SEO problems
Search engines do support frames and iframes, but only to the extent that they can. In Google’s own statement, “Frames can cause problems for search engines because they don’t correspond to the conceptual model of the web. In this model, one page displays only one URL. Pages that use frames or iframes display several URLs (one for each frame) within a single page. Google tries to associate framed content with the page containing the frames, but we don’t guarantee that we will.” (Google & Frames, 2016)
In the above announcement, Google merely hints at the fact that search engine spiders are unable to index more than the master page, and that results in the inability to effectively index the site’s content. There are ways to help search engines to index the pages that use frames, such as by using methods that implement noframes, but those were all just a workaround approaches. Thus soon enough, most website professionals have realised that frames need to be replaced by other HTML tags and techniques.
Conclusion
You may be facing what seems like a small layout issue with your iFrame tag today, and the use of an iFrame could be a quick and easy solution for you now, but you will get problems with SEO, usability or security in the future. We strongly advise you stay away from using the iFrame tag and create pages that serve all the content and functionality within your own website.
