When you link to a page on another site using the target="_blank" attribute, you can expose your site to performance and security issues.
1. The other page may run on the same process as your page.
2. The other page can access your window object with the window.opener property.
This may allow the other page to redirect your page to a malicious URL.
Adding rel="noopener" or rel="noreferrer" to your target="_blank" links avoids these issues.
How to improve your site’s performance and prevent security vulnerabilities
Add rel="noopener" or rel="noreferrer" to each external link.
When you use target=”_blank”, always add rel=”noopener” or rel=”noreferrer”.
After doing that your link will look similar to this:
<a href="https://example.com" target="_blank" rel="noreferrer"> Example </a>
OR if you’ve used rel="noopener" then your link will look similar to this:
<a href="https://example.com" target="_blank" rel="noopener"> Example </a>
💡rel=”noopener” prevents the new page from being able to access the window.opener property and ensures it runs in a separate process.
💡rel=”noreferrer” has the same effect but also prevents the Referer header from being sent to the new page.
Credit: Web Dev