The Hidden Danger of target="_blank" and How to Fix It

The use of target="_blank" in hyperlinks is a common practice among web developers to enhance user experience by opening external links in new tabs. However, this seemingly harmless feature introduces significant security vulnerabilities, including phishing risks, content manipulation, and unauthorized redirections.

This article provides an in-depth examination of these security concerns and presents an effective mitigation strategy through a minor yet crucial modification.

What Happens When You Use target="_blank"?

The page we’re linking to gains partial access to the source page via the window.opener object.

Let’s say you have a button that opens an external site:

<a href="https://offers.com" target="_blank">See Offers</a>

When users click this link, example.com opens in a new tab. But there's a hidden problem—this new page can control your original page using window.opener.

Potential Attack Scenarios

This vulnerability can be exploited in several ways:

1. Content Manipulation: The attacker can alter the content of the original page, displaying deceptive messages or modifying login forms.
2. Phishing Attacks: The malicious page may redirect users to fraudulent login interfaces to capture credentials.
3. Injection of Malicious Scripts: By executing JavaScript on the parent page, attackers can extract sensitive data or insert unauthorized advertisements.

Scary, right? Let’s see how it works in action.

Real-World Attack Scenario

Consider a financial services website (abcbank.com) that incorporates an external link to a financial news platform:

<a href="https://finance-news.com" target="_blank">Read Finance News</a>

Now, what if finance-news.com gets hacked? The hacker can add this simple JavaScript to modify your original page:

if (window.opener) {
    window.opener.document.body.innerHTML = "<h1>Your session has expired. Please log in again.</h1><input type='text' placeholder='Username'><input type='password' placeholder='Password'><button>Login</button>";
}

Attack Execution:

1. The user clicks the external link, opening finance-news.com in a new tab.
2. The malicious site injects deceptive content into the original page (abcbank.com).
3. Users unknowingly input their credentials into a fraudulent form.
4. Credential theft occurs, granting unauthorized access to user accounts.

How to Fix This? (One Small Change)

The good news? You can prevent this with a simple fix!

Always use rel="noopener noreferrer" when using target="_blank":

<a href="https://finance-news.com" target="_blank" rel="noopener noreferrer">Read Finance News</a>

How Does This Mitigation Work?

• noopener: Severs the connection between the new tab and the originating page, preventing access to window.opener.
• noreferrer: Conceals the referrer information, ensuring the destination site does not receive the original URL.

By implementing this modification, even if the external website is compromised, it will be unable to affect the security of the parent page.

Conclusion

A considerable number of websites unknowingly expose themselves to these security risks. By integrating rel="noopener noreferrer" into all external links that open in new tabs, developers can eliminate a significant attack vector with minimal effort.

This one-line fix can significantly enhances web security, mitigating risks associated with phishing and unauthorized content manipulation.

If you found this article informative, consider sharing it with fellow developers. 😃