3

I have been reading about the security and performance implications of rel="noopener" and rel="noreferrer" in links with target="_blank". These are some of the observations:

  • if you open a link in a new tab from your app, by default it would have access to window.opener and would be able to change the url for it (reverse tabnabbing)
  • the new tab would share the resources of your page by default, which means if it is resource intensive it might make your page slow.

these things can be fixed by adding rel="noopener"

  • On top of this, there is another security concern, when the link is opened in a new tab, the referrer information is sent in the referer header and some sensitive data may be exposed in the url to the target site.

This can be fixed by adding rel="noreferer" (or restricting your CSP for referrer info)

Though I understand this, I have some questions which i am seeking clarifications for:

  • It seems that adding rel="noreferrer" alone should be enough as by default it enables all the things that rel="noopener" enables, while also adding referer security on top of it. If that is true, why do all the examples in the wild specify rel="noopener noreferrer" and not just rel="noreferrer"
  • I understand that rel="noopener" is only applicable when the link is opened in a new tab, but as much as I understand, the same shouldn't be true for rel="noreferrer". I haven't seen any examples where rel="noreferrer" is specified without target="_blank" . Wouldn't links that open in the same tab also leak the referrer information?
gaurav5430
  • 171
  • 9

1 Answers1

3

After a search on the internet, it looks like "noopener" is really not needed, if you already have "noreferrer". However, I believe it is usually still included for clarity (so the intended behavior is stated clearly), and because most developers feel it is "safer" to include it to avoid possible compatibility issues in some browsers (maybe "noreferrer" in some browsers doesn't imply "noopener"? Apparently not, but most developers aren't sure.)

Look at this question in StackOverflow, to see how confused developers can be about this issue: why people use rel noopener instead of just rel noreferrer.

Then also take a look at this discussion, to see some more confusion, and finally a guy who ended up running lots of automated tests in lots of browsers, to find out the truth (that is, there are no browsers that require both keywords): discussion on Github, answer with tests.

As for "noreferrer" to avoid leaking referrers, that's exactly what is does. I don't know how much it's used in practice. What I know though, is that there are better ways to control referrers with specific HTTP headers or HTML meta tags.

reed
  • 15,398
  • 6
  • 43
  • 64
  • Thanks. this gives some insights about using both of them together. In particular, it seems that both are used together to make this work cross browser. Still looking for clarifications for the 2nd question though – gaurav5430 Dec 02 '20 at 10:10
  • @gaurav5430, I added a couple of lines in my answer about noreferrer. – reed Dec 04 '20 at 00:09
  • Thanks, I understand what noreferrer does, but there are no examples of noreferrer without noopener, or noreferrer for links which open in the same tab, so just wanted to understand if it only makes sense for new tab links – gaurav5430 Dec 04 '20 at 04:49
  • @gaurav5430, no, "noreferrer" makes sense for all kinds of links (same tab or other tab), as far as I know. I also just tested it in this jsfiddle ( https://jsfiddle.net/vfe01Lqp/ ), clicking on the "noreferrer" link I don't see my referrer (on Firefox). – reed Dec 05 '20 at 02:10