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.