Start · Sprachen · JavaScript · Referenz · HTMLScriptElement.referrerPolicy

HTMLScriptElement.referrerPolicy

Eigenschaft

Liest oder setzt das HTML-Attribut <code>referrerpolicy</code> eines <code>&lt;script&gt;</code>-Elements, das festlegt, welcher Referrer beim Laden des Skripts und seiner Importe mitgesendet wird.

seit JavaScript Baseline: alle modernen Browser (seit 2020) Kategorie: webapi

Signatur

HTMLScriptElement.referrerPolicy

Beschreibung

Die Eigenschaft referrerPolicy spiegelt das Inhaltsattribut referrerpolicy eines <script>-Elements wider. Sie bestimmt, wie viele Informationen im Referer-Header stehen, wenn der Browser das über src angegebene Skript abruft. Bei Modulskripten (type="module") gilt die Richtlinie auch für statisch und dynamisch importierte Module.

Zulässige Werte sind:

  • "" (leer): Es gilt die Standardrichtlinie des Dokuments, meist strict-origin-when-cross-origin.
  • no-referrer: Es wird kein Referrer gesendet.
  • no-referrer-when-downgrade: Die vollständige URL wird gesendet, außer beim Wechsel von HTTPS auf HTTP.
  • origin: Nur der Ursprung wird gesendet (Schema, Host, Port).
  • origin-when-cross-origin: Bei gleichem Ursprung die volle URL, sonst nur der Ursprung.
  • same-origin: Der Referrer wird nur bei Anfragen an denselben Ursprung gesendet.
  • strict-origin: Nur der Ursprung, und nur solange das Sicherheitsniveau gleich bleibt.
  • strict-origin-when-cross-origin: Bei gleichem Ursprung die volle URL, bei fremdem Ursprung nur der Ursprung, bei einem Wechsel auf HTTP nichts.
  • unsafe-url: Immer die vollständige URL, auch über HTTP. Davon wird abgeraten.

Praktisch nutzt man die Eigenschaft vor allem, wenn man Drittanbieter-Skripte (Analytics, Widgets, CDN-Bibliotheken) dynamisch einbindet und nicht preisgeben will, welche URL der Nutzer gerade aufruft. Das kann zum Beispiel wichtig sein, wenn in Pfaden oder Query-Parametern Tokens oder personenbezogene Daten stehen.

Parameter

Name Typ Default Beschreibung
$value string "" Beim Setzen: einer der gültigen Richtlinienwerte, z. B. "no-referrer". Ungültige Werte werden als leerer String behandelt.

Rückgabewert

Typ
string
Beschreibung
Die aktuell gesetzte Referrer-Richtlinie als String in Kleinbuchstaben. Ist das Attribut nicht gesetzt oder ungültig, wird "" zurückgegeben.

Beispiele

Drittanbieter-Skript ohne Referrer laden

const script = document.createElement('script');
script.src = 'https://cdn.example.com/widget.js';
script.referrerPolicy = 'no-referrer';
script.async = true;
script.addEventListener('load', () => console.log('Widget geladen'));
document.head.append(script);

console.log(script.getAttribute('referrerpolicy'));
no-referrer Widget geladen

Wert aus vorhandenem Markup auslesen

// <script id="analytics" src="/a.js" referrerpolicy="ORIGIN"></script>
const el = document.getElementById('analytics');
console.log(el.referrerPolicy);

// Ungültiger Wert fällt auf leeren String zurück
el.setAttribute('referrerpolicy', 'irgendwas');
console.log(JSON.stringify(el.referrerPolicy));
origin ""

Modulskript mit Richtlinie auch für Importe

const mod = document.createElement('script');
mod.type = 'module';
mod.referrerPolicy = 'strict-origin';
// Auch die Importe in main.js werden mit strict-origin angefordert
mod.src = 'https://static.example.com/app/main.js';
document.body.append(mod);

Hilfsfunktion zum sicheren Nachladen

const loadScript = (src, policy = 'strict-origin-when-cross-origin') =>
  new Promise((resolve, reject) => {
    const s = document.createElement('script');
    s.src = src;
    s.referrerPolicy = policy;
    s.onload = () => resolve(s);
    s.onerror = () => reject(new Error(`Fehler beim Laden: ${src}`));
    document.head.append(s);
  });

const s = await loadScript('https://cdn.example.com/lib.js', 'no-referrer');
console.log(s.referrerPolicy);
no-referrer

// Wichtig · Fallstricke

  • Zeitpunkt: Setze referrerPolicy, bevor das Element ins Dokument eingefügt wird bzw. bevor du src zuweist, an dem es schon im Dokument hängt. Sobald der Abruf gestartet ist, hat eine spätere Änderung keine Wirkung mehr.
  • Inline-Skripte: Bei Skripten ohne src betrifft die Richtlinie nur Module, die das Skript importiert. Für klassische Inline-Skripte hat sie keine Wirkung.
  • Vorrang: Das Attribut hat Vorrang vor der Dokument-Richtlinie aus dem HTTP-Header Referrer-Policy oder aus <meta name="referrer">. Eine lockerere Richtlinie wie unsafe-url kann deshalb Daten preisgeben, die die Seite eigentlich schützen wollte.
  • Sicherheit: Verwende unsafe-url nicht. Damit können Pfade und Query-Strings mit Session-IDs oder Tokens auch über unverschlüsseltes HTTP an Dritte gelangen.
  • Browser-Unterstützung: Chrome/Edge 70+, Firefox 65+ und Safari 14+ unterstützen die Eigenschaft. Ältere Browser ignorieren sie ohne Fehlermeldung und verwenden dann die Dokument-Richtlinie.
  • Der Wert wird in Kleinbuchstaben umgewandelt. Unbekannte Werte führen nicht zu einem Fehler, sondern ergeben "".