JavaScript Document referrer Property

What You’ll Learn

Document.referrer is a read-only instance property that returns the URL of the page that linked here, or an empty string on direct visits. Learn MDN’s logging example, how it differs from documentURI, Referrer-Policy effects, and five hands-on examples.

Introduction

When a user clicks a link from one site to another, the browser often sends a Referer HTTP header (note the historical spelling) telling the destination where the click came from. In JavaScript, document.referrer exposes that information as a string on the current page.

MDN: the property returns the URI of the page that linked to this page. The value is an empty string if the user navigated directly — for example via a bookmark or by typing the address.

Related Document tutorials: documentURI, location, domain, Document constructor.

Understanding Document.referrer

A read-only instance property on Document. Its value reflects how the user arrived at this document.

• Value — previous page URI string, or "" on direct navigation (MDN).
• Read-only — set by the browser from navigation and policy; not assignable.
• No DOM — string URL only; no reference to the other document (MDN).
• Iframes — same-origin may use parent URL; cross-origin may send origin only (MDN, Referrer-Policy).
• Status — Baseline Widely available since July 2015 (MDN).

📝 Syntax

document.referrer

Value

A string — the referring page URI, or "" when there is no referrer (MDN).

MDN example — log the referrer

console.log(document.referrer);

MDN: if the user clicked a link like <a href="https://example.com">Example</a> on another site, document.referrer may contain that site’s URL. On a direct visit, it outputs an empty string.

⚖️ Referrer vs Current Page URLs

Examples Gallery

Examples follow MDN Document: referrer. In try-it labs opened directly, document.referrer is usually empty — that is expected.

console.log(document.referrer);
// "" when opened directly in try-it

(empty string)

console.log(document.referrer);

https://developer.mozilla.org/...

if (document.referrer === "") {
  console.log("Direct visit (no referrer)");
} else {
  console.log("Referred from:", document.referrer);
}

Direct visit (no referrer)

function getReferrerHost() {
  if (!document.referrer) return null;
  try {
    return new URL(document.referrer).hostname;
  } catch {
    return null;
  }
}

console.log(getReferrerHost());

null

console.log({
  referrer: document.referrer || "(direct)",
  current: document.documentURI
});

{ referrer: "(direct)", current: "https://..." }

🚀 Common Use Cases

• Traffic source — log where visitors clicked from.
• Onboarding — show different copy for direct vs referred users.
• Affiliate checks — verify expected referrer domains (with policy caveats).
• Debugging navigation — inspect referrer during QA.
• Security awareness — never trust referrer alone for auth decisions.
• Privacy design — understand Referrer-Policy trimming behavior.

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Read-only; assigning does not change the referrer sent by the browser.
• Referrer-Policy and browser privacy features may shorten or hide the value.
• In iframes, same-origin vs cross-origin behavior differs (MDN).
• Related: documentURI, location, Document constructor.

💡 Best Practices