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 thatrel="noopener"
enables, while also adding referer security on top of it. If that is true, why do all the examples in the wild specifyrel="noopener noreferrer"
and not justrel="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 forrel="noreferrer"
. I haven't seen any examples whererel="noreferrer"
is specified withouttarget="_blank"
. Wouldn't links that open in the same tab also leak the referrer information?