当您使用 target="_blank" 属性链接到另一个网站上的页面时，您的网站可能会面临性能和安全问题：
- 另一个页面可能与您的页面在同一进程上运行。如果另一个页面运行大量 JavaScript，您的页面的性能可能会受到影响。
- 另一个页面可以使用
window.opener属性访问您的window对象。这可能允许其他页面将您的页面重定向到恶意 URL。
将 rel="noopener" 或 rel="noreferrer" 添加到您的 target="_blank" 链接避免这些问题。
从 Chromium 88 版开始，默认情况下，带有 target="_blank" 的锚点会自动获得 noopener 行为。rel="noopener" 的显式规范有助于保护旧版浏览器（包括 Edge Legacy 和 Internet Explorer）的用户。
Lighthouse 跨源目的地审计如何失败
Lighthouse 标记指向跨源目的地的不安全链接：
Lighthouse 使用以下过程将链接识别为不安全：
- 收集所有包含
target="_blank"属性但不包含rel="noopener"或rel="noreferrer"属性的<a>标签。 - 过滤掉任何同主机链接。
因为 Lighthouse 会过滤掉同主机链接，所以如果您在大型站点上工作，您应该注意一种边缘情况：如果一个页面包含指向您站点上另一个页面的 target="_blank" 链接，而未使用 rel="noopener"，此审计对性能的影响仍然适用。 但是，您不会在 Lighthouse 结果中看到这些链接。
Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.
如何提高站点性能并防止安全漏洞
将 rel="noopener" 或 rel="noreferrer" 添加到 Lighthouse 报告中标识的每个链接。通常，当您使用 target="_blank" 时，请始终添加 rel="noopener" 或 rel="noreferrer" ：
<a href="https://examplepetstore.com" target="_blank" rel="noopener">
Example Pet Store
</a>rel="noopener"阻止新页面访问window.opener属性，并确保它在单独的进程中运行。rel="noreferrer"具有相同的效果，但还会阻止将Referer标头发送到新页面。请参阅链接类型“noreferrer” 。
有关更多信息，请参阅安全地共享跨源资源帖文。
资源
Updated on • 改进文章