HTMLIFrameElement.allow — Eigenschaft · JavaScript-Referenz

Signatur

HTMLIFrameElement.allow

Beschreibung

Die Eigenschaft allow des HTMLIFrameElement spiegelt das gleichnamige HTML-Attribut wider. Sie enthält eine Permissions Policy (früher Feature Policy). Diese legt fest, welche Browser-Funktionen der eingebettete Inhalt nutzen darf, zum Beispiel camera, microphone, geolocation, fullscreen, autoplay oder clipboard-write.

Der Wert ist eine durch Semikolons getrennte Liste von Direktiven. Jede Direktive besteht aus einem Funktionsnamen und optional einer Allowlist mit Ursprüngen, etwa "camera 'self' https://video.example.com; fullscreen". Fehlt die Allowlist, gilt standardmäßig 'src'. Die Funktion ist dann nur für den Ursprung freigegeben, der aktuell im src-Attribut des iframes steht.

Typische Einsatzfälle sind eingebettete Videoplayer (Autoplay, Vollbild), Videokonferenz-Widgets (Kamera, Mikrofon), Zahlungsdialoge (payment) und Karten (Geolokalisierung). Umgekehrt kann man mit allow Funktionen gezielt sperren, etwa mit "geolocation 'none'". So bekommen Inhalte von Drittanbietern nur so viele Rechte, wie sie wirklich brauchen.

Wichtig: Die Richtlinie wird ausgewertet, wenn das iframe ein Dokument lädt. Wenn Sie allow nachträglich ändern, wirkt sich das erst beim nächsten Navigieren des iframes aus.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen: eine Permissions-Policy-Zeichenkette, z. B. `"camera; microphone 'self'"`. Ein leerer String bedeutet, dass keine zusätzliche Richtlinie gilt (es greifen die Standardwerte der Funktionen).

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des allow-Attributs. Ist das Attribut nicht gesetzt, wird ein leerer String zurückgegeben.

Beispiele

Videoplayer mit Autoplay und Vollbild einbetten

const iframe = document.createElement('iframe');
// allow VOR src setzen, damit die Richtlinie beim ersten Laden gilt
iframe.allow = 'autoplay; fullscreen; picture-in-picture';
iframe.src = 'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ';
iframe.width = 560;
iframe.height = 315;
document.body.append(iframe);

console.log(iframe.allow);

autoplay; fullscreen; picture-in-picture

Kamera und Mikrofon für ein Konferenz-Widget freigeben

const frame = document.querySelector('#meeting');
frame.allow = "camera https://meet.example.com; microphone https://meet.example.com; display-capture";

// Änderung wirkt erst nach erneutem Laden
frame.src = 'https://meet.example.com/room/42';
console.log(frame.getAttribute('allow'));

camera https://meet.example.com; microphone https://meet.example.com; display-capture

Richtlinie auslesen und Funktionen prüfen

const frame = document.querySelector('iframe');

const features = frame.allow
  .split(';')
  .map((d) => d.trim().split(/\s+/)[0])
  .filter(Boolean);

console.log(features);

// Tatsächlich wirksame Rechte (nur Chromium):
if (frame.featurePolicy) {
  console.log(frame.featurePolicy.allowsFeature('camera'));
}

["autoplay", "fullscreen"] true

Geolokalisierung gezielt sperren

const ad = document.createElement('iframe');
ad.allow = "geolocation 'none'; camera 'none'; microphone 'none'";
ad.src = 'https://ads.example.net/banner';
document.body.append(ad);

// Wichtig · Fallstricke

Zeitpunkt: Die Richtlinie gilt erst beim nächsten Navigieren des iframes. Setzen Sie allow daher vor src oder laden Sie das iframe danach neu.
Standard-Allowlist: Ohne Ursprungsangabe gilt 'src'. Leitet das iframe auf einen anderen Ursprung weiter, verliert es die Berechtigung.
Header der Elternseite: allow kann nur einschränken oder weitergeben, was die Elternseite selbst darf. Verbietet deren Permissions-Policy-HTTP-Header eine Funktion, lässt sie sich per allow nicht wieder freischalten.
Legacy-Attribute: allowfullscreen und allowpaymentrequest sind veraltet. Setzen Sie stattdessen fullscreen bzw. payment in allow. Gibt es einen Konflikt, hat allow Vorrang.
Unbekannte Funktionen werden ignoriert und nur als Warnung in der Konsole gemeldet. Welche Funktionen unterstützt werden, unterscheidet sich stark zwischen den Browsern. Firefox und Safari kennen deutlich weniger Direktiven als Chromium.
Sicherheit: Geben Sie Drittanbieter-Inhalten nach dem Prinzip der minimalen Rechte nur die Funktionen frei, die sie wirklich brauchen. Kombinieren Sie allow mit sandbox, um Skripte, Formulare und Navigation zusätzlich einzuschränken.
Die API HTMLIFrameElement.featurePolicy zum Prüfen der wirksamen Rechte ist experimentell und nur in Chromium verfügbar.

Siehe auch

Permissions.query() HTMLIFrameElement.allowFullscreen HTMLIFrameElement.csp HTMLIFrameElement.name HTMLIFrameElement.sandbox