What is the rel='noopener' attribute in HTML5 links?

Use rel="noopener" to solve the security and performance problems caused by target="_blank". 1. It prevents new pages from manipulating the original page through window.opener to prevent redirection or phishing attacks; 2. Improve performance, make the new page run independently, and prevents the shared rendering process from slowing down the original page; 3. rel="noreferrer" includes the noopener function and additionally prevents the Referer header from sending, enhancing privacy, but affecting source statistics; 4. All modern browsers support noopener. The best practice is to always add rel="noopener" as long as you use target="_blank". If you need privacy protection, use rel="noreferrer".

The rel="noopener" attribute is used in HTML5 <a></a> (anchor) tags when opening a link in a new tab or window, typically with target="_blank" . It is a security and performance feature that prevents the new page from gaining control over the original (opener) window.

Here's how it works and why it matters:

What Problem Does rel="noopener" Solve?

When you use target="_blank" to open a link in a new tab, the new page runs in the same process as the original page and has access to the window.opener object. This means the new page can, in theory, manipulate the original page using JavaScript — for example, changing window.opener.location to redirect it or even perform phishing attacks.

Even if the linked site is trustworthy, using rel="noopener" is a safe practice because it eliminates this risk.

How to Use It

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

With rel="noopener" , the new tab cannot access the window.opener property, so it can't navigate or read anything from the original page.

Performance Benefits

In addition to security, rel="noopener" can improve performance. Without it, both pages share the same rendering process in some browsers. Using noopener ensures the new page runs independently, so the original page isn't slowed down by the new tab's JavaScript.

What About rel="noreferrer" ?

rel="noreferrer" is similar but stronger:

• It implies noopener (so opener access is blocked).
• It also prevents the Referer header from being sent to the new page.

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

Use noreferrer if you also want to hide the source of the traffic, but note that the linked site won't know where the visit came from (affects analytics).

Browser Support and Best Practice

• All modern browsers support rel="noopener" .
• Even if you don't control the linked site, always use rel="noopener" with target="_blank" .

So, the recommended pattern is:

 <a href="https://external-site.com" target="_blank" rel="noopener">
  External Link
</a>

Basically, just think:

• Use target="_blank" ? → Always pair it with rel="noopener" .
• Want extra privacy? → Use rel="noreferrer" instead (including noopener).

It's a small change that improves both security and performance.

The above is the detailed content of What is the rel='noopener' attribute in HTML5 links?. For more information, please follow other related articles on the PHP Chinese website!