HTML Standard

HTML Standard
4.8.5
The
iframe
element
4.8.6
The
embed
element
4.8.7
The
object
element
4.8.5
The
iframe
element
Element/iframe
Support in all current engines.
Firefox
1+
Safari
4+
Chrome
1+
Opera
15+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
Yes
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
14+
HTMLIFrameElement
Support in all current engines.
Firefox
1+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
1+
Chrome Android
WebView Android
37+
Samsung Internet
Opera Android
12.1+
HTMLIFrameElement/src
Support in all current engines.
Firefox
1+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
1+
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
HTMLObjectElement/width
Support in all current engines.
Firefox
1+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
1+
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
HTMLObjectElement/height
Support in all current engines.
Firefox
1+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
1+
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
Categories
Flow content
Phrasing content
Embedded content
Interactive content
Palpable content
Contexts in which this element can be used
Where
embedded content
is expected.
Content model
Nothing
Tag omission in text/html
Neither tag is omissible.
Content attributes
Global attributes
src
— Address of the resource
srcdoc
— A document to render in the
iframe
name
— Name of
content navigable
sandbox
— Security rules for nested content
allow
Permissions policy
to be applied to the
iframe
's contents
allowfullscreen
— Whether to allow the
iframe
's contents to use
requestFullscreen()
width
— Horizontal dimension
height
— Vertical dimension
referrerpolicy
Referrer policy
for
fetches
initiated by the element
loading
— Used when determining loading deferral
Accessibility considerations
For authors
For implementers
DOM interface
Exposed
Window
interface
HTMLIFrameElement
HTMLElement
HTMLConstructor
constructor
();

CEReactions
ReflectURL
attribute
USVString
src
CEReactions
attribute
TrustedHTML
or
DOMString
srcdoc
CEReactions
Reflect
attribute
DOMString
name
SameObject
PutForwards
value
Reflect
readonly
attribute
DOMTokenList
sandbox
CEReactions
Reflect
attribute
DOMString
allow
CEReactions
Reflect
attribute
boolean
allowFullscreen
CEReactions
Reflect
attribute
DOMString
width
CEReactions
Reflect
attribute
DOMString
height
CEReactions
attribute
DOMString
referrerPolicy
CEReactions
attribute
DOMString
loading
readonly
attribute
Document
contentDocument
readonly
attribute
WindowProxy
contentWindow
Document
getSVGDocument
();

//
also has obsolete members
};
The
iframe
element
represents
its
content navigable
The
src
attribute
gives the
URL
of a page that the element's
content navigable
is to
contain. The attribute, if present, must be a
valid non-empty URL potentially surrounded by
spaces
. If the
itemprop
attribute is specified on an
iframe
element, then the
src
attribute must
also be specified.
Element/iframe#attr-srcdoc
Support in all current engines.
Firefox
25+
Safari
6+
Chrome
20+
Opera
Edge
79+
Edge (Legacy)
Internet Explorer
No
Firefox Android
Safari iOS
Chrome Android
WebView Android
37+
Samsung Internet
Opera Android
The
srcdoc
attribute gives the content of the page that the element's
content navigable
is to
contain. The value of the attribute is used to
construct
an
iframe
srcdoc
document
, which is a
Document
whose
URL
matches
about:srcdoc
The
srcdoc
attribute, if present, must have a value
using
the HTML syntax
that consists of the following syntactic components, in the
given order:
Any number of
comments
and
ASCII
whitespace
Optionally, a
DOCTYPE
Any number of
comments
and
ASCII
whitespace
The
document element
, in the form of an
html
element
Any number of
comments
and
ASCII
whitespace
The above requirements apply in
XML documents
as well.
Here a blog uses the
srcdoc
attribute in conjunction
with the
sandbox
attribute described below to provide
users of user agents that support this feature with an extra layer of protection from script
injection in the blog post comments:
article
h1
I got my own magazine!
h1
After much effort, I've finally found a publisher, and so now I
have my own magazine! Isn't that awesome?! The first issue will come
out in September, and we have articles about getting food, and about
getting in boxes, it's going to be great!
footer
Written by
href
"/users/cap"
cap
, 1 hour ago.
footer
article
footer
Thirteen minutes ago,
href
"/users/ch"
ch
wrote:
footer
iframe
sandbox
srcdoc
"

did you get a cover picture yet?"
>iframe
article
article
footer
Nine minutes ago,
href
"/users/cap"
cap
wrote:
footer
iframe
sandbox
srcdoc
"

Yeah, you can see it in my gallery."
>iframe
article
article
footer
Five minutes ago,
href
"/users/ch"
ch
wrote:
footer
iframe
sandbox
srcdoc
"

hey that's earl's table.

