HTMLLinkElement.referrerPolicy — Eigenschaft · JavaScript-Referenz

Signatur

HTMLLinkElement.referrerPolicy

Beschreibung

Die Eigenschaft referrerPolicy spiegelt das HTML-Attribut referrerpolicy eines <link>-Elements wider. Sie bestimmt, wie viele Informationen über die aufrufende Seite im Referer-Header stehen, wenn der Browser die verknüpfte Ressource lädt, z. B. ein Stylesheet, ein Preload, ein Prefetch oder ein Icon.

Mögliche Werte sind:

"" (leerer String): Es gilt die Standard-Richtlinie des Dokuments (in modernen Browsern meist strict-origin-when-cross-origin).
no-referrer: Es wird kein Referer-Header 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: Bei gleichem Ursprung die volle URL, sonst nur den Ursprung.
same-origin: Ein Referrer wird nur bei Anfragen an denselben Ursprung gesendet.
strict-origin: Nur den Ursprung, und bei einem Wechsel von HTTPS zu HTTP gar nichts.
strict-origin-when-cross-origin: Bei gleichem Ursprung die volle URL, bei fremdem Ursprung nur den Ursprung und bei einem Wechsel zu HTTP nichts.
unsafe-url: Immer die volle URL, auch bei unsicheren Verbindungen. Das ist nicht empfehlenswert.

Mit dieser Eigenschaft steuerst du den Datenschutz für einzelne Ressourcen, ohne die Richtlinie der ganzen Seite zu ändern. Das ist nützlich, wenn du Schriften, Stylesheets oder Preloads von Drittanbietern lädst und dabei keine Pfade oder Abfrageparameter der eigenen Seite (etwa Sitzungs- oder Such-Tokens) weitergeben willst.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen ein gültiger Wert für die Referrer-Richtlinie, z. B. `"no-referrer"` oder `"origin"`. Ungültige Werte werden beim Lesen als `""` zurückgegeben.

Rückgabewert

Typ

string

Beschreibung

Die aktuelle Referrer-Richtlinie des Elements in Kleinbuchstaben. Ist das Attribut nicht gesetzt oder ungültig, wird ein leerer String "" zurückgegeben.

Beispiele

Richtlinie eines vorhandenen Links auslesen

// HTML: <link id="theme" rel="stylesheet" href="https://cdn.example.com/theme.css" referrerpolicy="origin">
const link = document.getElementById('theme');
console.log(link.referrerPolicy);

origin

Stylesheet eines Drittanbieters ohne Referrer laden

const loadExternalCss = (href) => {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  // Vor dem Einfügen setzen, damit es schon für die erste Anfrage gilt
  link.referrerPolicy = 'no-referrer';
  document.head.append(link);
  return link;
};

const css = loadExternalCss('https://fonts.example.com/css?family=Inter');
console.log(css.getAttribute('referrerpolicy'));

no-referrer

Preload mit datensparsamer Richtlinie und Verhalten bei ungültigen Werten

const preload = document.createElement('link');
preload.rel = 'preload';
preload.as = 'image';
preload.href = 'https://img.example.com/hero.webp';
preload.referrerPolicy = 'strict-origin-when-cross-origin';
document.head.append(preload);

// Ungültiger Wert: Das Attribut wird gesetzt, gelesen wird aber ''
const test = document.createElement('link');
test.referrerPolicy = 'irgendwas';
console.log(JSON.stringify(test.referrerPolicy));
console.log(test.getAttribute('referrerpolicy'));

"" irgendwas

// Wichtig · Fallstricke

Zeitpunkt: Die Richtlinie gilt nur für Anfragen, die der Browser nach dem Setzen startet. Setze referrerPolicy deshalb, bevor du href zuweist oder das Element ins DOM einfügst. Wenn du den Wert nachträglich änderst, wird ein bereits geladenes Stylesheet nicht neu angefordert.
Ungültige Werte lösen keinen Fehler aus. Beim Lesen erhältst du einfach "", und es gilt die Standard-Richtlinie des Dokuments.
Sicherheit und Datenschutz: Vermeide unsafe-url. Damit gehen vollständige URLs samt Abfrageparametern auch über unverschlüsseltes HTTP an Dritte. Als sichere Wahl für externe Ressourcen eignen sich no-referrer oder strict-origin-when-cross-origin.
Vorrang: Das Attribut am Element hat Vorrang vor der Richtlinie des Dokuments, die per Referrer-Policy-Header oder <meta name=\"referrer\"> gesetzt wurde. Ein Beispiel dafür ist rel=\"noreferrer\" bei <a>. Bei <link> hat rel dagegen keine vergleichbare Wirkung.
Kompatibilität: Alle modernen Browser unterstützen die Eigenschaft. Safari unterstützt sie erst ab Version 14 vollständig, der Internet Explorer gar nicht. Ältere Browser ignorieren den Wert stillschweigend.

Siehe auch

HTMLLinkElement HTMLAnchorElement.referrerPolicy HTMLImageElement.referrerPolicy HTMLScriptElement.referrerPolicy HTMLLinkElement.crossOrigin Document.referrer Request.referrerPolicy