HTTP Referrer, Referrer-Policy, document.referrer

A super-simple explanation

HTTP Referrer

an optional header of HTTP requests

The HTTP referer (a misspelling of referrer) is an optional HTTP header field that identifies the address of the webpage which is linked to the resource being requested. By checking the referrer, the new webpage can see where the request originated. - wikipedia

Referrer-Policy

an HTTP header controls HTTP Referrer

HTTP header controls how much referrer information (sent via the Referer header) should be included with requests. — MDN

document.referrer

A read-only property of document in the browser — MDN

What happens when you open a page from Google

Search something in google, and open that link in your browser, which Referrer-Policy should browser follows? What Referrer Header is sent to the page?

1. Let’s search “what is referrer” in Google

2. Go to Dev Tools > Network tab > Doc, you should see the Referrer-Policy is been set to orgin. In another word, Google tells the browser, always put https://www.google.com/ to the Referrer header if any links being opened.

3. Click the Wikipedia link, open Dev Tools > Network tab > Doc, check Request Header, it does show https://www.google.com/ in referrer

4. Try to modify document.referrer in Dev Tools > Console Tab, you should not be able to do so, because it is a read-only property of the document object.

Referrer-Policy

Which one should I use, you can find everything on MDN Referrer-Policy, a short version is:

orgin if you want your downstream websites to know the request origin regardless, eg. Google, Facebook, etc

no-referrer-when-downgrade a safer choice than origin it opt-out HTTPS>HTTP requests

strict-origin-when-cross-origin the new and recommended policy, the new default policy after Chrome 85.

How to set up the Referrer-Policy for your site?

You just need to do 2 things to set it up

1. Put a page-level policy in the meta tag

<meta name="referrer" content="origin">

2. Put noreferer to opt-out those you don’t want

<a href="https://example.com" rel="noreferrer">an external link</a>

Readings

• Referrer Best Practices: https://web.dev/referrer-best-practices/
• Referrer-Policy Deep Dive: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy