noopener, noreferrer, and nofollow - When to use them? How can these prevent Phishing Attacks?
Tags: webdev, security, seo, html
Published: 2020-08-19 04:00:26

Now and then, when you click on a link on a website, the link will be opened in a new tab, but the old tab will also be redirected to some other phishing website where it asks you to login or starts downloading some malware to your device. In this blog post, I will explain how something like this is achieved, and how to easily prevent this from happening in your own websites. 

We see values like `noopener`, `noreferrer` and `nofollow` attached to `rel` attribute of `anchor`(`<a>`) tags. We usually see these values along with `target=_blank`. Many of us do not know what each of the value means, and what happens when we set or do not set any of the values. In this blog post, I will explain what these values mean, and also explain what set of values to use for anchor tags in your website.

Before diving into the post, let's see what security implications will be there when you set `target="_blank"` on an anchor tag in your website.

```html
<a href="https://google.com" target="_blank">Google</a>
```

When you create a hyperlink in the above way on your website with no `rel` attribute, clicking on it will open google.com in a new tab. But there are some security risks in doing so. There is a property called `window.opener` which is set to the window of the opening tab, in this case, your website. 

Let's see more of what I mean here in detail below.

For example, let's say you have a link in @[Hashnode](@hashnode) with the target set to `_blank`, but no `rel` attribute, then `window.opener` property in the opened tab(new tab) is automatically set to the window of the opening tab(`Hashnode` tab). 

Phishing attacks are often carried out in this way. Since the new tab has now access to the window of the previous tab, the new tab can set the location of the old tab using `window.opener.location.href = 'link-of-some-fake-site-that-looks-almost-same-as-original-site'`, and a login page can be shown in that fake site saying "**You have been logged out, please reenter your login credentials to login**". Then if the user doesn't check that the domain name has changed and enters the login credentials, the attacker will now have access to the user's login details to **Hashnode** site. The fake site may also make you download malware on to your device. **See the code in below section if you do not yet understand properly of what I mean.**

This popular attack which a lot of websites are a victim to is called `Reverse Tabnabbing`.

So, what is the solution to this? The solution is very simple. You just have to set the `rel` attribute of your `anchor` tag to `noopener` whenever there is `target="_blank"` set. What this means is simple, when you click on the link, it opens the page in a new tab, and also `window.opener` value in the new tab is set to `null`. Now, the new link has no access to the tab that this new link is opened from.

Let's see in detail what each of the values mean and also see what values you should use in your website.

### noopener
When you set this value along with `target=_blank`, you are instructing the browser to open the link in a new tab, but do not give access to the page that opened it(`window.opener = null` in new tab).

I don't see any use-case where you would ever want to give access to the `window` of your website to some other external website. So it is always best to have `noopener` value in the `rel` attribute of your anchor tag, whenever you set the `target` to `_blank`.

```html
<!-- Link in your website without noopener -->
<a href="some-external-link" target="_blank">Some External Website</a>
```

```html
<!-- In External Site -->
<script>
// "window.opener" will be set to the "window" of your website. So the external website can do something like the following
window.opener.location.href = 'link-to-some-phising-website-that-looks-almost-same-as-your-own-website'
</script>
```

To prevent the above attack, you just have to add `rel=noopener` to your link.
```html
<a href="some-external-link" rel="noopener" target="_blank">Some External Website</a>
```

```html
<!-- In External Site -->
<script>
// "window.opener" will be set to the "null" in this case. So if the external website does something like the following
window.opener.location.href = 'link-to-some-phising-website-that-looks-almost-same-as-your-own-website'
// This throws TypeError since "window.opener" is "null"
</script>
```


### noreferrer
`noreferrer` is very much similar to its function as `nopener`. This also prevents the newly opened site to manipulate the window of the opening tab.(`window.opener` will be set to `null`). The extra thing that `noreferrer` will have in addition to `noopener` is that it will hide the referrer information when the link is clicked. For example, if you have a link to your website with `noreferrer` and `target="_blank"`, then when the user clicks on that link, they will be taken to your website, but your website will not have access to where the users coming from. Your analytics software like `Google Analytics` will consider these users as direct traffic and not as a referral. 

Based on this explanation, I hope you have a clear idea of what `noreferrer` means and when to use it and when not to use it. If you don't want to pass on any referrer information to the external links, then consider using `noreferrer` value, otherwise do not use it. 

You will often see the anchor tags with both `noopener noreferrer`. Since `noreferrer` also does what `noopener` is doing, why to have `noopener` along with `noreferrer`. This is mainly to support old browsers. Some of the old browsers do not support `noopener` value, so whenever you want to use `noopener`, you also see people using `noreferrer` value along with it.

```html
<!-- When you don't want to give access to the referrer information of the external website -->
<a href="some-external-link" rel="noopener noreferrer" target="_blank">Some External Website</a>
```

### nofollow
To have good SEO on your website, it is crucial to have backlinks to your website. All links are not equal in value. Some will be valued more than others. Search engines use something called `Page Ranking` algorithm to determine the value of a link or website. When you link another website from your website, you are endorsing that other page, so the value of other page will be increased in proportion to what value your website has. Similarly, the value of your website is determined by the backlinks that are pointed to your website, and again all the values of all the backlinks are not the same. I will talk more about Google's Page Ranking algorithm, and in detail in some other blog post. Let's just get back to what setting `rel=nofollow` value to your link means.

When you set `nofollow` to a link in your website, you are telling Google that you are not endorsing the link and also telling it not to pass the page rank value of your website to it. 

You will typically use `nofollow` when linking to internal pages or when you are linking to a less valuable site from your more valuable site.

Google recently introduced some other values like `rel=sponsored`, `rel=ugc` etc, which are out of scope for this blog post. 

```html
<!-- When you don't want to endorse external links -->
<a href="some-external-link" rel="nofollow" target="_blank">Some External Website</a>
```

**Note:**
> You can even set the three values to `rel` attribute.
```html
<a href="some-external-link" rel="noopener noreferrer nofollow" target="_blank">Some External 
```

### Conclusion
- You can(and probably should) use rel="noopener" on all links that have `target="_blank"`.
- rel="noreferrer" does the same thing as `noopener` especially in older browsers which do not support `noopener`. In addition to it, setting rel="noreferrer" will affect analytics of the external website.
- You should use rel="nofollow" when you don't want to endorse links on your websites. This affects the SEO of the external website.

> If you have any feedback or suggestions to improve this blog post, please leave them in the comments. I will try to improve the post accordingly. 

> If this blog post was helpful to you, please consider liking it and sharing it so that it reaches more people. 

> If you want to get notified via email as soon as I write a new blog post, you can click on **Subscribe** button at the top of my [blog page](https://blog.bhanuteja.dev). You can also follow me here at @[Bhanu Teja P](https://dev.to/pbteja1998) or on twitter at [@pbteja1998](https://twitter.com/pbteja1998) to get updated.


**Links and References:**
- [Reverse Tabnabbing Attack](https://owasp.org/www-community/attacks/Reverse_Tabnabbing)
- [HTML Spec](https://html.spec.whatwg.org/multipage/links.html#link-type-noreferrer)
- [Explained: noopener, noreferrer, and nofollow Values](https://pointjupiter.com/what-noopener-noreferrer-nofollow-explained/)

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/J3J72JK30)