target=”_blank” rel=”noopener noreferrer” 🤔

Halil Atilla

·

Follow

2 min read

·

Aug 9, 2023

--

2

Listen

Share

As web developers, we might prefer to open external links in a new tab to provide a better user experience. However, this approach can introduce certain security issues. That’s where “noopener noreferrer” comes into play!

1. Security (Tabnapping):

• If you’re linking to another site from your website using target="_blank" to open it in a new tab or window, this newly opened page can potentially access the linking page via the window.opener JavaScript API. This poses risks such as a malicious website altering the content of the original page without the user's knowledge. This type of attack is termed "tabnapping".
• noopener prevents this access, thus eliminating such potential security threats.
• noreferrer acts as an additional security layer. It means that the browser won't send the referrer information, so the target site won't know which site you came from. This can be beneficial in scenarios where user privacy or hiding the source URL is needed.

if (window.opener) {
  window.opener.location = '<https://malicious-website.com>';
}

2. Performance:

• Another advantage of using noopener relates to performance. Without it, the newly opened page continues to load the parent page's window object. This could negatively impact the performance of the new page.

Sample usage:

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

Summary

If you intend to open an external link in a new tab, it’s vital not just to use target="_blank", but also to include rel="noopener noreferrer". This ensures both your website and your users remain secure.