# All about NOOPENER and NOREFERRER

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`](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`](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.