指向跨源目的地的链接不安全

当您使用 target="_blank" 属性链接到其他网站上的网页时,可能会使您的网站面临性能和安全问题:

  • 另一个网页可能会与您的网页在同一进程上运行。 如果另一个网页运行了大量 JavaScript,网页的性能可能会受到影响。
  • 另一个页面可以使用 window.opener 属性访问您的 window 对象。这可能会导致其他网页将您的网页重定向到恶意网址。

target="_blank" 链接添加 rel="noopener"rel="noreferrer" 可避免这些问题。

Lighthouse 跨源目标审核如何失败

Lighthouse 标记指向跨源目的地的不安全链接:

显示指向跨源目的地的不安全链接的 Lighthouse 审核报告

Lighthouse 使用以下流程将链接识别为不安全的链接:

  1. 收集包含 target="_blank" 属性(但不包含 rel="noopener"rel="noreferrer" 属性)的所有 <a> 标记。
  2. 滤除任何同主机的链接。

由于 Lighthouse 会过滤掉同一主机的链接,因此如果您在处理大型网站时需要注意一种极端情况:如果某个网页包含指向您网站上另一个网页的 target="_blank" 链接,而未使用 rel="noopener",则此项评估对性能的影响仍然适用。不过,您在 Lighthouse 结果中不会看到这些链接。

如何提高网站性能并防范安全漏洞

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”

如需了解详情,请参阅安全地共享跨源资源这篇博文。

资源