References

Beginner-friendly references for web development, with live, editable examples.

The HTML allow attribute

Attribute All modern browsers By David AdamsUpdated
In short

On an <iframe>, the HTML allow attribute grants features to the framed page, as in allow="camera; fullscreen". Entries are separated by semicolons. A feature written without origins is granted only to the origin of the iframe's src URL.

Overview

The HTML allow attribute sets the Permissions Policy of an <iframe>, which decides the features its page may use. Camera and microphone access, geolocation, fullscreen and payment requests are among the features it covers.

A frame from another origin starts without many of them. Fullscreen, the camera, the microphone and geolocation each have a default allowlist of 'self', which reaches only frames from the embedding page's own origin.

Each entry pairs a feature name with an optional allowlist. That list can be * for any origin, 'self' for the embedding page's origin, 'src' for the origin of the iframe's src URL, 'none' to block it, or origins written without quotes. A feature with no list gets 'src'.

Chromium-based browsers also read the Permissions-Policy header, but Firefox and Safari don't support it. The header names the origins a page may hand each listed feature to, and allow grants the feature within that set. Neither can bring back a feature the page has lost.

The header uses geolocation=(self "https://example.com"), with commas between features, while the attribute uses geolocation 'self' https://example.com. The attribute kept the syntax of Feature Policy, the older specification.

Syntax

<iframe src="https://example.com/map" title="Store locations map"
  allow="geolocation; fullscreen"></iframe>

Values

Value
Feature names separated by semicolons, each with an optional allowlist, such as camera; fullscreen 'none'.

Example

Live example 
<p>Both frames run the same page. Press Fullscreen in each, and again to leave.</p>
<iframe id="open" title="Frame with allow fullscreen *" allow="fullscreen *" width="140" height="76"></iframe>
<iframe id="shut" title="Frame with allow fullscreen 'none'" allow="fullscreen 'none'" width="140" height="76"></iframe>
<p id="msg" role="status">Checking both frames...</p>
<script>
const page = `<button type="button">Fullscreen</button> <span></span>
<script>
document.documentElement.style.background = '#fff';
const out = document.querySelector('span');
out.textContent = document.fullscreenEnabled ? 'Allowed' : 'Blocked';
parent.postMessage(out.textContent, '*');
document.querySelector('button').addEventListener('click', function () {
  if (document.fullscreenElement) {
    document.exitFullscreen();
    return;
  }
  document.documentElement.requestFullscreen().catch(function (error) {
    out.textContent = error.message;
  });
});
<\/script>`;
const frames = [document.getElementById('open'), document.getElementById('shut')];
const results = ['...', '...'];
window.addEventListener('message', function (event) {
  const i = frames.findIndex(function (f) { return f.contentWindow === event.source; });
  if (i < 0) return;
  results[i] = event.data;
  document.getElementById('msg').textContent = "fullscreen *: " + results[0] + ". fullscreen 'none': " + results[1] + '.';
});
frames.forEach(function (f) { f.srcdoc = page; });
</script>

Best practices

  • List only the features a frame needs in allow, written as bare names where you can. A bare name stays with the src origin when the frame navigates elsewhere, while * follows it anywhere.
  • Put single quotes around 'self', 'src' and 'none', but leave origins unquoted. A bare self blocks the feature even in a same-origin frame, and a quoted origin grants nothing.
  • Separate features with semicolons. With allow="fullscreen, camera", neither feature is granted, because the browser reads the value as a single entry with fullscreen, as an unknown feature name.
  • For fullscreen in Safari, add allowfullscreen next to allow, since desktop versions from 10.1 support only that older attribute for fullscreen. Both frames in the example may read Blocked there.

Frequently asked questions

Why can't a cross-origin iframe use the camera without allow?
The camera's default allowlist is 'self', so a cross-origin frame needs the allow attribute to reach it. Without that grant, getUserMedia() rejects with a NotAllowedError in the frame.
Does allow=camera give an iframe access to the camera?
Not by itself, since allow=camera only lets the framed page ask, and the user's permission still decides. When a policy blocks a feature, the user generally isn't even asked.
Does a new allow value reach a page that has already loaded?
No, the allow attribute applies only when the iframe loads a new document. Reload the frame, for example by setting its src again, and the page inside gets the new policy.
How is allow different from allowfullscreen?
The allowfullscreen attribute is a legacy form, redefined as granting fullscreen to every origin through allow. Under the Permissions Policy rules, which Chrome and Firefox follow, allow takes precedence when it names fullscreen, and allowfullscreen has no effect.
What does sandbox do that allow doesn't?
Unlike allow, the sandbox attribute removes abilities such as scripts, forms and popups until keywords add them back. The allow attribute grants or blocks features such as the camera, and one frame can carry both.
Does allow work on a sandboxed iframe?
Yes, allow works on a sandboxed iframe, but its opaque origin can keep the default 'src' from matching. Without allow-same-origin in the sandbox, a feature named alone is granted in Chrome but not in Firefox, and adding an asterisk works in both.
Which browsers support the allow attribute?
Current versions of every major browser support the allow attribute itself, but support for each feature differs. Safari, for one, doesn't support fullscreen, geolocation or autoplay in allow.
action allowfullscreen