Links to cross-origin destinations are unsafe

When you link to a page on another site using the target="_blank" attribute, you can expose your site to performance and security issues:

• The other page may run on the same process as your page. If the other page is running a lot of JavaScript, your page's performance may suffer.
• 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 the Lighthouse cross-origin destination audit fails #

Lighthouse flags unsafe links to cross-origin destinations:

Lighthouse uses the following process to identify links as unsafe:

1. Gather all <a> tags that contain the target="_blank" attribute but not the rel="noopener" or rel="noreferrer" attributes.
2. Filter out any same-host links.

Because Lighthouse filters out same-host links, there's an edge case you should be aware of if you're working on a large site: if one page contains a target="_blank" link to another page on your site without using rel="noopener", the performance implications of this audit still apply. However, you won't see these links in your Lighthouse results.

How to improve your site's performance and prevent security vulnerabilities #

Add rel="noopener" or rel="noreferrer" to each link identified in your Lighthouse report. In general, when you use target="_blank", always add rel="noopener" or rel="noreferrer":

<a href="https://examplepetstore.com" target="_blank" rel="noopener">
  Example Pet Store
</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. See Link type "noreferrer".

See the Share cross-origin resources safely post for more information.

Resources #

• Source code for Links to cross-origin destinations are unsafe audit
• Share cross-origin resources safely
• Site isolation for web developers