Document.referrer — Eigenschaft · JavaScript-Referenz

Signatur

get Document.referrer

Beschreibung

Die schreibgeschützte Eigenschaft document.referrer liefert die URL des Dokuments, das die Navigation zur aktuellen Seite ausgelöst hat – typischerweise die Seite mit dem angeklickten Link oder dem abgeschickten Formular. Der Wert entspricht dem HTTP-Header Referer, der beim Laden der Seite gesendet wurde.

Nützlich ist die Eigenschaft für einfache Herkunftsanalysen (z. B. „kam der Besucher von einer Suchmaschine?“), für einen „Zurück zur vorherigen Seite“-Link oder um Inhalte je nach Einstiegsquelle anzupassen. In einem <iframe> enthält referrer standardmäßig die URL des einbettenden Dokuments.

Ist keine Herkunft vorhanden, ist der Wert ein leerer String – etwa bei direkter Eingabe der URL, Aufruf über ein Lesezeichen, Links mit rel="noreferrer" oder einem Wechsel von HTTPS auf HTTP. Welcher Teil der URL übermittelt wird, bestimmt die Referrer-Policy: Moderne Browser verwenden standardmäßig strict-origin-when-cross-origin, sodass bei seitenübergreifender Navigation meist nur der Ursprung (z. B. https://example.com/) statt der vollständigen URL ankommt.

Rückgabewert

Typ

string

Beschreibung

Die vollständige oder (je nach Referrer-Policy) gekürzte URL der verweisenden Seite; ein leerer String, wenn keine Herkunft bekannt ist oder sie unterdrückt wurde.

Beispiele

Herkunft der Seite ausgeben

const herkunft = document.referrer;

if (herkunft) {
  console.log(`Besucher kam von: ${herkunft}`);
} else {
  console.log('Direkter Aufruf oder Referrer unterdrückt');
}

Besucher kam von: https://www.google.com/

Einstiegsquelle klassifizieren

const quelleBestimmen = () => {
  if (!document.referrer) return 'direkt';

  const { hostname } = new URL(document.referrer);

  if (hostname === location.hostname) return 'intern';
  if (/(^|\.)(google|bing|duckduckgo)\./.test(hostname)) return 'suchmaschine';
  return 'extern';
};

console.log(quelleBestimmen());

suchmaschine

Zurück-Link nur bei interner Herkunft anzeigen

const backLink = document.querySelector('#zurueck');

const istIntern = document.referrer &&
  new URL(document.referrer).origin === location.origin;

if (istIntern) {
  backLink.href = document.referrer;
  backLink.hidden = false;
} else {
  // Fallback auf die Startseite
  backLink.href = '/';
}

// Wichtig · Fallstricke

Referrer-Policy: Durch den Standard strict-origin-when-cross-origin erhält man bei fremden Seiten meist nur den Ursprung ohne Pfad und Query-String. Seiten können über den Header Referrer-Policy, <meta name="referrer"> oder das Attribut referrerpolicy den Wert weiter einschränken oder ganz unterdrücken.
Leerer String statt null: Vor new URL(document.referrer) immer auf einen leeren Wert prüfen, sonst wird ein TypeError geworfen.
Keine Sicherheitsgrundlage: Der Referrer ist nicht vertrauenswürdig – er lässt sich fälschen, unterdrücken oder durch Erweiterungen entfernen. Nicht für Zugriffskontrolle oder CSRF-Schutz nutzen.
XSS: Den Wert nie ungefiltert per innerHTML einfügen; textContent verwenden oder die URL validieren.
Navigationen per history.pushState() in Single-Page-Apps ändern document.referrer nicht – der Wert bleibt der des ursprünglichen Seitenaufrufs.
Wird die Seite aus dem Back-/Forward-Cache wiederhergestellt, kann der Wert veraltet sein.

Siehe auch

Document.URL Document.location Window.history Request.referrer CSPViolationReport.referrer