HTML Embedding technologies: iFrames and Objects

Introduction

First came frames and framesets in HTML, these allow small html pages to be placed at different locations on the main html page. They were cool as they used to help optimise the network speed and also small chunks of web page were easier to download.

Then came plugins like Java Applets and Flash. They were also cool as they allowed to embed rich content like videos and animations to a web page. Embedding these technologies was achieved through elements like <object>, and the lesser-used <embed>, and they were very useful at the time.

Both the above technologies have since fallen out of fashion due to many problems, including accessibility, security, file size, and more. The network speed advantage is far outweighed due to above reasons, and so, you don’t see them being used anymore. These days major browsers have stopped supporting plugins such as Flash. Finally, the <iframe> element appeared (along with other ways of embedding content, such as <canvas>, <video>, etc.) This provides a way to embed an entire web document inside another one, as if it were an <img> or other such element, and is used regularly today

Classic embedding uses

1. First, we will go to YouTube and find a video we like.
2. Below the video, we will find a Share button — select this to display the sharing options.
3. Select the Embed button and we will be given some <iframe> code — copy this.
4. Insert it into the Input box below, and see what the result is in the Output.

For bonus points, we could also try embedding a google map in the example:

1. Go to Google Maps and find a map/location of choice.
2. Click on the “Hamburger Menu” (three horizontal lines) in the top left of the UI.
3. Select the Share or embed map option.
4. Select the Embed map option, which will give you some <iframe> code — copy this.
5. Insert it into the Input box below, and see what the result is in the Output.

Description-iframes

So, that was easy and fun, right? <iframe> elements are designed to allow you to embed other web documents into the current document. This is great for incorporating third-party content into your website that you might not have direct control over and don’t want to have to implement your own version of — such as video from online video providers, commenting systems like Disqus, maps from online map providers, advertising banners, live editable examples you’ve been using through MDN Play or Sandboxes on Geeks for Geeks are implemented using <iframe>s.

Attributes essentials needed to use an <iframe>: border: none, allowfullscreen, src, width and height, and sandbox.

A word about ‘sandbox’. This is for enhanced security. If you want to give attackers as little power as you can to do bad things on your website, you should give embedded content only the permissions needed for doing its job. Of course, this applies to your own content, too. A container for code where it can be used appropriately — or for testing — but can’t cause any harm to the rest of the codebase (either accidental or malicious) is called a sandbox.

Security Concerns

Before diving into using <iframe> elements, there are some security concerns to be aware of. Say you wanted to include the MDN glossary on one of your web pages using the <iframe> element, you might try something like the next code example. If you were to add the code below into one of your pages, you might be surprised to see an error message instead of the glossary page.

Browser makers and Web developers have learned the hard way that iframes are a common target (official term: attack vector) for bad people on the Web (often termed hackers, or more accurately, crackers) to attack if they are trying to maliciously modify your webpage, or trick people into doing something they don’t want to do, such as reveal sensitive information like usernames and passwords. Because of this, spec engineers and browser developers have developed various security mechanisms for making <iframe>s more secure, and there are also best practices to consider — we’ll cover some of these below.

Note: “Clickjacing” is one kind of common iframe attack where hackers embed an invisible iframe into your document (or embed your document into their own malicious website) and use it to capture users’ interactions. This is a common way to mislead users or steal sensitive data.

Only embed when necessary and use HTTPS. You should serve your websites using HTTPS whenever possible.

1. HTTPS reduces the chance that remote content has been tampered with in transit.
2. HTTPS prevents embedded content from accessing content in your parent document, and vice versa

Conclusion

The topic of embedding other content in web documents can quickly become very complex, so in this article, we’ve tried to introduce it in a simple, familiar way that will immediately seem relevant, while still hinting at some of the more advanced features of the involved technologies. To start with, you are unlikely to use embedding for much beyond including third-party content like maps and videos on your pages. As you become more experienced, however, you are likely to start finding more uses for them.

There are many other technologies that involve embedding external content besides the ones we discussed here. We saw some in earlier articles, such as <video>, <audio>, and <img>, but there are others to discover, such as <canvas> for JavaScript-generated 2D and 3D graphics, and <svg> for embedding vector graphics. We’ll look at SVG in the next article of the module.