Why and How to Use rel=”noopener noreferrer”

When adding links to your website, security and performance should always be top priorities. The rel="noopener noreferrer" attribute combo is a simple yet powerful tool to improve both. If you’ve ever added a link with target="_blank", you’ve unintentionally exposed your site to potential vulnerabilities. Let’s explore why you should care and how to use these attributes effectively.

---

Why Use rel="noopener noreferrer"?

1. Security Risks of target="_blank"

When you use target="_blank" to open a link in a new tab, the newly opened page can access your original page’s window.opener object. This means the new page can:

• Redirect your page to a malicious website.
• Manipulate your page content.

Example of Vulnerability

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

If https://malicious-site.com is malicious, it can run this JavaScript:

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

Your visitors might not even realize they’ve been redirected.

2. Preventing Referrer Information Leak

Without noreferrer, the destination page will see your site’s URL in the Referer header. Sometimes, you might not want to expose this information for privacy reasons.

---

What Do noopener and noreferrer Do?

• noopener: Prevents the new page from accessing the window.opener object, eliminating the security vulnerability.
• noreferrer: Prevents the browser from sending the Referer header to the new page, enhancing privacy.

Using both ensures:

• Better security.
• Improved privacy.

---

How to Use rel="noopener noreferrer"

Basic Usage

When using target="_blank", always add rel="noopener noreferrer":

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>

This ensures:

• The new tab cannot manipulate your original page.
• No referral data is leaked.

If You Only Care About Security

If referral privacy isn’t a concern, you can just use:

<a href="https://example.com" target="_blank" rel="noopener">Visit Example</a>

In WordPress

If you’re using WordPress, most modern versions automatically add rel="noopener noreferrer" to external links opened in new tabs.

---

Testing the Implementation

After adding the attributes:

1. Open the link in a new tab.
2. Check the Referer header in the browser’s developer tools.
3. Try accessing window.opener from the new page.

Example JavaScript Test:

console.log(window.opener); // Should log 'null'

If window.opener returns null, you’re safe!

---

Common Misconceptions

• Does this affect SEO? No, using noopener noreferrer does not harm your SEO.
• Will this break tracking links? Some analytics tools rely on the Referer header. In those cases, avoid using noreferrer if referrer data is essential.

---

Conclusion

Using rel="noopener noreferrer" is a simple yet effective way to protect your website and your users from common vulnerabilities. While noopener focuses on preventing malicious manipulation, noreferrer ensures no referral data is leaked. Together, they form a best practice for any external link with target="_blank". Always prioritize security and privacy in your web development workflow.

Summary

• Use rel="noopener noreferrer" with target="_blank".
• noopener prevents window.opener access.
• noreferrer prevents referral data leaks.
• Test your implementation using developer tools.
• Be mindful of analytics tracking needs.

By consistently applying these attributes, you’ll make your website safer and more reliable for your users