Iframs in HTML

This post is based on From object to iframe — other embedding technologies on MDN.

<iframe>s are for embedding other web pages (such as Bilibili video or Google map), <embed>s and <object>s are for embedding PDFs, SVG, and Flash, howerve, <embed> and <object> elements are king of outdated these days, we will mainly focus on <iframe>s in this post.

<iframe> stands for inline frame, the frame word comes from a history of the Web: long time ago, it was popular to use frames to create website, and frames here are small parts of a website stored in an individual HTML page on their own, for more about this history, see A short history of embedding on MDN.

To embed a Bilibili video on your page:

1
2
3
4
5
6
7
8
9
10
11
12
13
<iframe
src="//player.bilibili.com/player.html?aid=91027422&bvid=BV1Hj411f71D&cid=155438715&page=1"
allowfullscreen
width="100%"
height="500"
style="border: none"
>
<p>
<a href="https://www.bilibili.com/video/BV1Hj411f71D"
>Fallback link for browsers that don't support iframe</a
>
</p>
</iframe>

With <iframe>, you can save the time for implementing functions like video (from online video providers), commenting system (from Disqus or LiveRe) or maps (from Google Map)

Attributes of <iframe>

Now Let’s explore some attributes available for <iframe>:

  • src

    For speed and SEO (speed is an important SEO metric), it’s better to set src using JavaScript after the main content of your page is rendered, this makes your page usable sooner.

  • allowfullscreen

    If set, the <iframe> is able to be placed in fullscreen mode.

  • width and height

    Specify the width and height of the frame.

  • frameborder

    Deprecated, default set to 1, browser will draw a border around the frame, if set to 0, the border will be removed, but you can see that in the above example, we use CSS border: none to do it.

  • sandbox

    When enabled, requests heightened security settings. More about sandbox below

Security

Iframs are common attack vectors for hackers, for secrity, some best practices when using <iframe>s are talked below:

Clickjacking is a 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 user’s interactions.

Use HTTPS

You should serve your websites using HTTPS whenever possible:

  1. HTTPS reduces the chance that remote content has been tampered when transiting.
  2. HTTPS prenvents embedded content from accessing content in its parent document, and vice versa.

If you can’t get a security certificate which is necessary for HTTPS, it’s ok to serve your own page using HTTP, but you should never embed frame with HTTP for the second pros of HTTPS talked above.

Always Use the sandbox Attribute

If an iframe is unsanboxed, it can execute JavaScript code, submit forms, pop up windows and etc. Use the sandbox attribute to impose all available restrictions.

In some cases, if you want add some permissions, for example, you can set the sandbox attribute to allow-scripts allow-popups to enable executing JavaScript code and popping up windows, see the full list of sandbox values on MDN.

Notice that you should never add both allow-srcipts and allow-same-origin to your sandbox attribute, in that case, the embeded content could bypass the same-origin security and use JavaScript to turn off sandboxing altogether.

Same-origin policy: a critical security mechanism that restricts how a document or script loaded from one origin can interact with resources from another origin. It helps isolate potentially malicious documents, reducing possible attack vectors.

Configure CSP

When sending your HTML document using HTTP, you can configure your server to send an approprite X-Frame-Options header to prevent you pages from being embeded on other websites.

X-Frame-Options header can be set to DENY if you want all attempts to load your page in a frame failing, or SAMEORIGIN if you want to use the page in a frame from the website of the same origin.

Miscellaneous

<embed> and <object>

We can use <embed> and <object> to embed many types of external contents, including pugin technologies like Java Applets, Flash, and PDF, and even contents like videos, SVG and images.

A plugin, in this context, refers to a software that provides access to content that the browser cannot read natively.

For example, to embed a PDF file using <object>:

1
2
3
4
5
6
7
8
9
10
11
12
<object
data="mypdf.pdf"
type="application/pdf"
width="100%"
height="1200"
typemustmatch
>
<p>
You don't have a PDF plugin, but you can
<a href="mypdf.pdf">download the PDF file. </a>
</p>
</object>

However, plugins and these embeding methods are legacy technologies today, Java Applets and Flash is no longer popular, PDFs are better to be linked than embedded, and other contents like videos and images owns better elements to handle themselves.

Instead of using theses plugin technologies, if you need interactivity, HTML and JavaScript can get the job done without Java Applets; if you need videos, beautiful graphics or complex animations, without Adobe Flash, HTML5 <video> elements can show videos, SVG is for vector graphics, and Canvas is for complex images and animations.

So we don’t need to learn too much about <object> and <embed>, we only need to see the docs on MDN when we meet them some days later.

From object to iframe — other embedding technologies by Mozilla Contributors is licensed under CC-BY-SA 2.5