HTML Allow Attribute

Definition

The allow attribute specifies a feature policy to define what permissions are available to an <iframe>.

Applicable Elements

The allow Attribute can be used with the following elements:

• <iframe>

HTML <iframe> allow Attribute

The <iframe> tag represents a nested browsing context and is used to embed an HTML document in your current HTML document.

The allow attribute can be used with the <iframe> attribute to specify a permissions policy to determine what features are available to it when it is initialized. I.e., permitting the <iframe> to access the computer’s camera or microphone.

Syntax

<iframe src="[insert source]" allow="camera 'none'; microphone 'none'"></iframe>

Usage

• The permissions-policy can be implemented with an HTTP header or via an <iframe>’s allow attribute. Browser support for the iframe method is better.
• The allow attribute specifies the permissions policy set for the <iframe> only.
• One or more values can be applied to the allow attribute.
• The allow attribute takes a feature and a source surrounding in single quote marks. The source defaults to the src specified in the iframe, so can be left out if they are the same.
• To disable a feature you can use none instead of the source.

Values

Values can include:

• accelerometer
• ambient-light-sensor
• autoplay
• battery
• camera
• display-capture
• document-domain
• encrypted-media
• fullscreen
• geolocation
• gyroscope
• layout-animations
• legacy-image-formats
• magnetometer
• microphone
• midi
• navigation-override
• oversized-images
• payment
• picture-in-picture
• publickey-credentials-get
• sync-script
• sync-xhr
• usb
• screen-wake-lock
• web-share
• unoptimized-images
• unsized-media
• xr-spatial-tracking

Examples

The following example allows an <iframe> to be made fullscreen. The default value for fullscreen is src, so it can be shortened to just allow="fullscreen".

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/oFDeNcu3mnc?mute=1"
  title="YouTube video player fullscreen example"
  frameborder="0"
  allow="fullscreen"
></iframe>

Best Practices

There are many coding practices that can increase the performance of your website, including preventing layout shift. These can be difficult to implement, especially on third-party resources in an <iframe>.

Fortunately, you can use several permission policies to prevent certain functionality from negatively impacting your site’s user experience. These include:

• layout-animations
• oversized-images
• sync-script
• sync-xhr
• unoptimized-images
• unsized-media

By default, all these features are included in the allowlist. Therefore, they must be specifically disabled, as shown in the example below.

<iframe
  src="https://www.thewebmaster.com"
  allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none';"
></iframe>

Specification

The allow HTML specification for the <input> element is as follows:

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

The allow attribute has the following browser support:

Desktop

Mobile