you should get earl&me on the next cover."
>iframe
article
Notice the way that quotes have to be escaped (otherwise the
srcdoc
attribute would end prematurely), and the way raw
ampersands (e.g. in URLs or in prose) mentioned in the sandboxed content have to be
doubly
escaped — once so that the ampersand is preserved when originally parsing
the
srcdoc
attribute, and once more to prevent the
ampersand from being misinterpreted when parsing the sandboxed content.
Furthermore, notice that since the
DOCTYPE
is optional in
iframe
srcdoc
documents
, and the
html
head
, and
body
elements have
optional
start and end tags
, and the
title
element is also optional in
iframe
srcdoc
documents
, the markup in a
srcdoc
attribute can be
relatively succinct despite representing an entire document, since only the contents of the
body
element need appear literally in the syntax. The other elements are still
present, but only by implication.
In
the HTML syntax
, authors need only remember to use U+0022
QUOTATION MARK characters (") to wrap the attribute contents and then to escape all U+0026
AMPERSAND (&) and U+0022 QUOTATION MARK (") characters, and to specify the
sandbox
attribute, to ensure safe embedding of content. (And
remember to escape ampersands before quotation marks, to ensure quotation marks become "
and not ".)
In XML the U+003C LESS-THAN SIGN character (<) needs to be escaped as well. In
order to prevent
attribute-value
normalization
, some of XML's whitespace characters — specifically U+0009 CHARACTER
TABULATION (tab), U+000A LINE FEED (LF), and U+000D CARRIAGE RETURN (CR) — also need to be
escaped.
[XML]
If the
src
attribute and the
srcdoc
attribute are both specified together, the
srcdoc
attribute takes priority. This allows authors to provide
a fallback
URL
for legacy user agents that do not support the
srcdoc
attribute.
The
iframe
HTML element post-connection steps
, given
insertedNode
, are:
If
insertedNode
has a
sandbox
attribute, then
parse the sandboxing
directive
given the attribute's value and
insertedNode
's
iframe
sandboxing flag set
Create a new child navigable
for
insertedNode
Process the
iframe
attributes
for
insertedNode
, with
initialInsertion
set to true.
The
iframe
HTML element removing steps
, given
removedNode
, are to
destroy a child navigable
given
removedNode
This happens without any
unload
events firing
(the element's
content document
is
destroyed
, not
unloaded
).
Although
iframe
s are processed while in a
shadow tree
per the above, several other aspects of their behavior are not well-defined with regards to
shadow trees. See
issue #763
for more
detail.
Whenever an
iframe
element with a non-null
content navigable
has its
srcdoc
attribute set, changed, or removed, the user
agent must
process the
iframe
attributes
Similarly, whenever an
iframe
element with a non-null
content
navigable
but with no
srcdoc
attribute specified
has its
src
attribute set, changed, or removed, the user
agent must
process the
iframe
attributes
To
process the
iframe
attributes
for an element
element
with an optional boolean
initialInsertion
(default false):
If
element
's
srcdoc
attribute is
specified, then:
Set
element
's
current navigation was lazy loaded
boolean to
false.
If the
will lazy load element steps
given
element
return true,
then:
Set
element
's
lazy load resumption steps
to the rest of this
algorithm starting with the step labeled
navigate to the srcdoc resource
Set
element
's
current navigation was lazy loaded
boolean to
true.
Start intersection-observing a lazy loading element
for
element
Return.
Navigate to the srcdoc resource
Navigate an
iframe
or
frame
given
element
about:srcdoc
, the empty
string, and the value of
element
's
srcdoc
attribute.
The resulting
Document
must be considered
an
iframe
srcdoc
document
Otherwise:
Let
url
be the result of running the
shared attribute processing steps
for
iframe
and
frame
elements
given
element
and
initialInsertion
If
url
is null, then return.
If
url
matches
about:blank
and
initialInsertion
is true, then:
Run the
iframe load event steps
given
element
Return.
Let
referrerPolicy
be the current state of
element
's
referrerpolicy
content attribute.
Set
element
's
current navigation was lazy loaded
boolean to
false.
If the
will lazy load element steps
given
element
return true,
then:
Set
element
's
lazy load resumption steps
to the rest of this
algorithm starting with the step labeled
navigate
Set
element
's
current navigation was lazy loaded
boolean to
true.
Start intersection-observing a lazy loading element
for
element
Return.
Navigate
Navigate an
iframe
or
frame
given
element
url
, and
referrerPolicy
The
shared attribute processing steps
for
iframe
and
frame
elements
, given an element
element
and a boolean
initialInsertion
, are:
Let
url
be the
URL record
about:blank
If
element
has a
src
attribute specified,
and its value is not the empty string, then:
Let
maybeURL
be the result of
encoding-parsing a URL
given that
attribute's value, relative to
element
's
node document
If
maybeURL
is not failure, then set
url
to
maybeURL
If the
inclusive ancestor navigables
of
element
's
node
navigable
contains a
navigable
whose
active
document
's
URL
equals
url
with
exclude fragments
set to true, then return null.
If
url
matches
about:blank
and
initialInsertion
is true, then perform the
URL and history update steps
given
element
's
content navigable
's
active
document
and
url
This is necessary in case
url
is something like
about:blank?foo
. If
url
is just plain
about:blank
, this will do nothing.
Return
url
To
navigate an
iframe
or
frame
given an element
element
, a
URL
url
, a
referrer policy
referrerPolicy
, an optional string-or-null
srcdocString
(default
null), and an optional boolean
initialInsertion
(default false):
Let
historyHandling
be "
auto
".
If
element
's
content navigable
's
active document
is not
completely loaded
, then set
historyHandling
to "
replace
".
If
element
is an
iframe
, then set
element
's
pending resource-timing start time
to
the
current high resolution time
given
element
's
node document
's
relevant global object
Navigate
element
's
content
navigable
to
url
using
element
's
node document
, with
historyHandling
set to
historyHandling
referrerPolicy
set to
referrerPolicy
documentResource
set to
srcdocString
, and
initialInsertion
set to
initialInsertion
Each
Document
has an
iframe load in progress
flag and a
mute
iframe load
flag. When a
Document
is created, these flags must be unset for
that
Document
To run the
iframe load event steps
, given an
iframe
element
element
Assert
element
's
content navigable
is not
null.
Let
childDocument
be
element
's
content navigable
's
active document
If
childDocument
has its
mute iframe load
flag set, then
return.
If
element
's
pending resource-timing start time
is
not null, then:
Let
global
be
element
's
node document
's
relevant global object
Let
fallbackTimingInfo
be a new
fetch timing info
whose
start time
is
element
's
pending resource-timing start time
and whose
response end time
is the
current high resolution time
given
global
Mark resource timing
given
fallbackTimingInfo
url
iframe
",
global
, the empty string, a new
response body info
, and 0.
Set
element
's
pending resource-timing start time
to null.
Set
childDocument
's
iframe load in progress
flag.
Fire an event
named
load
at
element
Unset
childDocument
's
iframe load in progress
flag.
This, in conjunction with scripting, can be used to probe the URL space of the
local network's HTTP servers. User agents may implement
cross-origin
access control policies that are stricter than those described above to mitigate this attack, but
unfortunately such policies are typically not compatible with existing web content.
If an element type
potentially delays the load event
, then for each element
element
of that type, the user agent must
delay the load event
of
element
's
node document
if
element
's
content
navigable
is non-null and any of the following are true:
element
's
content navigable
's
active
document
is not
ready for post-load tasks
element
's
content navigable
's
is delaying
load
events
is true; or
anything is
delaying the load event
of
element
's
content navigable
's
active
document
If, during the handling of the
load
event,
element
's
content navigable
is again
navigated
, that will further
delay the load event
Each
iframe
element has an associated
current navigation was lazy
loaded
boolean, initially false. It is set and unset in the
process the
iframe
attributes
algorithm.
An
iframe
element whose
current navigation was lazy loaded
boolean is
false
potentially delays the load event
Each
iframe
element has an associated null or
DOMHighResTimeStamp
pending resource-timing start time
initially set to null.
If, when the element is created, the
srcdoc
attribute is not set, and the
src
attribute is either also not set or set but its value cannot
be
parsed
, the element's
content
navigable
will remain at the
initial
about:blank
Document
If the user
navigates
away from this page, the
iframe
's
content navigable
's
active
WindowProxy
object will proxy new
Window
objects for new
Document
objects, but the
src
attribute will
not change.
The
name
attribute, if present, must be a
valid navigable target name
. The given value is
used to name the element's
content navigable
if present when that is
created
Element/iframe#attr-sandbox
Support in all current engines.
Firefox
17+
Safari
5+
Chrome
4+
Opera
Edge
79+
Edge (Legacy)
12+
Internet Explorer
10+
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
The
sandbox
attribute, when specified, enables a set of extra restrictions on any content hosted by the
iframe
. Its value must be an
unordered set of unique space-separated
tokens
that are
ASCII case-insensitive
. The allowed values are:
allow-downloads
allow-forms
allow-modals
allow-orientation-lock
allow-pointer-lock
allow-popups
allow-popups-to-escape-sandbox
allow-presentation
allow-same-origin
allow-scripts
allow-top-navigation
allow-top-navigation-by-user-activation
allow-top-navigation-to-custom-protocols
When the attribute is set, the content is treated as being from a unique
opaque origin
, forms, scripts, and various potentially
annoying APIs are disabled, and links are prevented from targeting other
navigables
. The
allow-same-origin
keyword causes the
content to be treated as being from its real origin instead of forcing it into an
opaque origin
; the
allow-top-navigation
keyword allows the
content to
navigate
its
traversable navigable
the
allow-top-navigation-by-user-activation
keyword behaves similarly but allows such
only when the
browsing context's
active window
has
transient
activation
; the
allow-top-navigation-to-custom-protocols
reenables navigations toward non
fetch scheme
to be
handed off to external software
; and the
allow-forms
allow-modals
allow-orientation-lock
allow-pointer-lock
allow-popups
allow-presentation
allow-scripts
, and
allow-popups-to-escape-sandbox
keywords re-enable forms, modal dialogs, screen orientation lock, the pointer lock API, popups,
the presentation API, scripts, and the creation of unsandboxed
auxiliary browsing contexts
respectively. The
allow-downloads
keyword allows content to
perform downloads.
[POINTERLOCK]
[SCREENORIENTATION]
[PRESENTATION]
The
allow-top-navigation
and
allow-top-navigation-by-user-activation
keywords must not both be specified, as doing so is redundant; only
allow-top-navigation
will have an effect
in such non-conformant markup.
Similarly, the
allow-top-navigation-to-custom-protocols
keyword must not be specified if either
allow-top-navigation
or
allow-popups
are specified, as doing so is
redundant.
To allow
alert()
confirm()
, and
prompt()
inside
sandboxed content, both the
allow-modals
and
allow-same-origin
keywords need to
be specified, and the loaded URL needs to be
same origin
with the
top-level
origin
. Without the
allow-same-origin
keyword, the content is
always treated as cross-origin, and cross-origin content
cannot show simple
dialogs
Setting both the
allow-scripts
and
allow-same-origin
keywords together when the
embedded page has the
same origin
as the page containing the
iframe
allows the embedded page to simply remove the
sandbox
attribute and then reload itself, effectively breaking out of the sandbox altogether.
These flags only take effect when the
content navigable
of the
iframe
element is
navigated
. Removing them, or
removing the entire
sandbox
attribute, has no effect on
an already-loaded page.
Potentially hostile files should not be served from the same server as the file
containing the
iframe
element. Sandboxing hostile content is of minimal help if an
attacker can convince the user to just visit the hostile content directly, rather than in the
iframe
. To limit the damage that can be caused by hostile HTML content, it should be
served from a separate dedicated domain. Using a different domain ensures that scripts in the
files are unable to attack the site, even if the user is tricked into visiting those pages
directly, without the protection of the
sandbox
attribute.
When an
iframe
element's
sandbox
attribute is set or changed while it has a non-null
content navigable
, the user
agent must
parse the sandboxing directive
given the attribute's value and the
iframe
element's
iframe
sandboxing flag set
When an
iframe
element's
sandbox
attribute is removed while it has a non-null
content navigable
, the user agent must
empty the
iframe
element's
iframe
sandboxing flag set
In this example, some completely-unknown, potentially hostile, user-provided HTML content is
embedded in a page. Because it is served from a separate domain, it is affected by all the normal
cross-site restrictions. In addition, the embedded page has scripting disabled, plugins disabled,
forms disabled, and it cannot navigate any frames or windows other than itself (or any frames or
windows it itself embeds).
We're not scared of you! Here is your content, unedited:
iframe
sandbox
src
"https://usercontent.example.net/getusercontent.cgi?id=12193"
>iframe
It is important to use a separate domain so that if the attacker convinces the
user to visit that page directly, the page doesn't run in the context of the site's origin, which
would make the user vulnerable to any attack found in the page.
In this example, a gadget from another site is embedded. The gadget has scripting and forms
enabled, and the origin sandbox restrictions are lifted, allowing the gadget to communicate with
its originating server. The sandbox is still useful, however, as it disables plugins and popups,
thus reducing the risk of the user being exposed to malware and other annoyances.
iframe
sandbox
"allow-same-origin allow-forms allow-scripts"
src
"https://maps.example.com/embedded.html"
>iframe
Suppose a file A contained the following fragment:
iframe
sandbox
"allow-same-origin allow-forms"
src
>iframe
Suppose that file B contained an iframe also:
iframe
sandbox
"allow-scripts"
src
>iframe
Further, suppose that file C contained a link:
href
Link
For this example, suppose all the files were served as
text/html
Page C in this scenario has all the sandboxing flags set. Scripts are disabled, because the
iframe
in A has scripts disabled, and this overrides the
allow-scripts
keyword set on the
iframe
in B. Forms are also disabled, because the inner
iframe
(in B)
does not have the
allow-forms
keyword
set.
Suppose now that a script in A removes all the
sandbox
attributes in A and B.
This would change nothing immediately. If the user clicked the link in C, loading page D into
the
iframe
in B, page D would now act as if the
iframe
in B had the
allow-same-origin
and
allow-forms
keywords set, because that was the
state of the
content navigable
in the
iframe
in A when page B was
loaded.
Generally speaking, dynamically removing or changing the
sandbox
attribute is ill-advised, because it can make it quite
hard to reason about what will be allowed and what will not.
The
allow
attribute, when specified, determines the
container
policy
that will be used when the
permissions policy
for a
Document
in the
iframe
's
content navigable
is initialized.
Its value must be a
serialized permissions
policy
[PERMISSIONSPOLICY]
In this example, an
iframe
is used to embed a map from an online navigation
service. The
allow
attribute is used to enable the
Geolocation API within the nested context.
iframe
src
"https://maps.example.com/"
allow
"geolocation"
>iframe
The
allowfullscreen
attribute is a
boolean
attribute
. When specified, it indicates that
Document
objects in the
iframe
element's
content navigable
will be initialized with a
permissions policy
which allows the "
fullscreen
" feature to be used from any
origin
. This is enforced by
the
process permissions policy
attributes
algorithm.
[PERMISSIONSPOLICY]
Here, an
iframe
is used to embed a player from a video site. The
allowfullscreen
attribute is needed to enable the
player to show its video fullscreen.
article
header
><
img
src
"/usericons/1627591962735"
Fred Flintstone
>><
href
"/posts/3095182851"
rel
12:44
href
"#acl-3095182851"
Private Post
>header
Check out my new ride!
iframe
src
"https://video.example.com/embed?id=92469812"
allowfullscreen
>iframe
article
Neither
allow
nor
allowfullscreen
can grant access to a feature in an
iframe
element's
content navigable
if the element's
node
document
is not already allowed to use that feature.
To determine whether a
Document
object
document
is
allowed to use
the policy-controlled-feature
feature
, run these
steps:
If
document
's
browsing context
is
null, then return false.
If
document
is not
fully active
, then return false.
If the result of running
is feature enabled in document
for origin
on
feature
document
, and
document
's
origin
is "
Enabled
", then return
true.
Return false.
Because they only influence the
permissions policy
of the
content
navigable
's
active document
, the
allow
and
allowfullscreen
attributes only take effect when the
content navigable
of the
iframe
is
navigated
. Adding or removing them has no effect on an already-loaded
document.
The
iframe
element supports
dimension attributes
for cases where the
embedded content has specific dimensions (e.g. ad units have well-defined dimensions).
An
iframe
element never has
fallback content
, as it will always
create a new child navigable
, regardless of whether the specified initial
contents are successfully used.
The
referrerpolicy
attribute is a
referrer policy attribute
. Its purpose is to set the
referrer policy
used when
processing the
iframe
attributes
as well as allowing masking of some
origins
in the
internal ancestor origin objects list
creation steps
[REFERRERPOLICY]
The
loading
attribute is a
lazy
loading attribute
. Its purpose is to indicate the policy for loading
iframe
elements that are outside the viewport.
When the
loading
attribute's state is changed to the
Eager
state, the user agent must run these
steps:
Let
resumptionSteps
be the
iframe
element's
lazy load
resumption steps
If
resumptionSteps
is null, then return.
Set the
iframe
's
lazy load resumption steps
to null.
Invoke
resumptionSteps
Descendants of
iframe
elements represent nothing. (In legacy user agents that do
not support
iframe
elements, the contents would be parsed as markup that could act as
fallback content.)
The
HTML parser
treats markup inside
iframe
elements as
text.
HTMLIFrameElement/srcdoc
Support in all current engines.
Firefox
25+
Safari
6+
Chrome
20+
Opera
Edge
79+
Edge (Legacy)
Internet Explorer
No
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
The
srcdoc
getter steps are:
Let
attribute
be the result of
getting an attribute by namespace and local
name
given null,
srcdoc
's
local name
, and
this
If
attribute
is null, then return the empty string.
Return
attribute
's
value
The
srcdoc
setter steps
are:
Let
compliantString
be the result of invoking the
get trusted type compliant string
algorithm with
TrustedHTML
this
's
relevant global
object
, the given value, "
HTMLIFrameElement srcdoc
", and "
script
".
Set an attribute value
given
this
srcdoc
's
local name
, and
compliantString
The
supported tokens
for
sandbox
's
DOMTokenList
are the allowed
values defined in the
sandbox
attribute and supported by
the user agent.
HTMLIFrameElement/referrerPolicy
Support in all current engines.
Firefox
50+
Safari
14+
Chrome
52+
Opera
Edge
79+
Edge (Legacy)
Internet Explorer
No
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
The
referrerPolicy
IDL attribute must
reflect
the
referrerpolicy
content
attribute,
limited to only known values
The
loading
IDL attribute must
reflect
the
loading
content attribute,
limited to only known
values
HTMLIFrameElement/contentDocument
Support in all current engines.
Firefox
1+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
8+
Firefox Android
Safari iOS
1+
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
The
contentDocument
getter steps are to return
this
's
content document
HTMLIFrameElement/contentWindow
Support in all current engines.
Firefox
1+
Safari
3+
Chrome
1+
Opera
8+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
1+
Chrome Android
WebView Android
Samsung Internet
Opera Android
10.1+
The
contentWindow
getter steps are to return
this
's
content window
Here is an example of a page using an
iframe
to include advertising from an
advertising broker:
iframe
src
"https://ads.example.com/?customerid=923513721&format=banner"
width
"468"
height
"60"
>iframe
4.8.6
The
embed
element
Element/embed
Support in all current engines.
Firefox
1+
Safari
4+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
Yes
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
HTMLEmbedElement
Support in all current engines.
Firefox
1+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
1+
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
Categories
Flow content
Phrasing content
Embedded content
Interactive content
Palpable content
Contexts in which this element can be used
Where
embedded content
is expected.
Content model
Nothing
Tag omission in text/html
No
end tag
Content attributes
Global attributes
src
— Address of the resource
type
— Type of embedded resource
width
— Horizontal dimension
height
— Vertical dimension
Any other attribute that has no namespace (see prose).
Accessibility considerations
For authors
For implementers
DOM interface
Exposed
Window
interface
HTMLEmbedElement
HTMLElement
HTMLConstructor
constructor
();

CEReactions
ReflectURL
attribute
USVString
src
CEReactions
Reflect
attribute
DOMString
type
CEReactions
Reflect
attribute
DOMString
width
CEReactions
Reflect
attribute
DOMString
height
Document
getSVGDocument
();

//
also has obsolete members
};
The
embed
element provides an integration point for an external application or
interactive content.
The
src
attribute
gives the
URL
of the resource being embedded. The attribute, if present, must contain
valid non-empty URL potentially surrounded by spaces
If the
itemprop
attribute is specified on an
embed
element, then the
src
attribute must also
be specified.
The
type
attribute,
if present, gives the
MIME type
by which the plugin to instantiate is selected. The
value must be a
valid MIME type string
. If both the
type
attribute and the
src
attribute are present, then the
type
attribute must specify
the same type as the
explicit Content-Type metadata
of the
resource given by the
src
attribute.
While any of the following conditions are occurring, any
plugin
instantiated for
the element must be removed, and the
embed
element
represents
nothing:
The element has neither a
src
attribute nor a
type
attribute.
The element has a
media element
ancestor.
The element has an ancestor
object
element that is
not
showing its
fallback content
An
embed
element is said to be
potentially
active
when the following conditions are all met simultaneously:
The element is
in a document
or was
in a document
the last time
the
event loop
reached
step 1
The element's
node document
is
fully active
The element has either a
src
attribute set or a
type
attribute set (or both).
The element's
src
attribute is either absent or its
value is not the empty string.
The element is not a descendant of a
media element
The element is not a descendant of an
object
element that is not showing its
fallback content
The element is
being rendered
, or was
being rendered
the last
time the
event loop
reached
step 1
Whenever an
embed
element that was not
potentially active
becomes
potentially active
, and whenever a
potentially active
embed
element that is
remaining
potentially active
has its
src
attribute set, changed, or removed or its
type
attribute set, changed, or removed, the user agent must
queue an element task
on the
embed task source
given the element
to run
the
embed
element setup steps
for that element.
The
embed
element setup steps
for a given
embed
element
element
are as follows:
If another
task
has since been queued to run
the
embed
element setup steps
for
element
, then return.
If
element
has a
src
attribute set, then:
Let
url
be the result of
encoding-parsing a URL
given
element
's
src
attribute's value, relative to
element
's
node document
If
url
is failure, then return.
Let
request
be a new
request
whose
URL
is
url
client
is
element
's
node
document
's
relevant settings object
destination
is "
embed
",
credentials mode
is "
include
",
mode
is "
navigate
",
initiator
type
is "
embed
", and whose
use-URL-credentials flag
is set.
Fetch
request
, with
processResponse
set to the following steps given
response
response
If another
task
has since been queued to run
the
embed
element setup steps
for
element
, then
return.
If
response
is a
network error
, then
fire an event
named
load
at
element
, and return.
Let
type
be the result of determining the
type of content
given
element
and
response
Switch on
type
null
Display no plugin
for
element
Otherwise
If
element
's
content navigable
is null, then
create a new child navigable
for
element
Navigate
element
's
content
navigable
to
response
's
URL
using
element
's
node
document
, with
response
set to
response
, and
historyHandling
set to "
replace
".
element
's
src
attribute
does not get updated if the
content navigable
gets further navigated to
other locations.
element
now
represents
its
content
navigable
Fetching the resource must
delay the load event
of
element
's
node document
Otherwise,
display no plugin
for
element
To determine the
type of the content
given an
embed
element
element
and a
response
response
, run the following steps:
If
element
has a
type
attribute, and that
attribute's value is a type that a
plugin
supports, then return the value of the
type
attribute.
If the
path
component of
response
's
url
matches a pattern that a
plugin
supports, then return the type that that plugin can handle.
For example, a plugin might say that it can handle URLs with
path
components that end with the four character string
.swf
".
If
response
has
explicit Content-Type
metadata
, and that value is a type that a
plugin
supports, then return that
value.
Return null.
It is intentional that the above algorithm allows
response
to have a
non-
ok status
. This allows servers to return data for plugins even with error
responses (e.g., HTTP 500 Internal Server Error codes can still contain plugin data).
To
display no plugin
for an
embed
element
element
Destroy a child navigable
given
element
Display an indication that no
plugin
could be found for
element
as the contents of
element
element
now
represents
nothing.
The
embed
element has no
fallback content
; its
descendants are ignored.
Whenever an
embed
element that was
potentially
active
stops being
potentially active
, any
plugin
that had been instantiated for that element must be unloaded.
The
embed
element
potentially delays the load event
The
embed
element supports
dimension attributes
4.8.7
The
object
element
Element/object
Support in all current engines.
Firefox
1+
Safari
3+
Chrome
1+
Opera
Edge
79+
Edge (Legacy)
12+
Internet Explorer
Yes
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
HTMLObjectElement
Support in all current engines.
Firefox
1+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
1+
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
HTMLObjectElement/data
Support in all current engines.
Firefox
1+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
1+
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
HTMLObjectElement/type
Support in all current engines.
Firefox
1+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
1+
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
HTMLObjectElement/name
Support in all current engines.
Firefox
1+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
1+
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
Categories
Flow content
Phrasing content
Embedded content
Listed
form-associated element
Palpable content
Contexts in which this element can be used
Where
embedded content
is expected.
Content model
Transparent
Tag omission in text/html
Neither tag is omissible.
Content attributes
Global attributes
data
— Address of the resource
type
— Type of embedded resource
name
— Name of
content navigable
form
— Associates the element with a
form
element
width
— Horizontal dimension
height
— Vertical dimension
Accessibility considerations
For authors
For implementers
DOM interface
Exposed
Window
interface
HTMLObjectElement
HTMLElement
HTMLConstructor
constructor
();

CEReactions
ReflectURL
attribute
USVString
data
CEReactions
Reflect
attribute
DOMString
type
CEReactions
Reflect
attribute
DOMString
name
readonly
attribute
HTMLFormElement
form
CEReactions
Reflect
attribute
DOMString
width
CEReactions
Reflect
attribute
DOMString
height
readonly
attribute
Document
contentDocument
readonly
attribute
WindowProxy
contentWindow
Document
getSVGDocument
();
readonly
attribute
boolean
willValidate
readonly
attribute
ValidityState
validity
readonly
attribute
DOMString
validationMessage
boolean
checkValidity
();
boolean
reportValidity
();
undefined
setCustomValidity
DOMString
error
);

//
also has obsolete members
};
Depending on the type of content instantiated by the
object
element, the node also supports other
interfaces.
The
object
element can represent an external resource, which, depending on the
type of the resource, will either be treated as an image or as a
child
navigable
The
data
attribute
specifies the
URL
of the resource. It must be present, and must contain a
valid non-empty URL potentially surrounded by spaces
The
type
attribute,
if present, specifies the type of the resource. If present, the attribute must be a
valid
MIME type string
The
name
attribute, if present, must be a
valid navigable target name
. The given value is
used to name the element's
content navigable
, if applicable, and if present when the
element's
content navigable
is
created
Whenever one of the following conditions occur:
the element is created,
the element is popped off the
stack of open elements
of an
HTML
parser
or
XML parser
the element is not on the
stack of open elements
of an
HTML parser
or
XML parser
, and it is either
inserted into a document
or
removed from a document
the element's
node document
changes whether it is
fully active
one of the element's ancestor
object
elements changes to or from showing its
fallback content
the element's
classid
attribute is set, changed, or
removed,
the element's
classid
attribute is not present, and
its
data
attribute is set, changed, or removed,
neither the element's
classid
attribute nor its
data
attribute are present, and its
type
attribute is set, changed, or removed,
the element changes from
being rendered
to not being rendered, or vice versa,
...the user agent must
queue an element task
on the
DOM manipulation task
source
given the
object
element to run the following steps to (re)determine
what the
object
element represents. This
task
being
queued
or actively running must
delay the load
event
of the element's
node document
If the user has indicated a preference that this
object
element's
fallback
content
be shown instead of the element's usual behavior, then jump to the step below
labeled
fallback
For example, a user could ask for the element's
fallback content
to
be shown because that content uses a format that the user finds more accessible.
If the element has an ancestor
media element
, or has an ancestor
object
element that is
not
showing its
fallback content
, or if
the element is not
in a document
whose
browsing
context
is non-null, or if the element's
node document
is not
fully
active
, or if the element is still in the
stack of open elements
of an
HTML parser
or
XML parser
, or if the element is not
being
rendered
, then jump to the step below labeled
fallback
If the
data
attribute is present and its value is
not the empty string, then:
If the
type
attribute is present and its value is
not a type that the user agent supports, then the user agent may jump to the step below labeled
fallback
without fetching the content to examine its real type.
Let
url
be the result of
encoding-parsing a URL
given the
data
attribute's value, relative to the element's
node
document
If
url
is failure, then
fire an
event
named
error
at the element and jump to the step
below labeled
fallback
Let
request
be a new
request
whose
URL
is
url
client
is the element's
node document
's
relevant settings object
destination
is "
object
",
credentials mode
is "
include
",
mode
is "
navigate
",
initiator
type
is "
object
", and whose
use-URL-credentials
flag
is set.
Fetch
request
Fetching the resource must
delay the load event
of the element's
node
document
until the
task
that is
queued
by the
networking task source
once the resource has been
fetched (defined next) has been run.
If the resource is not yet available (e.g. because the resource was not available in the
cache, so that loading the resource required making a request over the network), then jump to
the step below labeled
fallback
. The
task
that is
queued
by the
networking task source
once the
resource is available must restart this algorithm from this step. Resources can load
incrementally; user agents may opt to consider a resource "available" whenever enough data has
been obtained to begin processing the resource.
If the load failed (e.g. there was an HTTP 404 error, there was a DNS error),
fire an event
named
error
at the element, then jump to the step below labeled
fallback
Determine the
resource type
, as follows:
Let the
resource type
be unknown.
If the user agent is configured to strictly obey Content-Type headers for this resource,
and the resource has
associated Content-Type metadata
then let the
resource type
be the type specified in
the resource's Content-Type metadata
, and jump to the step below
labeled
handler
This can introduce a vulnerability, wherein a site is trying to embed a
resource that uses a particular type, but the remote site overrides that and instead
furnishes the user agent with a resource that triggers a different type of content with different
security characteristics.
Run the appropriate set of steps from the following
list:
If the resource has
associated Content-Type
metadata
Let
binary
be false.
If the type specified in
the resource's Content-Type
metadata
is "
text/plain
", and the result of applying the
rules for distinguishing if a resource is
text or binary
to the resource is that the resource is not
text/plain
, then set
binary
to true.
If the type specified in
the resource's Content-Type
metadata
is "
application/octet-stream
", then set
binary
to true.
If
binary
is false, then let the
resource
type
be the type specified in
the resource's
Content-Type metadata
, and jump to the step below labeled
handler
If there is a
type
attribute present on the
object
element, and its value is not
application/octet-stream
then run the following steps:
If the attribute's value is a type that starts with "
image/
" that is
not also an
XML MIME type
, then let the
resource type
be the
type specified in that
type
attribute.
Jump to the step below labeled
handler
Otherwise, if the resource does not have
associated
Content-Type metadata
If there is a
type
attribute present on the
object
element, then let the
tentative type
be the type
specified in that
type
attribute.
Otherwise, let
tentative type
be the
computed type of the resource
If
tentative type
is
not
application/octet-stream
, then let
resource type
be
tentative type
and jump to the step below labeled
handler
If applying the
URL parser
algorithm to the
URL
of the
specified resource (after any redirects) results in a
URL record
whose
path
component matches a pattern that a
plugin
supports, then let
resource type
be the type that that plugin can
handle.
For example, a plugin might say that it can handle resources with
path
components that end with the four character string
.swf
".
It is possible for this step to finish, or for one of the substeps above to
jump straight to the next step, with
resource type
still being unknown. In
both cases, the next step will trigger fallback.
Handler
: Handle the content as given by the first of the following cases that
matches:
If the
resource type
is an
XML MIME type
, or if the
resource type
does not start with "
image/
If the
object
element's
content navigable
is null, then
create a new child navigable
for the element.
Let
response
be the
response
from
fetch
If
response
's
URL
does not
match
about:blank
, then
navigate
the element's
content navigable
to
response
's
URL
using the element's
node document
, with
historyHandling
set to
replace
".
The
data
attribute of the
object
element doesn't get updated if the
content navigable
gets
further
navigated
to other locations.
The
object
element
represents
its
content
navigable
If the
resource type
starts with "
image/
", and support
for images has not been disabled
Destroy a child navigable
given the
object
element.
Apply the
image sniffing
rules to
determine the type of the image.
The
object
element
represents
the specified image.
If the image cannot be rendered, e.g. because it is malformed or in an unsupported
format, jump to the step below labeled
fallback
Otherwise
The given
resource type
is not supported. Jump to the step below
labeled
fallback
If the previous step ended with the
resource type
being
unknown, this is the case that is triggered.
The element's contents are not part of what the
object
element
represents.
If the
object
element does not represent its
content navigable
then once the resource is completely loaded,
queue an element task
on the
DOM manipulation task source
given the
object
element to
fire an event
named
load
at the element.
If the element
does
represent its
content navigable
then an analogous task will be queued when the created
Document
is
completely finished loading
Return.
Fallback
: The
object
element
represents
the element's
children. This is the element's
fallback content
Destroy a child
navigable
given the element.
Due to the algorithm above, the contents of
object
elements act as
fallback
content
, used only when referenced resources can't be shown (e.g. because it returned a 404
error). This allows multiple
object
elements to be nested inside each other,
targeting multiple user agents with different capabilities, with the user agent picking the first
one it supports.
The
object
element
potentially delays the load event
The
form
attribute is used to explicitly associate the
object
element with its
form owner
The
object
element supports
dimension attributes
HTMLObjectElement/contentDocument
Support in all current engines.
Firefox
1+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
8+
Firefox Android
Safari iOS
1+
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
The
contentDocument
getter steps are to return
this
's
content document
HTMLObjectElement/contentWindow
Support in all current engines.
Firefox
22+
Safari
13+
Chrome
53+
Opera
Edge
79+
Edge (Legacy)
17+
Internet Explorer
No
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
The
contentWindow
getter steps are to return
this
's
content window
The
willValidate
validity
, and
validationMessage
attributes, and the
checkValidity()
reportValidity()
, and
setCustomValidity()
methods, are part of the
constraint validation API
. The
form
IDL attribute
is part of the element's forms API.
In this example, an HTML page is embedded in another using the
object
element.
figure
object
data
"clock.html"
>object
figcaption
My HTML Clock
figcaption
figure