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.
As of Chromium version 88, anchors with
target="_blank" automatically get
noopener behavior by default. Explicit specification of
rel="noopener" helps protect users of legacy browsers including Edge Legacy and Internet Explorer.
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.
Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.
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.