What is an iFrame?

An inline frame (iFrame) is an element that loads another HTML element inside of a web page. They are commonly used to embed specific content like external ads, videos, tags, or other interactive elements into the page.

So, you may be wondering how it’s done. Chances are the web designer put an iFrame element within that page.

In this article, we will take a closer look at iFrame and how to use it, and talk about other factors worth considering before you put an iFrame into your HTML document.

How to use iFrame

You shouldn’t use iFrame excessively. It can slow down your page and pose a security risk, especially if you use content from a suspicious website. Think about an iFrame as a part of your content, but not part of your site. For example, if you want to add a YouTube video, you can insert an iFrame element to that post.

Now you know that iFrame is an additional element to share content from other sites. You can add it to give context about a certain topic to the readers. You can insert an iFrame element by using the <iframe> tag in an HTML document. Copy the code below and paste it to notepad, and save the file as .html format:

<iframe src="https://www.youtube.com/embed/dXBohfjc4WA" width="680" height="480" allowfullscreen></iframe>

The code above will display a YouTube tutorial video by Hostinger. Let’s examine each tag separately:

• The <iframe>…</iframe> tag is used to contain the video within the iFrame.
• The iFrame source (src) is the origin of the content from the external or internal server. Don’t forget to put the embedded code in the URL.
• Width and height is the aspect ratio of the iFrame. You can insert a fixed sizes such as 680×480 pixels (px) as in the example. Or, you can use a percentage (10%-100%) based method to adjust the iFrame automatically.

Security threats of using iFrame

By nature, the iFrame element does not pose any security risk for your web page or your readers. Partly, it was developed to help content makers add visually engaging material to the readers. Nevertheless, you need to pay attention when adding an iFrame from an untrusted site website.

Using iFrames from untrusted or unknown sources can potentially expose your website to various threats, such as malicious JavaScript or cross-site scripting (XSS). These types of attacks redirect visitors to a malicious site, which can then install a virus to the visitors’ PC or attempt to steal sensitive information. That is why it is not recommended to include iFrame as an integral part of your website.

To reduce risk, websites should:

• Ensure that external websites are properly secured (e.g., HTTPS, no mixed content).
• Only embed content from trusted sources.
• Use the sandbox attribute to restrict actions within the iFrame.

Conclusion

All in all, iFrame is a powerful element if you want more engagement for your visitors. Think of iFrame as part of the content that you make, not as an integral part of your website.

You shouldn’t use iFrame excessively though; it is better if you can develop your site without iFrame. If you still need to use it for development purposes, remember only to use content from a trustworthy site. We hope that this article helps you on implementing and understanding iFrame.