HTML rel="noopener"

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.

Example

#

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 Google
Go to <a rel="noopener" target="_blank"
         href="https://google.com">Google</a>

Using rel="noopener"

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.


Syntax

<tagname target="_blank" rel="noopener" />

Note:  Either include target="_blank" or use window.open() to specify a new tab or window.


Elements that accept rel="noopener"

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.

Did you know?

Did you know?

Difference between 'noopener' and 'nofollow'

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.


Browser support

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

You may also like

Guides