1. 4.8.5 The iframe element
      2. 4.8.6 The embed element
      3. 4.8.7 The object element
      4. 4.8.8 The param element

4.8.5 The iframe element

Element/iframe

Support in all current engines.

FirefoxYesSafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

HTMLIFrameElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.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 nested browsing context
sandbox — Security rules for nested content
allowPermissions 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
referrerpolicyReferrer 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] attribute USVString src;
  [CEReactions] attribute DOMString srcdoc;
  [CEReactions] attribute DOMString name;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList sandbox;
  [CEReactions] attribute DOMString allow;
  [CEReactions] attribute boolean allowFullscreen;
  [CEReactions] attribute DOMString width;
  [CEReactions] 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 nested browsing context.

The src attribute gives the URL of a page that the element's nested browsing context 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.

Firefox25+Safari6+Chrome20+
Opera15+Edge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox Android25+Safari iOS?Chrome Android25+WebView Android37+Samsung Internet1.5+Opera Android?

The srcdoc attribute gives the content of the page that the element's nested browsing context is to contain. The value of the attribute is the source of an iframe srcdoc document.

The srcdoc attribute, if present, must have a value using the HTML syntax that consists of the following syntactic components, in the given order:

  1. Any number of comments and ASCII whitespace.
  2. Optionally, a DOCTYPE.
  3. Any number of comments and ASCII whitespace.
  4. The document element, in the form of an html element.
  5. 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>
 <p>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!</p>
 <footer>
  <p>Written by <a href="/users/cap">cap</a>, 1 hour ago.
 </footer>
 <article>
  <footer> Thirteen minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>
 </article>
 <article>
  <footer> Nine minutes ago, <a href="/users/cap">cap</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>Yeah, you can see it <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>
 </article>
 <article>
  <footer> Five minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>hey that's earl's table.
<p>you should get earl&amp;amp;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 &quot; and not &amp;quot;.)

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.


When an iframe element element is inserted into a document whose browsing context is non-null, the user agent must run these steps:

  1. Create a new nested browsing context for element.

  2. If element has a sandbox attribute, then parse the sandboxing directive given the attribute's value and element's iframe sandboxing flag set.

  3. Process the iframe attributes for element, with initialInsertion set to true.

When an iframe element is removed from a document, the user agent must discard the element's nested browsing context, if it is not null, and then set the element's nested browsing context to null.

This happens without any unload events firing (the element's nested browsing context and its Document are discarded, not unloaded).

Whenever an iframe element with a non-null nested browsing context 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 nested browsing context 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):

  1. If element's srcdoc attribute is specified, then:

    1. Set element's current navigation was lazy loaded boolean to false.

    2. If the will lazy load element steps given element return true, then:

      1. Set element's lazy load resumption steps to the rest of this algorithm starting with the step labeled navigate to the srcdoc resource.

      2. Set element's current navigation was lazy loaded boolean to true.

      3. Start intersection-observing a lazy loading element for element.

      4. Return.

    3. Navigate to the srcdoc resource: navigate an iframe or frame given element and a new response whose URL list is « about:srcdoc », header list is « (`Content-Type`, `text/html`) », and body is the value of element's srcdoc attribute.

      The resulting Document must be considered an iframe srcdoc document.

  2. Otherwise, run the shared attribute processing steps for iframe and frame elements given element and initialInsertion.

The shared attribute processing steps for iframe and frame elements, given an element element and a boolean initialInsertion, are:

  1. Let url be the URL record about:blank.

  2. If element has a src attribute specified, and its value is not the empty string, then parse the value of that attribute relative to element's node document. If this is successful, then set url to the resulting URL record.

  3. If there exists an ancestor browsing context of element's nested browsing context whose active document's URL, ignoring fragments, is equal to url, then return.

  4. If url matches about:blank and initialInsertion is true, then:

    1. Perform the URL and history update steps given element's nested browsing context'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.

    2. Run the iframe load event steps given element.

    3. Return.

  5. Let resource be a new request whose URL is url and whose referrer policy is the current state of element's referrerpolicy content attribute.

  6. If element is an iframe element, then set element's current navigation was lazy loaded boolean to false.

  7. If element is an iframe element, and the will lazy load element steps given element return true, then:

    1. Set element's lazy load resumption steps to the rest of this algorithm starting with the step labeled navigate to the resource.

    2. Set element's current navigation was lazy loaded boolean to true.

    3. Start intersection-observing a lazy loading element for element.

    4. Return.

  8. Navigate to the resource: navigate an iframe or frame given element and resource.

