A rel="noopener" attribute value on a link element specifies that the linked resource will not be able to access or tamper with the current page.
The link must open in a new tab or window.
A rel="noopener" on an <a> tag.
The linked page opens in a new browser tab where it cannot tamper with the current page.
Go to <a rel="noopener" target="_blank"
href="https://google.com">Google</a>
The rel attribute defines the relationship between the current page and the linked page or resource.
The rel="noopener" value tells the browser that the linked page cannot access the current page.
The link must be opened in a new tab or window with target="_blank" or window.open().
The noopener value is for untrusted links. It ensures that the linked resource will not tamper with the current page.
<tagname target="_blank" rel="noopener" />
Note: Either include target="_blank" or use window.open() to specify a new tab or window.
These elements accept the noopener value on the rel attribute.
| Elements | Description | |
|---|---|---|
| <a> | Specifies an anchor link -- see example above | |
| <area> | Creates clickable areas inside an image map. | |
| <form> | Specifies an HTML form. |
The noopener and nofollow values are easily mixed up, but are very different.
The noopener value increases website security by preventing cross-site hijacking.
The nofollow value merely specifies that the linked page is not supported or associated with the current page.
Search engines take nofollow into consideration when following links, but noopener links are always followed.
Here is when rel support started for each browser:
 Chrome
|
6.0 | Sep 2010 |
 Firefox
|
4.0 | Mar 2011 |
 IE/Edge
|
12.0 | Jul 2015 |
 Opera
|
11.1 | Mar 2011 |
 Safari
|
5.0 | Jun 2010 |
