) t"> ) t" />

What Is rel noopener noreferrer in HTML?

When opening external links in a new browser tab using target="_blank", web applications can expose users to security and privacy vulnerabilities. The HTML link attributes rel="noopener" and rel="noreferrer" are security directives added to anchor (<a>) tags to prevent malicious JavaScript execution from external pages and restrict referrer data sharing. This article explains how these attributes function, the specific attacks they prevent, and why they are essential for secure web development.

The Vulnerability Behind target="_blank"

When a link uses target="_blank" without security attributes, the newly opened webpage gains partial access to the originating page via the JavaScript window.opener object.

Because window.opener bridges the two tabs, malicious JavaScript on the destination site can execute:

window.opener.location = "https://phishing-site.example.com";

This vulnerability is known as reverse tabnabbing. In this attack, a user clicks a link to an external site, and while the user is viewing the new tab, the malicious site silently redirects the original tab in the background to a fake login page that mimics the original website. When the user returns to their original tab, they may not notice the URL change and inadvertently enter their credentials.

The rel="noopener" attribute instructs the browser to set window.opener to null in the new browsing context.

By severing the connection between the original page and the newly opened page: - The external page’s JavaScript cannot access, inspect, or modify the window.opener object. - The external page runs in a separate process (in multi-process browsers), preventing performance degradation on the source tab caused by heavy scripts running on the target page.

How rel="noreferrer" Works

The rel="noreferrer" attribute serves a dual purpose:

  1. Hides Referrer Information: It prevents the browser from sending the Referer HTTP request header to the destination server, keeping the source page’s exact URL private.
  2. Implicitly Sets Noopener: In most modern browsers, rel="noreferrer" automatically includes the behavior of rel="noopener", effectively setting window.opener to null as well.

To ensure compatibility across both modern and legacy browsers, external links should be structured as follows:

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

Modern Browser Defaults

Modern browsers (such as Chrome, Firefox, Safari, and Edge) now automatically apply rel="noopener" behavior by default to any link with target="_blank". However, explicitly defining rel="noopener noreferrer" remains a best practice to protect users on older browser versions and to clearly enforce privacy policies regarding referrer leakage.