Always use "noopener" or "noreferrer" for links opened in new tabs
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.
<a target="_blank" rel="noopener">...</a>
<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.