Menu
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
372
rel=noreferrer is same as rel=noopener. The only difference is that if you use rel=norefferer the owner of the destination page will never know that you are linking to his/her site. Because this attribute blocks the browser to transfer the HTTP referral header to the destination site.
Adding the nofollow attribute to a link that includes rel=”noopener noreferrer” allows you to link to other websites without appearing to approve their content or perspective.
rel=”noopener” is an HTML attribute that's added to all WordPress links that are selected to open in a new browser tab. It is also accompanied by a rel=”noreferrer” attribute. This feature was introduced in WordPress to address a security vulnerability which can be exploited by malicious websites.
The noopener keyword for the rel attribute of the <a> , <area> , and <form> elements instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it — by not setting the Window.
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" attribute has the same effect as the rel="noopener" attribute, and it will also prevent the referrer header from being sent to the new page.
Most modern browser support noopener, but when it is not supported, we can use noreferrer. In practical terms, it makes sense to use both of them to support older browsers. There is also no good reason to remove rel="noopener" since it doesn't seem to have any downside and it is something widely considered.
108
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 this ESLint thread.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