To navigate an iframe or frame given an element element and a resource resource:

  1. Let historyHandling be "default".

  2. If element's nested browsing context is still on its initial about:blank Document, then set historyHandling to "replace".

  3. If element's nested browsing context's active document is not completely loaded, then set historyHandling to "replace".

  4. Navigate element's nested browsing context to resource, with historyHandling set to historyHandling and the source browsing context set to element's node document's browsing context.

A load event is also fired at the iframe element when it is created if no other data is loaded in it.

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:

  1. Assert: element's nested browsing context is not null.

  2. Let childDocument be the active document of element's nested browsing context.

  3. If childDocument has its mute iframe load flag set, then return.

  4. Set childDocument's iframe load in progress flag.

  5. Fire an event named load at element.

  6. 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 nested browsing context is non-null and any of the following are true:

If, during the handling of the load event, element's nested browsing context 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.

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 browsing context will remain at the initial about:blank Document.

If the user navigates away from this page, the iframe's nested browsing context's 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 browsing context name. The given value is used to name the element's nested browsing context if present when that is created.


Element/iframe#attr-sandbox

Support in all current engines.

Firefox17+Safari5+Chrome4+
Opera15+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android17+Safari iOS4.2+Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera 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-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, and allow-downloads.

When the attribute is set, the content is treated as being from a unique origin, forms, scripts, and various potentially annoying APIs are disabled, links are prevented from targeting other browsing contexts, and plugins are secured. The allow-same-origin keyword causes the content to be treated as being from its real origin instead of forcing it into a unique origin; the allow-top-navigation keyword allows the content to navigate its top-level browsing context; the allow-top-navigation-by-user-activation keyword behaves similarly but allows such navigation only when the browsing context's active window has transient activation; 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.

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 nested browsing context 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 nested browsing context, 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 nested browsing context, 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).

<p>We're not scared of you! Here is your content, unedited:</p>
<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=B></iframe>

Suppose that file B contained an iframe also:

<iframe sandbox="allow-scripts" src=C></iframe>

Further, suppose that file C contained a link:

<a href=D>Link</a>

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 nested browsing context 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 nested browsing context 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 nested browsing context 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>
  <p><img src="/usericons/1627591962735"> <b>Fred Flintstone</b></p>
  <p><a href="/posts/3095182851" rel=bookmark>12:44</a><a href="#acl-3095182851">Private Post</a></p>
 </header>
 <p>Check out my new ride!</p>
 <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 nested browsing context 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:

  1. If document's browsing context is null, then return false.

  2. If document's browsing context's active document is not document, then return false.

  3. If the result of running is feature enabled in document for origin on feature, document, and document's origin is "Enabled", then return true.

  4. Return false.

Because they only influence the permissions policy of the nested browsing context's active document, the allow and allowfullscreen attributes only take effect when the nested browsing context 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 nested browsing context, 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. [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:

  1. Let resumptionSteps be the iframe element's lazy load resumption steps.

  2. If resumptionSteps is null, then return.

  3. Set the iframe's lazy load resumption steps to null.

  4. 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/src

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

HTMLIFrameElement/srcdoc

Support in all current engines.

Firefox25+Safari6+Chrome20+
Opera15+Edge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox Android25+Safari iOS6+Chrome Android25+WebView Android37+Samsung Internet1.5+Opera Android14+

The IDL attributes src, srcdoc, name, sandbox, and allow must reflect the respective content attributes of the same name.

The supported tokens for sandbox's DOMTokenList are the allowed values defined in the sandbox attribute and supported by the user agent.

The allowFullscreen IDL attribute must reflect the allowfullscreen content attribute.

HTMLIFrameElement/referrerPolicy

Support in all current engines.

Firefox50+Safari14+Chrome53+
Opera38+Edge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox Android50+Safari iOS14+Chrome Android53+WebView Android53+Samsung Internet6.0+Opera Android41+

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.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer8+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

The contentDocument IDL attribute, on getting, must return the iframe element's content document.

HTMLIFrameElement/contentWindow

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera8+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+

The contentWindow IDL attribute must return the WindowProxy object of the iframe element's nested browsing context, if its nested browsing context is non-null, or null otherwise.

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&amp;format=banner"
        width="468" height="60"></iframe>

4.8.6 The embed element

Element/embed

Support in all current engines.

Firefox1+SafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

HTMLEmbedElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.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] attribute USVString src;
  [CEReactions] attribute DOMString type;
  [CEReactions] attribute DOMString width;
  [CEReactions] attribute DOMString height;
  Document? getSVGDocument();

  // also has obsolete members
};

