Tabnabbing is a phishing technique that changes browser tabs to steal personal information. Learn more about the principles of how tabnabbing works, how criminals use this method, and what security measures will help you avoid danger and save your personal data.
Sometimes when creating a website, you may need to open a link in a new tab. However, what you might not realize is that this can leave users vulnerable to malicious attacks like tabnabbing.
Although there is no complete protection, the risks can be reduced by using the noopener and noreferrer attributes. This is what will be discussed in this short guide.
Tabnabbing is a type of phishing attack that targets inactive tabs in your browser. While you are focused on the current tab, the link to the previous one may be broken and you will be redirected from the desired site to a malicious site that looks like the real one.
Because the malicious site looks very similar to the original, the user usually has no idea that the page they are on is not legitimate when they return to that tab. Because of this, the user enters their personal information without knowing that someone on the other side is waiting to steal it.
malicious ads
Third-party widgets included on the website that were later hacked
malicious user-generated content (such as forum posts) that contains unauthorized JavaScript
Imagine your favorite website automatically logging you out if you’ve been inactive for too long. At this point, the attacker can replace the real page with a fake one that looks almost identical.
When you return to that tab, you won’t notice the difference and will re-enter your details, giving the scammer access to your personal information.
Similar to phishing attacks, the goal here is to trick the user into entering sensitive data, such as a login or financial information, on a fake website.
This is exactly the situation you want to avoid for your site to keep your visitors safe. So now you’ll learn how to make your website more secure, starting with how to properly open new tabs.
To open a link in a new tab, write the link as you would in HTML, then simply add the target attribute, setting it to empty, e.g.: target="_blank"
<p>Learn to code for free at <a href ="https://www.freecodecamp.org/" target="_blank">freeCodeCamp.org!</a><p/>
It will look like this on the page.
Noopener
/Noreferrer
Unfortunately, the more tabs you have open (because who doesn’t multitask in the browser?), the greater the risk of falling victim to tabnabbing. The longer the tab remains inactive, the greater the chance that an attacker can replace the real page with a fake one.
How to prevent this? Just add rel=”noopener noreferrer” attributes to your links, that’s it:
<p>Learn to code for free at <a href ="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp.org!</a><p/>
noopener
і noreferrer
?The noopener attribute prevents attackers from accessing the previous tab or window from which the current page was opened. This is achieved by setting the Window.opener() property to null.
Adding the noreferrer attribute prevents transfer of referrer data, meaning external sites won’t know you’ve visited them through a link, and your traffic data remains private.
Now you have a better idea of what tabnabbing is and how to keep your links (and users) safe from it. We hope this information was useful.