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 can access your
windowobject with the
window.openerproperty. This may allow the other page to redirect your page to a malicious URL.
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:
- Gather all
<a>tags that contain the
target="_blank"attribute but not the
- 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 #
rel="noreferrer" to each link identified in your Lighthouse report. In general, when you use
target="_blank", always add
<a href="https://examplepetstore.com" target="_blank" rel="noopener">
Example Pet Store
rel="noopener"prevents the new page from being able to access the
window.openerproperty and ensures it runs in a separate process.
rel="noreferrer"has the same effect but also prevents the
Refererheader from being sent to the new page. See Link type "noreferrer".
See the Share cross-origin resources safely post for more information.