A simple, crisp and concrete explanation for both of them.
Where do you see noopener
and noreferer
being used? In the rel
tag right. Let’s directly get to the point without any fluff.
noopener
<a href="
https://example.com
" target="_blank" rel="noopener">Open in new tab</a>
What does it do?
It is an anchor tag, basically it takes you to example.com by creating a new tab or a window. target
is set to _blank
which inherently directs to open the website on a new tab or window. Along with that we see rel
attribute set to noopener
. This value in the rel
attribute is primarily used for security reasons specifically to prevent a vulnerability called “tabnabbing”.
Now, what is Tabnabbing?
When you open a link with target=”_blank”
, the newly opened page can access the original window through window.opener
property. This can be exploited in what’s called tabnabbing attack.
In this kind of attack, the newly opened page in the new tab can access and potentially modify the original window. You might have seen some random click bait websites taking you to illicit websites. Most probably tabnabbing is in play over here which results into redirections without the user knowing it. This tricks the user into believing what’s real.
noreferrer
<a href="
https://example.com
" target="_blank" rel="noreferrer">Secure External Link</a>
One first needs to know what a referer
header. Well, it’s a header that contains the URL of the page from which the link was clicked. In a overarching view, it’s basically letting the sites’ owner know where actually the traffic is coming from.
Take an example:
You’re on site example.com
and you see a site called example.org
in it. On clicking the example.org
site, you’re taken to the new site and a referer header
is sent to the example.org
which has the URL of example.com
.
Noreferrer Protects Privacy
When you add rel="noreferrer"
, the browser does not send the Referer
header to the destination site, simple. You might not want the destination website to know which page your users were on when they clicked the link.
The downside is that analytics platforms are not able to gather the amount traffic data they gather.
Tip: Use both of them together in the rel
tag for better security and privacy.