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),
<object>s are for embedding PDFs, SVG, and Flash, howerve,
<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:
<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)
Now Let’s explore some attributes available for
For speed and SEO (speed is an important SEO metric), it’s better to set
If set, the
<iframe>is able to be placed in fullscreen mode.
Specify the width and height of the frame.
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: noneto do it.
When enabled, requests heightened security settings. More about sandbox below
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.
You should serve your websites using HTTPS whenever possible:
- HTTPS reduces the chance that remote content has been tampered when transiting.
- 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.
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
Notice that you should never add both
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.
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.
We can use
<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
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.
<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
<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