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 thewindow.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:
- 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.
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.opener
property and ensures it runs in a separate process.rel="noreferrer"
has the same effect but also prevents theReferer
header from being sent to the new page. See Link type "noreferrer".
See the Share cross-origin resources safely post for more information.