Heading image for post: Using Target "_blank" Properly

Using Target "_blank" Properly

Profile picture of Craig Hafer

If you were like me, then when you want a link to open in a new tab you just add target="_blank" and call it a day.

<a href="https://hashrocket.com" target="_blank">Click me!</a>

Well I had accidentally typed target="blank" and it still opened in a new tab. This got me thinking—why? Why have I been adding in the extra _ all this time, if it was seemingly pointless?

As it turns out, _blank is actually a reserved keyword. This will open up in a new tab every single time.
Whereas blank will only open in a new tab once, and then every other time it will reopen in that same tab.

This happens because when you click the link, it checks to see if the target window already exists.
If it does exist, it will replace in that window/tab.
If it doesn’t exist, it will create a new tab with the name of that target.

Link using "_blank"
As you can see, this is opening in a new tab every time.

image

Link using "blank"
As you can see, this is opening in the same tab every time.

image

You can verify that the name of your target was passed on by typing window.name in the console

image

Is that all?

Great! We understand how _blank works, now can we call it a day?

Well, not quite. It's moments like these I am grateful to be working in an office setting. This was a great opportunity for somebody else in the office to teach me more about _blank, that I hadn't seen anywhere else.

Just adding target="_blank" is actually a pretty big security issue!
(Well, it used to be.)
When setting up links this way, the new browsing context now has access to the document that opened it.

Security Issue

Picture this situation:

friendly-website
has a link that goes to
secretly-evil-website
. Because it is external, they decide to open the link in a tab/window by using _blank. Well now, when this link is clicked,
secretly-evil-website
has access to
friendly-website
, through Window.opener, regardless of the origin.
Because the user's attention is now on
secretly-evil-website
, they're probably not paying attention to the fact that
secretly-evil-website
just redirected
friendly-website
to
fake-friendly-website
's login screen. The user could try and login, thus giving away their credentials.

So obviously we see the security issue. But what's the fix? Just stop using _blank?

The fix is to add rel="noopener" to your anchor tag, which prevents Window.opener from being set making it return null.

<a href="https://hashrocket.com" target="_blank" rel="noopener">Click me!</a>

However in the last year or so modern browsers have taken care of this by implicitly treating all _blank anchor tags as also having rel="noopener".

So, this isn't necessarily an issue anymore, but depending on your user's web browser version, you might want to pass in rel="noopener". Regardless, seeing how many other people were also unaware of this issue, I felt it was important to share it.

Conclusion

So, now, I do believe we can call it a day. Your users are probably safe with you using _blank without rel="noopener". If you want to ensure their safety, you can always add it in. There is definitely some debate about when to use _blank, or if you should even use it all. Chris Coyier has an article giving his opinion on when you should and shouldn't use it.

If you want to learn more about the security issue that isn't as big an issue anymore, Mathias Bynens has a great post demonstrating it.


Photo by: Remy Gieling
H/T to Dillon for making me aware of this security issue.

More posts about web