How rel="noopener noreferrer" Boosts Security (With Examples)

If you've ever worked with links that open in a new tab (target="_blank"), you might have seen the rel="noopener noreferrer" attribute. At first glance, it looks like just another piece of code, but it actually plays a big role in keeping your website secure.

 

 

 

 

In this blog post, we'll break down:

 

• What rel="noopener noreferrer does
• Why it's important for security
• A real-world example of how it protects you

 

Let's dive in!

 

What Is rel="noopener noreferrer"?

 

When you add target="_blank" to a link, it opens in a new tab. But without rel="noopener noreferrer", the new page can actually access the original page's window object through JavaScript.

 

In simple terms:

 

• A malicious site could change the original page's URL (phishing risk).
• It could steal sensitive data if the user is logged in.
• It could slow down performance by running scripts in the background.

 

Adding rel="noopener noreferrer" blocks this access, making your site safer.

 

Why Is This Important for Security?

 

1. Prevents "Tabnabbing" Attacks

 

A sneaky trick called tabnabbing happens when a malicious page (opened in a new tab) changes the original tab's content to a fake login page.

 

Example Scenario:

 

• You click a link on Site A (target="_blank" without noopener).
• The new tab (Site B) runs JavaScript to modify Site A's tab.
• When you go back to Site A, it now looks like a phishing site asking for your password.

 

Adding rel="noopener" stops Site B from controlling Site A's tab.

 

2. Blocks Unwanted Referrer Data

 

The noreferrer part hides where the traffic came from. This is useful if you don't want external sites to track your visitors.

 

Real-World Example: How noopener noreferrer Protects You

 

Let's say you run a blog with links to external resources.

 

Without rel="noopener noreferrer"

 

<a href="https://malicious-site.com" target="_blank">Click Me</a>

• When a user clicks this, the new tab can run:

window.opener.location = "https://fake-login-page.com";

• The original tab silently changes to a fake login page.

 

With rel="noopener noreferrer"

 

<a href="https://malicious-site.com" target="_blank" rel="noopener noreferrer">Safe Link</a>

• The new tab cannot control the original tab.
• The user stays safe from phishing.

 

When Should You Use rel="noopener noreferrer"?

 

Use it every time you have:

 

• ✅ External links (target="_blank")
• ✅ Links to untrusted sites
• ✅ Any situation where security is a concern

 

Bonus: Modern browsers now automatically apply noopener for target="_blank", but adding it manually ensures backward compatibility.

 

Final Thoughts

 

Adding rel="noopener noreferrer" is a small change with big security benefits. It:

 

• ✔ Stops malicious sites from hijacking your page
• ✔ Protects user data from phishing attacks
• ✔ Keeps your site's performance smooth

 

Next time you add target="_blank", don't forget this simple but powerful attribute!