Web Performance

The target=”_blank” vulnerability

When someone is writing articles for a website or a blog, they often want to link the article to an external website. It’s common practice to make the link open in a new tab so that the website visitor can easily get back to your tab and continue browsing around – consequently increase your Google Analytics metrics and visitor retention.

Opening links in new tabs are done by using the target="_blank" attribute in the anchor tags. This practice is now considered bad because it introduces a vulnerability to your website. It also introduces some performance issues on your page because the new external page may share the same browser process as your page.

<a href="" target="_blank">Bad way to to it</a>

Tabnapping and Reverse Tabnapping

Those are two terms we don’t see often, eh? It’s a portmanteau word from tab and kidnapping. It’s here that both the fun and the danger start.

Tabnapping is a phishing technique which takes advantage of a user’s inattention to which tabs are open in their browser. During a tabnapping attack, a malicious web page will change the way it looks while its tab is inactive. The new resulting page will usually try to get the user to enter their credentials to some popular service, like an email provider or a social network.

When a website uses target="_blank", they allow a different kind of vulnerability called Reverse Tabnapping.

If a website A links to another website B using a link target="_blank", website B will have some control on website A using the window.opener object. Website B could then run some code to redirect the legitimate Website A to some other phishing website. At this time the tab for Website A will not be active (since you’re on Website B) and you might not notice the contents have changed.

// Running on Website B
window.opener.location = '';

Detecting the Reverse Tabnapping Vulnerability

Only outbound links that contain the target="_blank" attribute are affected.

If you’re testing your page performance on Google’s Lighthouse, you will be be given a warning about this issue. You will only be given a warning if it’s an external link that is affected – Links to cross-origin destinations are unsafe.

Links to cross-origin destinations are unsafe

Protecting your website against Reverse Tabnapping

That’s the easiest thing to do. It is recommended to add either rel="noopener" or rel="noreferrer" to your anchor tag.

The difference between those two is that rel="noreferrer" doesn’t send the Referer header to the new page.

It indicates that no referrer information is to be leaked when following the link and also implies the noopener keyword behavior under the same conditions.
<a href="" target="_blank" rel="noopener">Good way to to it</a>

Once you’re done, check again on Lighthouse and the warning should no more be there!