CODEWITHSUNDEEP
htmlsecurity
Philipp Ryabchun
Philipp Ryabchun

Reputation: 866

Why people use `rel="noopener noreferrer"` instead of just `rel="noreferrer"`

I often see following pattern:

<a href="<external>" target="_blank" rel="noopener noreferrer"></a>

But as far as I see, noreferrer implies the effect of noopener. So why is noopener even needed here?

https://html.spec.whatwg.org/multipage/links.html#link-type-noreferrer

<a href="..." rel="noreferrer" target="_blank"> has the same behavior as <a href="..." rel="noreferrer noopener" target="_blank">.

Note that noreferrer browser support is strictly wider that one of noopener https://caniuse.com/#feat=rel-noreferrer https://caniuse.com/#feat=rel-noopener

Upvotes: 68

Views: 61632

Answers (3)

Henfs
Henfs

Reputation: 5411

Tag rel with "noopener" and "noreferrer" combined means that no referrer information should be passed to the website being linked to because of noreferrer tag and also prevents the newly opened page from controlling the page that delivered the traffic.

rel="noreferrer" prevent the referrer header from being sent to the new page. rel="noopener" prevent the browser from open the page on the same process as the other page, preventing the linking page to be spoofed by evil JavaScript on the destination page. Before rel="noopener" a link could change the entire webpage where you clicked on a link, and the change would have been managed by the destination page. Modern browser are by default, adding the rel="noopener" on every link. Iphone X did that 2017 which you could see for a while by, in Iphone, going to Settings > Safari > Advanced > Experimental Webkit Features"` and toggle that feature on and off. That option can not be done anymore, since it's default.

There is no good reason to remove rel="noopener" since it doesn't seem to have any downside. It adds a process for the new page, instead of running the pages on the same process. For modern browsers the attribute value is just indicating what the browsers are already doing.

Upvotes: 34

Safwat Fathi
Safwat Fathi

Reputation: 1013

This note might be an addition to the discussion:

Note: Setting target="_blank" on elements now implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener.

From MDN

Upvotes: 4

jabacchetta
jabacchetta

Reputation: 50308

Yes, noreferrer implies noopener, making the additional value redundant. And an old version of Firefox even requires that noopener be omitted when using noreferrer.

Using both probably became a habit after following outdated recommendations or lint rules.

See:

Upvotes: 16

Related Questions