Did you know that using the target=”_blank” for user-provided links is a security risk?
Anchor links or also known as <a></a> tag has an attribute called target, which controls what happens when the link is clicked. One of the values of target attribute is _blank, it tells the active browser to open a new tab when the link is clicked.
<a href=”https://medium.com/" target=”_blank”>Medium</a>
But did you know that malicious hackers uses target=”_blank” along with other code to trick their victims? They called it Tabnabbing, it is an old kind of phishing attack, which persuades users to submit their login details and passwords to popular websites by impersonating those sites and convincing the user that the site is genuine.
Try it Yourself(It's just a demo):
1. Main Page
- The main page has the ‘target’ attribute with “_blank” as its value, so when the user click the link, it will open the phishing_page in the new tab.
Most website applications neglect this kind of attack. But you just need to add rel=”noopener noreferrer”.
The value noopener prevent pages from abusing window.opener while noreferrer disables the Referer HTTP header.
So, if your web app accepts user-provided links then you should follow this syntax:
Read When to use target=”_blank” ? by Chris Coyier