HTMLIFrameElement.credentialless — Eigenschaft · JavaScript-Referenz

Signatur

HTMLIFrameElement.credentialless

Beschreibung

Die Eigenschaft credentialless spiegelt das gleichnamige boolesche HTML-Attribut eines <iframe>-Elements wider. Ist sie true, wird der Inhalt des iframes in einem neuen, flüchtigen Kontext geladen. Netzwerkanfragen laufen ohne Anmeldedaten (keine Cookies, keine HTTP-Authentifizierung, keine Client-Zertifikate). Das eingebettete Dokument kommt auch nicht an den normalen Speicher seines Ursprungs (localStorage, IndexedDB, Cache Storage, Cookies). Stattdessen bekommt es einen eigenen, anfangs leeren Speicherbereich. Dieser gilt nur für die aktuelle Seite der obersten Ebene und wird verworfen, sobald sie geschlossen oder verlassen wird.

Hauptsächlich braucht man das, um Inhalte von Drittanbietern (Werbung, Videos, Karten, Widgets) in cross-origin-isolierte Seiten einzubetten, also Seiten mit Cross-Origin-Embedder-Policy: require-corp oder credentialless und Cross-Origin-Opener-Policy: same-origin. Normalerweise müsste jedes eingebettete Dokument selbst per Cross-Origin-Resource-Policy bzw. COEP zustimmen. Bei einem credentialless-iframe entfällt das, weil ohne Anmeldedaten keine personalisierten, vertraulichen Daten geladen werden können. Die einbettende Seite behält dadurch Zugriff auf SharedArrayBuffer, genaue Zeitmessung und performance.measureUserAgentSpecificMemory().

Die Eigenschaft ist lesbar und schreibbar. Eine Änderung wirkt erst bei der nächsten Navigation des iframes, also wenn src neu gesetzt oder das Element neu eingefügt wird. Ein bereits geladenes Dokument wird nicht nachträglich umgestellt. Am sichersten setzt man die Eigenschaft deshalb, bevor man src zuweist oder das Element ins DOM einfügt.

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	false	Beim Setzen: `true` fügt das Attribut `credentialless` hinzu, `false` entfernt es. Andere Werte werden in einen booleschen Wert umgewandelt.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut credentialless am Element gesetzt ist, sonst false. In Browsern ohne Unterstützung ist die Eigenschaft undefined.

Beispiele

Status eines iframes auslesen

// HTML: <iframe id="ad" src="https://ads.example.com/banner" credentialless></iframe>
const frame = document.getElementById('ad');
console.log(frame.credentialless);

true

Drittanbieter-Widget in einer cross-origin-isolierten Seite einbetten

// Die Seite wird mit COOP: same-origin und COEP: require-corp ausgeliefert
const embedWidget = (url, container) => {
  const frame = document.createElement('iframe');
  // WICHTIG: vor dem Setzen von src aktivieren
  frame.credentialless = true;
  frame.src = url;
  frame.title = 'Externes Video';
  container.append(frame);
  return frame;
};

embedWidget('https://video.example.net/embed/42', document.body);
console.log('Isoliert:', window.crossOriginIsolated);

Isoliert: true

Feature-Erkennung mit Fallback

const supportsCredentialless = 'credentialless' in HTMLIFrameElement.prototype;

const frame = document.createElement('iframe');
if (supportsCredentialless) {
  frame.credentialless = true;
  frame.src = 'https://maps.example.org/embed';
} else {
  // Ohne Unterstützung würde COEP das Laden blockieren – Platzhalter zeigen
  frame.srcdoc = '<p>Karte in diesem Browser nicht verfügbar.</p>';
}
document.body.append(frame);
console.log(supportsCredentialless);

true (Chromium) bzw. false (Firefox/Safari)

Nachträgliche Änderung erst nach Neuladen wirksam machen

const frame = document.querySelector('iframe');
frame.credentialless = true;
// Das aktuelle Dokument bleibt unverändert – Neunavigation erzwingen:
frame.src = frame.src;
console.log(frame.hasAttribute('credentialless'));

true

// Wichtig · Fallstricke

Browser-Kompatibilität: Bisher nur in Chromium-Browsern (Chrome/Edge ab 110). Firefox und Safari unterstützen die Eigenschaft nicht, dort ist sie undefined und das Attribut wird ignoriert. Deshalb immer per Feature-Erkennung prüfen.
Wirkt nicht rückwirkend: Wer den Wert ändert, nachdem das Dokument geladen ist, beeinflusst erst die nächste Navigation. Die Eigenschaft also vor src bzw. vor dem Einfügen ins DOM setzen.
Keine Anmeldung möglich: Inhalte, die eine Nutzeranmeldung oder bestehende Cookies brauchen (z. B. „Gefällt mir“-Buttons, personalisierte Kommentare), funktionieren im credentialless-iframe nicht wie gewohnt. Der Nutzer erscheint dort als abgemeldet.
Flüchtiger Speicher: Daten in localStorage, IndexedDB usw. gehen verloren, sobald das Dokument der obersten Ebene geschlossen wird. Alle credentialless-iframes desselben Ursprungs innerhalb einer Seite teilen sich diesen Speicher.
Einschränkungen: window.opener-Beziehungen zu Pop-ups aus dem iframe werden getrennt (wie bei noopener). Das Attribut wird an verschachtelte iframes vererbt.
Sicherheit: Die Eigenschaft schützt vor dem Abfluss von Nutzerdaten über Seitenkanäle wie Spectre. Sie ersetzt aber kein sandbox. Skripte im iframe laufen weiterhin mit vollen Rechten, solange kein sandbox-Attribut gesetzt ist.

Siehe auch

HTMLIFrameElement HTMLIFrameElement.sandbox Window.crossOriginIsolated SharedArrayBuffer Performance.measureUserAgentSpecificMemory() HTMLIFrameElement.src HTMLIFrameElement.csp