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="https://example.com" 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 = 'https://example.com/phishing.html';
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.
Protecting your website against Reverse Tabnapping
That’s the easiest thing to do. It is recommended to add either
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 thehttps://html.spec.whatwg.org/multipage/links.html#link-type-noreferrer
noopenerkeyword behavior under the same conditions.
<a href="https://example.com" 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!