An iframe or inline frame is essentially a browser window set within the web page. These frames are sections of the web page that can be ‘cut out’ to allow information from an external source. Iframes are one of the only type of frames that HTML5 allows and are usually present on websites that show external content as a feed within their web pages.
What do Iframes do?
Iframes essentially allow for external content to be included within a web page. External content would consist of advertisements from advertising networks or any promotional material which is not editorial content. Using an iframe for this information is similar to having two browser windows open on the same page, where the main window shows the webpage content, and the secondary window displays the external content. The benefit here is that the actual content on the website does not get diluted because search engines do not consider these advertisements as primary content.
How to use the Iframe element?
A simple iframe can be built by setting the source URL, width and height.
For example: <iframe src=”URL” width=”200px” height=”200px”>Alternate text if the iframe cannot be rendered </iframe>.
It is also possible to use percentage instead of pixel values for the settings of the Iframe. This is useful while building a responsive website where the size changes with different screen sizes. The iframe uses HTML5 and HTML 4.01 global elements apart from others. They are as follows:
- URL which is the source of the frame.
- Name, height and width of the window.
- ‘srcdoc’ takes priority over any URL. It is the HTML for the source of the frame.
- Sandbox is the features that should be defined as allowed or not in the frame window.
- Seamless is an attribute which communicates that the iframe should flow as an integral part of the parent document or URL.
While most websites today are built using HTML5+, some attributes are valid in HTML 4.01 which are part of legacy documents, including:
- Usage of an ‘A’ element to link a description
- Usage of border CSS property
- Usage of CSS float property
- Usage of CSS background property to allow transparency of the iframe.
- Usage of CSS margin property for margin width and height (margin height and margin width)
- Usage of CSS overflow property
Browser support for iframes
The iframe element is supported by all the modern web browsers. In the list of browsers mentioned below, those listed without version numbers implies that all versions of the browser support it.
- Internet Explorer 2+
- iOS, Safari, Safari Mobile
- Netscape 7+
- Opera 3+
While all browsers support iframe, there is limited support for some HTML5 features, and none of the browsers support srcdoc, sandbox, and seamless attributes. If scroll bars are not needed on the Iframes, scrolling attribute can continue. The use of ‘overflow’ is not reliable to stop scrolling.
Linking and iframes
Iframes when given an ID or name, allow you to direct links within the frame using the attribute on the ‘A’ element. When a user clicks, rather than opening in a current window, the link opens within a referenced iframe. If there are no targets provided on the document opened in the iframe, all the links open in the parent document’s iframe. This characteristic helps alter the content in another iframe using the links of one iframe present on the same webpage.
Advantages of using iframes:
- It allows for third party media to be present on the web page
- It is a powerful way of strengthening the website with rich content that visitors like
- It allows inclusion of your media
- The presence of iframes do not affect the quality of content on the webpage neither does it affect the ranking in search engines.
- If you have content that you do not want search engines to crawl, an iframe is an effective way to exclude the content from being crawled and indexed.
- Third party applets such as payment forms can be incorporated
- Code examples can be embedded
Disadvantages of using Iframes
- It can be misused easily leading to security issues
- It is mainly useful to embed existing HTML document into a current page.
- Iframes are not useful for photo galleries, forums and if you need to build from scratch and interfere a lot into breaking the page design into several independent documents.
- Malicious iframe code can be used to attack prominent websites. Iframe code is inserted into saved search results of websites and when a link from the tampered search tool is clicked on, the user gets redirected to detrimental content by the Iframe code. This makes the user’s computer susceptible to a malware download.
- Some computer viruses can also introduce invisible iframes into your webpages and convert it into a ‘botnet’ through SQL and other attacks.
Are there Security Concerns with Iframes?
By themselves, iframes do not pose a risk to you or your website users/readers, and neither is it risky to link your pages in iframes. However, malicious websites often use iframes to infiltrate unfavorable content that can infect a visitor’s computer without visibility or their knowledge. While adding iframes in your site, you need to be careful of the content of all the sites you link to. If you have reason to believe that sites are not reliable or trustworthy, avoid linking them or their contents in an iframe.
Iframes are simple, flexible and can make your website interactive and user-friendly. There is an element of risk if the iframe contains unreliable content, but ensuring that trustworthy information is linked in the iframe can help avoid such issues.
CEO, Flying Cow Design
Attended University of Auckland
Lives in San Francisco Bay Area