HTML5 <iframe> Tag

The HTML <iframe> or (Inline Frame) tag is used to represent a nested browsing context. It is used to effectively embed another HTML page into the current page. An <iframe> can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window.

Both the starting and ending tag are mandatory for this element. The parent of the <iframe> tag can be any element that accepts embedded content.

The following style is applied to this element by default:

iframe:focus {
  outline: none;
}

iframe[seamless] {
  display: block;
}

Here is an example of using this tag:

<iframe src="http://tutorialio.com/" width="400" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

Attributes

allowfullscreen

You can set this attribute to true if the frame is allowed to be placed into full screen mode by calling its Element.requestFullscreen() method. If this isn’t set, the element can’t be placed into full screen mode.

frameborder (HTML 4 Only)

This attribute is used to tell browsers whether they should or shouldn't draw a border between this frame and every other frame. Its default value is 1 which tells the browser to draw a border. The value 0 tells the browser not to draw a border between this frame and other frames.

height

This attribute is used to specify the height of the frame in CSS pixels (HTML5). The height can be specified either in pixels or as percentage in HTML4.

name

This attribute is used to set a name for the embedded browsing context (or frame). This can be used as the value of the target attribute of an <a> or <form> element, or the formtarget attribute of an <input> or <button> element.

referrerpolicy

This attribute is used to specify a string indicating which referrer to use when fetching the resource. It can have the following values:

  • "no-referrer" This value means that the Referer: header will not be sent.
  • "no-referrer-when-downgrade" This value means that no Referer: header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.
  • "origin" This value means that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.
  • "origin-when-cross-origin" This value means that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer’s path.
  • "unsafe-url" This value means that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.

sandbox (HTML5 only)

When the value of this attribute is specified as an empty string, it enables extra restrictions on the content that can appear in the inline frame. The value of the attribute can either be an empty string (all the restrictions are applied), or a space-separated list of tokens each of which will lift a particular restriction. The following are valid token values for this attribute:

  • allow-forms: This value will allow the embedded browsing context to submit forms. WHen this keyword is not used, this operation is not allowed.
  • allow-modals: This value will allow the embedded browsing context to open modal windows.
  • allow-orientation-lock: This value will allow the embedded browsing context to disable the ability to lock the screen orientation.
  • allow-pointer-lock: This value will allow the embedded browsing context to use the Pointer Lock API.
  • allow-popups: This value will allow popups (like from window.open, target="_blank", showModalDialog). If this keyword is not used, the popup functionality will silently fail.
  • allow-popups-to-escape-sandbox: This value will allow a sandboxed document to open new windows without forcing the sandboxing flags upon them. This will allow, for example, a third-party advertisement to be safely sandboxed without forcing the same restrictions upon a landing page.
  • allow-presentation: This value will allow embedders to have control over whether an iframe can start a presentation session.
  • allow-same-origin: This value will allow the content to be treated as being from its normal origin. If this keyword is not used, the embedded content is treated as being from a unique origin.
  • allow-scripts: This value will allow the embedded browsing context to run scripts (but not create pop-up windows). If this keyword is not used, this operation is not allowed.
  • allow-top-navigation: This value will allow the embedded browsing context to navigate (load) content to the top-level browsing context. If this keyword is not used, this operation is not allowed.

When the embedded document has the same origin as the main page, it is strongly discouraged to use both allow-scripts and allow-same-origin at the same time. The reason for this discouragement is that it allows the embedded document to programmatically remove the sandbox attribute. Although it is accepted, this case is no more secure than not using the sandbox attribute.

Sandboxing in general is only of minimal help if the attacker can arrange for the potentially hostile content to be displayed in the user’s browser outside a sandboxed iframe. It is recommended that such content should be served from a separate dedicated domain, to limit the potential damage.

Please note that the sandbox attribute is not supported in Internet Explorer 9 and earlier versions.

src

This attribute is used to specify the URL of the page that you want to embed.

srcdoc (HTML5 only)

This attribute is used to specify the content of the page that the embedded context is meant to contain. This attribute is expected to generally be used together with the sandbox attribute. When a browser supports the srcdoc attribute, it will override the content specified in the src attribute (if present). If a browser does not support the srcdoc attribute, it will show the file specified in the src attribute instead (if present).

Note that if the content of the attribute contains a script tag then a closing script tag is required for the script to run, even if nothing else comes after the script.

width

This attribute is used to indicate the width of the frame in CSS pixels (HTML5), and in pixels or as a percentage (HTML 4.01).

Examples

See the Pen HTML iframe Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <iframe> element on MDN.
  2. You can also read the HTML <iframe> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top