HTMLAnchorElement.referrerPolicy — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAnchorElement.referrerPolicy

Beschreibung

Die Eigenschaft referrerPolicy spiegelt das HTML-Attribut referrerpolicy eines <a>-Elements wider. Sie bestimmt, wie viel von der aktuellen URL im HTTP-Header Referer an das Linkziel übertragen wird. Das betrifft sowohl die Navigation durch einen Klick als auch Ping-Anfragen über das Attribut ping.

Mögliche Werte sind:

"no-referrer": Es wird kein Referrer gesendet.
"no-referrer-when-downgrade": Die volle URL wird gesendet, außer beim Wechsel von HTTPS zu HTTP.
"origin": Es wird nur der Ursprung gesendet (Schema, Host, Port).
"origin-when-cross-origin": Innerhalb desselben Ursprungs wird die volle URL gesendet, bei fremden Ursprüngen nur der Ursprung.
"same-origin": Ein Referrer wird nur innerhalb desselben Ursprungs gesendet.
"strict-origin": Nur der Ursprung, und bei einem Downgrade von HTTPS zu HTTP gar nichts.
"strict-origin-when-cross-origin": Standard der Browser. Innerhalb desselben Ursprungs die volle URL, bei fremden Ursprüngen nur der Ursprung, bei einem Downgrade nichts.
"unsafe-url": Die volle URL wird immer gesendet, auch bei einem Downgrade.

Die Eigenschaft ist nützlich, um den Datenschutz gezielt für einzelne Links zu regeln. Ein Beispiel sind externe Links in Anwendungen, deren URLs Tokens, Sitzungs-IDs oder andere sensible Pfade enthalten. Ist das Attribut leer oder fehlt es, gibt die Eigenschaft "" zurück. Dann gilt die Richtlinie des Dokuments, die zum Beispiel über den Header Referrer-Policy oder <meta name="referrer"> festgelegt wird.

Rückgabewert

Typ

string

Beschreibung

Einer der oben genannten Richtlinienwerte oder "", wenn kein gültiges Attribut gesetzt ist. Beim Setzen wird der Wert unverändert in das Attribut referrerpolicy geschrieben.

Beispiele

Richtlinie eines Links auslesen

// HTML: <a id="docs" href="https://example.com" referrerpolicy="origin">Doku</a>
const link = document.getElementById('docs');
console.log(link.referrerPolicy);
console.log(link.getAttribute('referrerpolicy'));

origin origin

Alle externen Links ohne Referrer ausliefern

const externalLinks = [...document.querySelectorAll('a[href]')]
  .filter((a) => a.origin !== location.origin);

for (const a of externalLinks) {
  a.referrerPolicy = 'no-referrer';
  a.rel = 'noopener noreferrer';
}

console.log(`${externalLinks.length} externe Links abgesichert`);

3 externe Links abgesichert

Link dynamisch mit Richtlinie erzeugen

const createLink = (href, text, policy = 'strict-origin-when-cross-origin') => {
  const a = document.createElement('a');
  a.href = href;
  a.textContent = text;
  a.referrerPolicy = policy;
  return a;
};

const link = createLink('https://partner.example/', 'Partner', 'origin');
document.body.append(link);
console.log(link.outerHTML);

<a href="https://partner.example/" referrerpolicy="origin">Partner</a>

Unterstützung prüfen

const supported = 'referrerPolicy' in HTMLAnchorElement.prototype;
console.log(supported ? 'referrerPolicy wird unterstützt' : 'Fallback: rel="noreferrer" verwenden');

referrerPolicy wird unterstützt

// Wichtig · Fallstricke

Ungültige Werte: Setzt man einen unbekannten Wert wie "none", landet er zwar im Attribut, der Getter gibt aber "" zurück. Dann gilt die Richtlinie des Dokuments. Einen Fehler gibt es dabei nicht.
Standardwert: Moderne Browser verwenden strict-origin-when-cross-origin, wenn nichts festgelegt ist. Frühere Browser nutzten no-referrer-when-downgrade.
Sicherheit: Vermeide "unsafe-url". Damit gelangen vollständige URLs samt Query-Parametern, etwa Tokens oder E-Mail-Adressen, an Dritte, auch über unverschlüsseltes HTTP.
Zusammenspiel mit rel="noreferrer": rel="noreferrer" unterdrückt den Referrer ebenfalls, hat aber Vorrang und setzt zusätzlich noopener.
Kompatibilität: Wird in allen aktuellen Browsern unterstützt. Safari bietet die Eigenschaft erst ab Version 14.1 vollständig an, der Internet Explorer gar nicht.
Die Richtlinie ist kein Schutz gegen gezieltes Tracking. Sie steuert nur den Header Referer und document.referrer auf der Zielseite.

Siehe auch

HTMLAnchorElement HTMLAnchorElement.rel HTMLAnchorElement.ping HTMLImageElement.referrerPolicy HTMLIFrameElement.referrerPolicy Document.referrer HTMLAreaElement.referrerPolicy