Depending on the type of content instantiated by the embed element, the node may also support other interfaces.

The embed element provides an integration point for an external (typically non-HTML) application or interactive content.

The src attribute gives the URL of the resource being embedded. The attribute, if present, must contain a valid non-empty URL potentially surrounded by spaces.

Authors should avoid referencing untrusted resources, as such a resource can be used to instantiate plugins or run scripts, even if the author has used features such as the Flash "allowScriptAccess" parameter.

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:

An embed element is said to be potentially active when the following conditions are all met simultaneously:

Whenever an embed element that was not potentially active becomes potentially active, and whenever a potentially active embed element that is remaining potentially active and 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:

  1. If another task has since been queued to run the embed element setup steps for element, then return.

  2. If element has a src attribute set, then:

    1. Let url be the result of parsing the value of element's src attribute, relative to element's node document.

    2. If url is failure, then return.

    3. 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", and whose use-URL-credentials flag is set.

    4. Fetch request.

      Fetching the resource must delay the load event of element's node document.

      To process response for the response response:

      1. If another task has since been queued to run the embed element setup steps for element, then return.

      2. If response is a network error, then fire an event named load at element, and return.

      3. Let type be the result of determining the type of content given element and response.

      4. Switch on type:

        null
        1. Display no plugin for element.

        image/svg+xml
        1. If element's nested browsing context is null, then create a new nested browsing context for element.

        2. Navigate element's nested browsing context to response, with historyHandling set to "replace" and the source browsing context set to element's node document's browsing context.

          element's src attribute does not get updated if the browsing context gets further navigated to other locations.

        3. element now represents its nested browsing context.

        Otherwise
        1. Display a plugin for element, given type and response.

  3. Otherwise:

    1. Let type be the value of element's type attribute.

    2. If type is a type that a plugin supports, then display a plugin for element given type.

    3. 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:

  1. 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.

  2. 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".

  3. If response has explicit Content-Type metadata, and that value is a type that a plugin supports, then return that value.

  4. 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 a plugin for an embed element element, given a string type and optionally a response response:

  1. If element's nested browsing context is not null, then:

    1. Discard element's nested browsing context.

    2. Set element's nested browsing context to null.

  2. Find and instantiate an appropriate plugin based on type, replacing any previously-instantiated plugin for element. If response was given, forward it to the plugin.

  3. element now represents this plugin instance.

  4. Once the plugin, and response if given, are completely loaded, queue an element task on the DOM manipulation task source give element to fire an event named load at element.

To display no plugin for an embed element element:

  1. If element's nested browsing context is not null, then:

    1. Discard element's nested browsing context.

    2. Set element's nested browsing context to null.

  2. Display an indication that no plugin could be found for element, replacing any previously-instantiated plugin for element.

  3. 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.

When a plugin is to be instantiated but the sandboxed plugins browsing context flag is set on the embed element's node document's active sandboxing flag set, then the user agent must not instantiate the plugin, and must instead render the embed element in a manner that conveys that the plugin was disabled.

The embed element potentially delays the load event.

Any namespace-less attribute other than name, align, hspace, and vspace may be specified on the embed element, so long as its name is XML-compatible and contains no ASCII upper alphas. These attributes are then passed as parameters to the plugin.

All attributes in HTML documents get lowercased automatically, so the restriction on uppercase letters doesn't affect such documents.

The four exceptions are to exclude legacy attributes that have side-effects beyond just sending parameters to the plugin.

The user agent should pass the names and values of all the attributes of the embed element that have no namespace to the plugin used, when one is instantiated.

The HTMLEmbedElement object representing the element must expose the scriptable interface of the plugin instantiated for the embed element, if any.

The embed element supports dimension attributes.

The IDL attributes src and type each must reflect the respective content attributes of the same name.

Here's a way to embed a resource that requires a proprietary plugin, like Flash:

<embed src="catgame.swf">

If the user does not have the plugin (for example if the plugin vendor doesn't support the user's platform), then the user will be unable to use the resource.

To pass the plugin a parameter "quality" with the value "high", an attribute can be specified:

<embed src="catgame.swf" quality="high">

This would be equivalent to the following, when using an object element instead:

<object data="catgame.swf">
 <param name="quality" value="high">
</object>

4.8.7 The object element

Element/object

Support in all current engines.

Firefox1+SafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

HTMLObjectElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.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:
Zero or more param elements, then, 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 nested browsing context
form — Associates the element with a form
width — Horizontal dimension
height — Vertical dimension
Accessibility considerations:
For authors.
For implementers.
DOM interface:
[Exposed=Window]
interface HTMLObjectElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString data;
  [CEReactions] attribute DOMString type;
  [CEReactions] attribute DOMString name;
  readonly attribute HTMLFormElement? form;
  [CEReactions] attribute DOMString width;
  [CEReactions] 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, as a child browsing context, or as an external resource to be processed by a plugin.

The data attribute, if present, specifies the URL of the resource. If present, the attribute must be a valid non-empty URL potentially surrounded by spaces.

Authors should avoid referencing untrusted resources, as such a resource can be used to instantiate plugins or run scripts, even if the author has used features such as the Flash "allowScriptAccess" parameter.

The type attribute, if present, specifies the type of the resource. If present, the attribute must be a valid MIME type string.

At least one of either the data attribute or the type attribute must be present.

If the itemprop attribute is specified on an object element, then the data attribute must also be specified.

The name attribute, if present, must be a valid browsing context name. The given value is used to name the element's nested browsing context, if applicable, and if present when the element's nested browsing context is created.

Whenever one of the following conditions occur:

...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.

  1. 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.

  2. 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.

  3. If the classid attribute is present, and has a value that isn't the empty string, then: if the user agent can find a plugin suitable according to the value of the classid attribute, and plugins aren't being sandboxed, then that plugin should be used, and the value of the data attribute, if any, should be passed to the plugin. If no suitable plugin can be found, or if the plugin reports an error, jump to the step below labeled fallback.

  4. If the data attribute is present and its value is not the empty string, then:

    1. If the type attribute is present and its value is not a type that the user agent supports, and is not a type that the user agent can find a plugin for, then the user agent may jump to the step below labeled fallback without fetching the content to examine its real type.

    2. Parse a URL given the data attribute, relative to the element's node document.

    3. If that failed, fire an event named error at the element, then jump to the step below labeled fallback.

    4. Let request be a new request whose URL is the resulting URL record, client is the element's node document's relevant settings object, destination is "object", credentials mode is "include", mode is "navigate", and whose use-URL-credentials flag is set.

    5. 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.

    6. 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.

    7. 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.

    8. Determine the resource type, as follows:

      1. Let the resource type be unknown.

      2. 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 plugin, but the remote site overrides that and instead furnishes the user agent with a resource that triggers a different plugin with different security characteristics.

      3. If there is a type attribute present on the object element, and that attribute's value is not a type that the user agent supports, but it is a type that a plugin supports, then let the resource type be the type specified in that type attribute, and jump to the step below labeled handler.

      4. Run the appropriate set of steps from the following list:

        If the resource has associated Content-Type metadata
        1. Let binary be false.

        2. 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.

        3. If the type specified in the resource's Content-Type metadata is "application/octet-stream", then set binary to true.

        4. 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.

        5. If there is a type attribute present on the object element, and its value is not application/octet-stream, then run the following steps:

          1. If the attribute's value is a type that a plugin supports, or 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.

          2. Jump to the step below labeled handler.

        Otherwise, if the resource does not have associated Content-Type metadata
        1. 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.

        2. If tentative type is not application/octet-stream, then let resource type be tentative type and jump to the step below labeled handler.

      5. 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.

    9. Handler: Handle the content as given by the first of the following cases that matches:

      If the resource type is not a type that the user agent supports, but it is a type that a plugin supports

      If the object element's nested browsing context is non-null, then it must be discarded and then set to null.

      If plugins are being sandboxed, then jump to the step below labeled fallback.

      Otherwise, the user agent should use the plugin that supports resource type and pass the content of the resource to that plugin. If the plugin reports an error, then jump to the step below labeled fallback.

      If the resource type is an XML MIME type, or if the resource type does not start with "image/"

      If the object element's nested browsing context is null, then create a new nested browsing context for the element.

      If the URL of the given resource does not match about:blank, then navigate the element's nested browsing context to that resource, with historyHandling set to "replace" and the source browsing context set to the object element's node document's browsing context. (The data attribute of the object element doesn't get updated if the browsing context gets further navigated to other locations.)

      The object element represents its nested browsing context.

      If the resource type starts with "image/", and support for images has not been disabled

      If the object element's nested browsing context is non-null, then it must be discarded and then set to null.

      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.

    10. The element's contents are not part of what the object element represents.

    11. If the object element does not represent its nested browsing context, 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 nested browsing context, then an analogous task will be queued when the created Document is completely finished loading.

    12. Return.

  5. If the data attribute is absent but the type attribute is present, and the user agent can find a plugin suitable according to the value of the type attribute, and plugins aren't being sandboxed, then that plugin should be used. If these conditions cannot be met, or if the plugin reports an error, jump to the step below labeled fallback. Otherwise return; once the plugin 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.

  6. Fallback: The object element represents the element's children, ignoring any leading param element children. This is the element's fallback content. If the element has an instantiated plugin, then unload it. If the element's nested browsing context is non-null, then it must be discarded and then set to null.

