Signatur
Beschreibung
Die Eigenschaft referrer des Request-Interfaces gibt an, welcher Referrer für die Anfrage vorgesehen ist. Der Wert ist immer ein String und kann drei Formen haben:
"about:client": Der Standardwert. Der Browser setzt den Referrer selbst, abhängig vom aufrufenden Dokument bzw. Worker und von der gültigenreferrerPolicy.""(leerer String): Es wird bewusst kein Referrer gesendet (entspricht „no-referrer“).- Eine absolute URL, z. B.
"https://example.com/seite": Diese URL wurde ausdrücklich als Referrer festgelegt.
Den Wert legt man über die Option referrer im Request-Konstruktor oder in fetch() fest. Relative Angaben werden dabei gegen die Basis-URL des Dokuments aufgelöst. Nach dem Erzeugen kann die Eigenschaft nicht mehr geändert werden. Wer einen anderen Referrer braucht, erzeugt mit new Request(alterRequest, { referrer: … }) eine neue Anfrage.
Nützlich ist referrer vor allem in Service Workern: Dort lässt sich im fetch-Event über event.request.referrer ablesen, von welcher Seite eine Anfrage stammt, etwa für Protokollierung, Zugriffsregeln oder Cache-Strategien.
Wichtig: referrer zeigt den gewünschten Referrer. Welcher Referer-Header tatsächlich gesendet wird, hängt zusätzlich von Request.referrerPolicy ab. Die Policy kann die URL kürzen (z. B. auf den Origin) oder ganz entfernen.
Rückgabewert
"about:client" (Standard), "" für keinen Referrer oder eine absolute Referrer-URL.Beispiele
Standardwert und ausdrücklich gesetzte Referrer
// Angenommen, die Seite läuft unter https://example.com/shop/
const standard = new Request('/api/produkte');
console.log(standard.referrer);
const ohne = new Request('/api/produkte', { referrer: '' });
console.log(JSON.stringify(ohne.referrer));
const eigene = new Request('/api/produkte', { referrer: '/shop/warenkorb' });
console.log(eigene.referrer);Referrer im Service Worker auswerten
// sw.js
self.addEventListener('fetch', (event) => {
const { url, referrer } = event.request;
// Bilder nur für Anfragen von der eigenen Seite ausliefern
if (url.endsWith('.jpg') && referrer && !referrer.startsWith(self.location.origin)) {
event.respondWith(new Response('Hotlinking nicht erlaubt', { status: 403 }));
return;
}
console.log(`Anfrage ${url} von ${referrer || '(kein Referrer)'}`);
});Request mit geändertem Referrer kopieren
const original = new Request('/api/daten', { method: 'GET' });
// referrer ist schreibgeschützt, deshalb eine neue Request erzeugen
const anonym = new Request(original, { referrer: '', referrerPolicy: 'no-referrer' });
console.log(original.referrer, '→', JSON.stringify(anonym.referrer));
const res = await fetch(anonym);
console.log(res.status);// Wichtig · Fallstricke
- Schreibgeschützt:
request.referrer = '…'wird ignoriert und wirft im Strict Mode einenTypeError. Einen anderen Referrer setzt man nur beim Erzeugen der Request. - Nur gleicher Origin: Eine als Referrer übergebene URL muss denselben Origin wie das aufrufende Dokument haben. Bei einer URL mit fremdem Origin fällt der Browser auf
"about:client"zurück. Eine ungültige URL löst einenTypeErroraus. Den Referrer auf fremde Seiten zu fälschen, ist also nicht möglich. - Nicht gleich dem gesendeten Header: Welcher
Referer-Header tatsächlich gesendet wird, bestimmt zusätzlichreferrerPolicy. Die Standard-Policy der Browser,strict-origin-when-cross-origin, sendet an fremde Origins nur den Origin. - Sicherheit: Der Referrer wird vom Client geliefert und lässt sich außerhalb des Browsers beliebig setzen. Für Zugriffsschutz auf dem Server ist er deshalb nicht verlässlich.
- In Node.js (undici-basiertes
fetch) gibt es kein Dokument. Relative Referrer-URLs lassen sich dort nicht auflösen, und der Standardwert ist ebenfalls"about:client".