When should I use rel=noreferrer?

Question

I have to link some other external sites.

I know when to use nofollow. But I am not clear when I should use rel=noreferrer.

Orbit

Answer 1

In short, the noreferrer link type hides referrer information when the link is clicked. A link with the noreferrer link type looks something like this:

<a href="http://www.example.com" rel="noreferrer">Click here for more info</a>

If someone arrives at your site from a link that uses this link type, your analytics won't show who refered that link. Instead, it will mistakenly show as direct traffic in your acquisition channels report.

If you have an external link to someone else's site you don't trust and you want to hide referrer information then you can combine both and use

<a href="http://example.com/sample_page/" rel="noreferrer nofollow">Other Domain Link</a>

I advise you to use nofollow links for the following content:

• Links in comments or on forums - Anything that has user-generated content is likely to be a source of spam. Even if you carefully moderate, things will slip through.
• Advertisements & sponsored links - Any links that are meant to be advertisements or are part of a sponsorship arrangement must be nofollowed.
• Paid links - If you charge in any way for a link (directory submission, quality assessment, reviews, etc.), nofollow the outbound links

Orbit

It seems rare that you would "link to [a] site you don't trust" – Hemipterous

@A.K. The usual case is user generated content, that you don't know whether or not is trustworthy. But any external site could itself be a victim of a hack, so best practice is to be safe. – Cultrate

@Hemipterous Any site that isn't yours is one you shouldn't trust. – Fasciate

Answer 2

noreferrer doesn't just block the HTTP referrer header, it also prevents a Javascript exploit involving window.opener

<a href="http://someurl.here" target="_blank">Link</a>
Looks innocuous enough, but there's a hole because, by default, the page that's being opened is allowing the opened page to call back into it via window.opener. There are some restrictions, being cross-domain, but there's still some mischief that can be done
window.opener.location = 'http://gotcha.badstuff';

With noreferrer most browsers will disallow the window.opener exploit

Construe

I believe noopener is the current best practice to handle that exploit, not noreferrer. – Kktp

Answer 3

As @unor said, it hides referrer information when the link is clicked. Basically this is a privacy enhancement for when you want to hide from the owner of the linked domain that the user came from your website.

Example:

User is on your website www.mywebsite.com, there you have a <a href="https://newsite.com">Link</a>. When someone clicks the "Link" the owner of newsite.com knows it came from www.mywebsite.com. By setting rel=noreferrer you prevent revealing this information.

A good example how it works is starting from 21:28 of this conference talk. This is considered to be a good practice when working with server-side (e.g. Node.js). You can also read about this on the Helmet documentation.

Soliz

Answer 4

You'll only need to use this on private pages or pages you don't want to advertise. E.g. a webmail or private bug tracker would be considered private and you don't want to leak any information to the external linked websites.

Sensitive public pages, like medical information or other sensitive topics may also want to mask the referrer header.

Eduard