JavaScript: REFERRER

The browser stores some information about HTTP request headers. They're useful for many purposes. One of the headers is the referral information.

It's the previous referring URL of the current URL.

---

URL Referrer Concept

This post has links to another posts.

If we go to any of those (click the link), then this URL will be the referrer of that link.

Similar to ordinary referral (referring) concept in daily life, but within web (HTTP) realm.

---

Legendary Misspelling

Year	Context	Spelling Used	Notes
Pre-1996 (until now)	Standard English	Referrer ✅	The correct spelling in proper English.
1996	HTTP/1.0 Specification (RFC 1945)	Referer ❌	A typo in the RFC that became part of the official HTTP header. It was never corrected to preserve backwards compatibility.
Late 1990s - Early 2000s	JavaScript (DOM API)	referrer ✅	The DOM API in browsers chose the correct spelling for document.referrer, ignoring the HTTP typo.
Present Day	Modern Web	Referer (HTTP Header) ❌ referrer (JavaScript API) ✅	The typo lives on in HTTP headers, but JavaScript maintains the correct spelling. Both exist in this beautiful mess.

---

JavaScript

We can get the URL referrer string from visitor's browser using:

document.referrer

It will output the string of the current URL referrer.

The output will be empty string ('') if:

• Visitor comes from a bookmark or directly typed the current URL.
• The previous (referring) URL actually empties (removes) the referral header (bridging technique — combines frontend and backend).
• The link is accessed from clicking an anchor (a) element with rel="noreferrer" attribute (more explanation below).

---

Demonstration

---

Code

<!--STYLING--> <style> .wrap_demo { text-align: center; margin:10px 0; } .demo_output { width: 100%; padding: 10px; font-size: 18px; border-radius: 8px; box-sizing: border-box; text-align: center; color: darkgreen; } .demo_output, .demo_btn { font-family: consolas, monaco, menlo, courier, monospace; } </style> <!--HTML elements--> <div class="wrap_demo"> <input type="text" placeholder="Output" class="demo_output" id="demo_output" readonly="readonly"></div> <div class="wrap_demo"> <button class="demo_btn" onclick="outputReferrer()">🔍 FIND OUT</button> </div> <!--JavaScript--> <script> function outputReferrer() { const urlReferrer = document.referrer; const output = document.getElementById("demo_output"); if (!urlReferrer) { // Empty referrer. output.value = "Empty."; output.style.color = "#888"; } else { // Existent referrer. output.value = urlReferrer; output.style.color = ""; } } </script>

Accumulating Referrers as List?

We saw that kind of information, right? It's offered as a free widget, with the country flag and map sometimes.

We cannot use solely client-side (frontend) method to achieve that.

It is the combination of client-side and server-side (mostly on server). We need a database, store and lookup methods, and so forth to accumulate the referrers for a specific URL.

---

Relation (rel) Attribute in Anchor

In another story, the attribute [rel="nofollow"] in an anchor (link) element has nothing to do with this. That attribute is the road sign for scraper/crawler bots.

<a href="LINK" rel="nofollow">LINK</a>

Meaning:

Do not pass SEO ranking (PageRank) to that LINK.

But users can still click it and navigate normally.

---

In current story, [rel="noreferrer"] has something to do with this. If we implement that attribute and value in anchor a link element, browser will erase the referrer (or HTTP Referer) header.

More information about noreferrer at MDN.

Open in same tab:

<a href="LINK" rel="noreferrer">LINK</a>

Open in new tab:

<a href="LINK" target="_blank" rel="noopener noreferrer">LINK</a>

noopener is used for nulling window.opener — meaning the new page cannot inject anything or does phishing trick or full-blown tab hijacking. It is a security precaution by adding rel="noopener" for target="_blank".

More information about noopener at MDN.

But by default, using only noreferrer behaves similarly to noopener noreferrer.

Thus new tab link with noreferrer can be simplified as:

<a href="LINK" target="_blank" rel="noreferrer">LINK</a>

---

Back to our theme...

Server-Side (Backend)

For instance we're on Flask (Python), here's how the legendary HTTP Referer can be accessed.

from flask import Flask, request app = Flask(__name__) @app.route("/") def getReferrer(): referer = request.headers.get("Referer") # LEGEND 🏆 return f"Referrer is: {referer}" if __name__ == "__main__": app.run(debug=True)

Or in Go(lang) 😵‍💫

package main import ( "fmt" "net/http" ) func getReferrer(w http.ResponseWriter, r *http.Request) { referer := r.Header.Get("Referer") // LEGEND 🏆 fmt.Fprintf(w, "Referrer is: %s", referer) } func main() { http.HandleFunc("/", getReferrer) fmt.Println("Running on :8080") http.ListenAndServe(":8080", nil) }

Or in Rust ☠️

use axum::{ extract::TypedHeader, http::header::REFERER, // LEGEND 🏆 response::Html, routing::get, Router } use std::net::SocketAddr async fn get_referrer(TypedHeader(referer): TypedHeader<axum::http::HeaderValue>) -> Html<String> { let referer_str = referer.to_str().unwrap_or("Unknown Referer") Html(format!("Referrer is: {}", referer_str)) } #[tokio::main] async fn main() { let app = Router::new().route("/", get(get_referrer)) let addr = SocketAddr::from(([127, 0, 0, 1], 8080)) println!("Running on {}", addr) axum::Server::bind(&addr) .serve(app.into_make_service()) .await .unwrap() }

And on Express (Node.js) 🫡🌹

req.headers["referer"]

It is because Express auto-lowercases all header keys.

But it can also be like this:

const express = require("express") const app = express() app.get("/", (req, res) => { const referer = req.get("Referer") // LEGEND 🏆 res.send(`Referrer is: ${referer || "None"}`) }) const PORT = 8080 app.listen(PORT, () => { console.log(`Running on http://localhost:${PORT}`) })

---

All in all, document.referrer (client-side) = Browser-filtered interpretation of HTTP Referer (server-side).