When To Use “noopener” Or “noreferrer” And The Difference Between Them

In an anchor tag, we use the rel attribute to define the relationship between the current document and a linked resource. When opening the linked resource in a new tab or window (target=”_blank”), we use the rel attribute with the values noopener and/or noreferrer. So, why is this important and why would we choose one over the other… or both?

First, let’s take a closer look at what target=”_blank” does. Using the target attribute’s _blank value will open the linked resource in a new tab or window (depending on the user’s settings). It also gives the page you are linking to access to your page via the window.opener object. This makes your page vulnerable to phishing attacks. Think window.opener.location.replace(“http://letsgophishing.co")… Not great right?

So now the linked site has access to our window.opener object and can replace our page with a phishing page designed to fool the user into providing their login credentials used to access our site. We can’t have that, but what can we do to fix this vulnerability?

Well, we can get rid of the target=”_blank”. This would solve the problem, and I highly recommend this route.

Opening an external link in the same tab is the default behavior for a reason and should not be modified unless you have a better reason.

But, what if you do have a better reason? What if opening that link in a new tab is absolutely necessary, or you would just prefer it to open in a new tab

That’s where noopener and noreferrer come in.

The values noopener and noreferrer belong to the rel attribute, and they tell the browser NOT to set the window.open property when opening a link in a new tab/window.

Both noopener and noreferrer act in very much the same way, the only difference being that noreferrer also prevents the browser from sending the referring web-page's address.

This can make it appear that the linked page is receiving direct traffic rather than a referral.

To be clear, neither has an effect on SEO, but noreferrer can skew the numbers in analytics and tracking software by making it appear that there is more direct traffic.

So, which should you use? Well, I would personally use both and the reason is simple: compatibility.

Some older browsers may not support noopener so having noreferrer to fallback on keeps you covered.

Conclusion

Hopefully you now have a better understanding of why we use rel="noopener noreferrer".

Happy coding!

More content at plainenglish.io