In order to open a link in a new tab, we use the
target="_blank" attribute. However, it can lead to some issues if you aren't aware of them.
First, the newly opened tab uses the same process with the opener one. Hence, it can slow down your page.
More importantly, the new tab is able to access the
window object of the opener page via the
window.opener object. Imagine that the new tab executes the following code:
window.opener.location = 'http://fake.website.here';
As the code implies, it redirects the original tab to a fake website. What happens if the fake website has the same UI as the real one? Since users already opened it, they may not realize that the website they are looking at isn't real.
rel="noopener" fixes the issues.
It's good to know that there is the
rel="noreferrer" attribute. It not only fixes the issues that
noopener does, but also prevents the
Referer header from being sent to the new tab.
<!-- Don't -->
<!-- Do -->
<a target="_blank" rel="noopener">...</a>
<!-- Or -->
<a target="_blank" rel="noreferrer">...</a>
<a target="_blank" rel="noopener noreferrer">...</a>
Some modern browsers, such as Chrome 88+, automatically adds the
noopener behavior if it's missing.
However, it's still recommended to add
rel="noreferrer" to avoid the security and performance issues in old legacy browsers.