HTML / HTML Attributes

HTML Allow Attribute

Dec 12, 2022
3 min read
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:

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.

The Feature-Policy header was renamed to Permissions-Policy.

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.

Warning

You should verify that the content in the iframe continues to work as expected after implementing the permissions policy.

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

Browser Support

The allow attribute has the following browser support:

Desktop

ChromeEdgeFirefoxIEOperaSafari
<iframe>YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
<iframe>YesYesYesYesYesYes