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
windowobject with thewindow.openerproperty. 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.
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 thetarget="_blank"attribute but not therel="noopener"orrel="noreferrer"attributes. - 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
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 thewindow.openerproperty and ensures it runs in a separate process.rel="noreferrer"has the same effect but also prevents theRefererheader 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