# Using target="_blank" the right way ✅

---

Recently Working on my side project, I came across and curious fact of `target='_blank'` attribute used in `</a>`

##### What actually happens while you open a link in new window by specifying `target='_blank'` ?

* The page we're linking to gains limited access to the linking page via the `window.opener` object.
    
* The newly opened page can now change the window.opener.location to some phishing page. In this case, Users trust the page that is already opened, and in this case they won't get suspicious.
    

##### Lets try and undertsand it in depth 🔒

Create a fake "phishing" page with adorable cat pictures, which everyone likes ❤️, get it shared on Facebook (which will open a link via \_blank).

Create a "phishing" website at [https://phishingwebsite/facebook.com/service.html](https://phishingwebsite/facebook.com/service.html) and put the below code on your "phishing" page.

```html

window.opener.location = 'https://phishingwebsite/facebook.com/service.html';
```

which will redirect the Facebook tab to your phishing page created by the attacker, asking the user to re-enter their Facebook password, the user is not on Facebook anymore but this fake Facebook-lookalike web page. This fake page looks exactly like Facebook and it asks to login because you were signed out for some reason. The user without even thinking, enters the details.

#### What just happend??

You've just sent your private credentials to someone who can now login in your Facebook account and do anything, like quickly changing the credentials, posting random post.

#### Lets see how we can fix this 🔑

Add rel attribute with `noopener` value to the `<a>`

```html

<a href= '/share' rel="noopener" target="_blank"/>
```

Some old browsers for example (IE11) do not support `"noopener"` so add `noreferrer` as a value to rel

```html
<a href= '/share' rel="noopener noreferrer" target="_blank"/>
```

###### Browsers support to `rel=noopener`

![](https://i.ibb.co/4mf5kLg/Screenshot-2020-05-27-at-19-47-26.png align="left")

To conclude my post, `rel="noopener noreferrer"` should be added to links containing `target="_blank"` as a precaution against reverse tabnabbing.This ensures window.opener is null in both Chrome and Firefox. In Safari Technology Preview 68, `target="_blank"` on anchors implies `rel="noopener"` by default.

Thank you for reading my thoughts on this issue. Subscribe to my newsletter for more of this.