When the algorithm above instantiates a plugin, the user agent should pass to the plugin used the names and values of all the attributes on the element, in the order they were added to the element, with the attributes added by the parser being ordered in source order, followed by a parameter named "PARAM" whose value is null, followed by all the names and values of parameters given by param elements that are children of the object element, in tree order. If the plugin supports a scriptable interface, the HTMLObjectElement object representing the element should expose that interface. The object element represents the plugin. The plugin is not a nested browsing context.

Plugins are considered sandboxed for the purpose of an object element if the sandboxed plugins browsing context flag is set on the object element's node document's active sandboxing flag set.

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/data

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

HTMLObjectElement/type

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

HTMLObjectElement/name

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

The IDL attributes data, type, and name each must reflect the respective content attributes of the same name.

HTMLObjectElement/contentDocument

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer8+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

The contentDocument IDL attribute, on getting, must return the object element's content document.

HTMLObjectElement/contentWindow

Support in all current engines.

Firefox22+Safari13+Chrome53+
OperaNoEdge79+
Edge (Legacy)17+Internet ExplorerNo
Firefox Android22+Safari iOS13+Chrome Android53+WebView Android53+Samsung Internet6.0+Opera AndroidNo

The contentWindow IDL attribute must return the WindowProxy object of the object element's nested browsing context, if its nested browsing context is non-null; otherwise, it must return null.

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>

The following example shows how a plugin can be used in HTML (in this case the Flash plugin, to show a video file). Fallback is provided for users who do not have Flash enabled, in this case using the video element to show the video for those using user agents that support video, and finally providing a link to the video for those who have neither Flash nor a video-capable browser.

<p>Look at my video:
 <object type="application/x-shockwave-flash">
  <param name=movie value="https://video.example.com/library/watch.swf">
  <param name=allowfullscreen value=true>
  <param name=flashvars value="https://video.example.com/vids/315981">
  <video controls src="https://video.example.com/vids/315981">
   <a href="https://video.example.com/vids/315981">View video</a>.
  </video>
 </object>
</p>

4.8.8 The param element

Element/param

Support in all current engines.

Firefox1+SafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

HTMLParamElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer6+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+
Categories:
None.
Contexts in which this element can be used:
As a child of an object element, before any flow content.
Content model:
Nothing.
Tag omission in text/html:
No end tag.
Content attributes:
Global attributes
name — Name of parameter
value — Value of parameter
Accessibility considerations:
For authors.
For implementers.
DOM interface:
[Exposed=Window]
interface HTMLParamElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString name;
  [CEReactions] attribute DOMString value;

  // also has obsolete members
};

The param element defines parameters for plugins invoked by object elements. It does not represent anything on its own.

The name attribute gives the name of the parameter.

The value attribute gives the value of the parameter.

Both attributes must be present. They may have any value.

If both attributes are present, and if the parent element of the param is an object element, then the element defines a parameter with the given name-value pair.

If either the name or value of a parameter defined by a param element that is the child of an object element that represents an instantiated plugin changes, and if that plugin is communicating with the user agent using an API that features the ability to update the plugin when the name or value of a parameter so changes, then the user agent must appropriately exercise that ability to notify the plugin of the change.

The IDL attributes name and value must both reflect the respective content attributes of the same name.

The following example shows how the param element can be used to pass a parameter to a plugin, in this case the O3D plugin.

<!DOCTYPE HTML>
<html lang="en">
  <head>
   <title>O3D Utah Teapot</title>
  </head>
  <body>
   <p>
    <object type="application/vnd.o3d.auto">
     <param name="o3d_features" value="FloatingPointTextures">
     <img src="o3d-teapot.png"
          title="3D Utah Teapot illustration rendered using O3D."
          alt="When O3D renders the Utah Teapot, it appears as a squat
          teapot with a shiny metallic finish on which the
          surroundings are reflected, with a faint shadow caused by
          the lighting.">
     <p>To see the teapot actually rendered by O3D on your
     computer, please download and install the <a
     href="http://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D plugin</a>.</p>
    </object>
    <script src="o3d-teapot.js"></script>
   </p>
  </body>
</html>