When To Use noreferrer In Your Links (with examples)

What is rel noreferrer

Hey there! Some links on this page may be affiliate links which means that, if you choose to make a purchase, I may earn a small commission at no extra cost to you. I greatly appreciate your support!

When linking to an external website (and internally for that matter), you have complete control over how much the next page knows about your current page.

On one side of the spectrum, you can use rel="noreferrer" to make yourself completely unknown to the linked page.

Alternatively, you can share the entire URL of the current page including the domain name, path, and parameters with referrerpolicy="unsafe-url".

The examples below will demonstrate how and when to use different referrer policies in your HTML links.

1. No Referrer

When you click on this link with a rel="noreferrer" value, the linked page will not know anything about where you came from.

<a href="page.html" rel="noreferrer">this link</a>

The following have equivalent behavior in term of the referrer policy:

  • rel="noreferrer"
  • rel="noreferrer noopener"
  • referrerpolicy="no-referrer"

All of the above are safe and will not share anything about the source page.

Alternatively, referrerpolicy="no-referrer-when-downgrade" will send the domain, path, and parameters with a linked page if the security stays the same or improves (HTTP→HTTP, HTTP→HTTPS, HTTPS→HTTPS). Otherwise, no information will be shared (HTTPS→HTTP).

2. Origin

When you click on this link, the domain name of this will be shared with the linked page.

<a href="page.html" referrerpolicy="origin">this link</a>

With referrerpolicy="origin", the domain name will be sent to less secure destinations (i.e. HTTPS→HTTP).

Contrary, with referrerpolicy="strict-origin", the domain name will only be sent when the security level stays the same (i.e. HTTPS→HTTPS); otherwise, nothing is sent.

3. Same Origin

When you click on this link, the domain name, path, and parameters will be shared with the liked page if the linked page shares the same domain name. Otherwise, no information is shared.

<a href="page.html" referrerpolicy="same-origin">this link</a>

Similarly, referrerpolicy="origin-when-cross-origin" will also send the domain, path, and parameters with a linked page that has the same domain name, but if linking to another domain or a less secure destination (i.e. HTTPS→HTTP) then only the domain will be sent.

Finally, referrerpolicy="strict-origin-when-cross-origin" will also send the domain, path, and parameters with a linked page that has the same domain name, but if linking to another domain then only the domain will be sent, and if linking to a less secure destination (i.e. HTTPS→HTTP) then nothing will be sent.

4. Unsafe URL

When you click on this link, the domain name, path, and parameters will be shared with the linked page in all cases.

<a href="page.html" target="_blank" referrerpolicy="unsafe-url">this link</a>
Facebook
Twitter
Pinterest
LinkedIn
Reddit

Meet Tony

Tony from Tony Teaches Tech headshot

With a strong software engineering background, Tony is determined to demystify the web. Discover why Tony quit his job to pursue this mission. You can join the Tony Teaches Tech community here.

Leave a Reply

Your email address will not be published. Required fields are marked *