Tabnabbing Attack 101

Backstory

Have you ever employed an anchor element <a> to create a hyperlink, be it an external or internal link, and found yourself desiring to make the link open in a new tab whenever a user clicks on it? If you use eslint or any other code syntax formatting plugin, you may have encountered a warning similar to the one shown in the image below.

It says "having an anchor element with target="_blank" behaviour prone to security risk in older web browsers if we dont include rel=noreferrer keyword. What security risk are we encountering here? In this short blog we will talk about a security attack called "Tabnabbing".

Tabnabbing in Nutshell (Theory)

Tabnabbing attacks take advantage of the common habit of keeping numerous tabs open, even though we often focus on just a few of them while leaving the rest unattended. When you navigate to a new webpage using an HTML anchor link that lacks the rel="noreferrer" attribute, a newly opened phishing tab can discreetly run malicious scripts aimed at the previously neglected tab. The potential consequences are quite severe; consider a scenario where the neglected tab is an e-commerce site. In this case, the phishing tab could execute a script that replaces the original e-commerce source code with a convincing authentication page. Unsuspecting users might then unwittingly re-enter their credentials, inadvertently providing the attacker with their login information.

flow

User clicks the malicious link on the your legitimate website, which opens malicious website in the new tab\
Malicious website (opened in the new tab) execute script that forces the previous website (Legitimate Website) to redirect to a Fake Website\
The Fake Website could look like a legitimate credentials page login, and prompts victim to enter authentication credentials\

Tabnabbing in Nutshell (Let's code this)

Let the code talk for itslef!

Below is an example written in plain HTML

Legitimate website code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Legitimate Website</title>
</head>
<body>
<a href=”somemalicioussite.com” target=”_blank”>Click me, I'm innocent</a>
</body>
</html>

Malicious website code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Malicious Website</title>
</head>
<body>
<script>
if (window.opener) {
    window.opener.location = "https://fakauth.com";
}
</script>
</body>
</html>

Window.opener???

The Window interface's opener property returns a reference to the window that opened the window, either with open(), or by navigating a link with a target attribute.

In other words, if window A opens window B, B.opener returns A.

See Official Web API Docs for more information.

Hence, in the malicious website script, the website check if there is a reference to a parent window, and if it's true, the site will run a code that change the url of the parent(previous) tab to a malicious one.

How It can be Harmful?

Just Imagine your site is an ecommerce site that store user privacy including credit cards number, etc. An attacker can set up a fake login page that closely resembles your e-commerce site's login page. When a user switches back to their seemingly legitimate e-commerce tab and sees the login prompt, they might enter their credentials, thinking it's a normal part of their session. The attacker then captures these credentials, gaining unauthorized access to the user's account.

Prevention

As per 2021, most modern web browser including chrome treate link as noreferrer by default. See this documentation link -> chromestatus

While simply adding rel="noreferrer" in your code would make sure the security in older web browser as well.

You can find me on

Twitter: https://twitter.com/mlven23
GitHub: https://github.com/melvnl
LinkedIn: https://github.com/melvnl

Note: If you have any questions, you can leave a message below by Sign In with your GitHub account 😉