by Craig Hafer on September 22, 2022

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.

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

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

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.

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.

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.