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

当您使用 target="_blank" 属性链接到其他网站中的网页时， 可能会导致您的网站出现性能和安全问题：

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

正在添加 rel="noopener" 或 rel="noreferrer" 添加到 target="_blank" 链接可以避免这些问题。

Lighthouse 跨域目标页面审核如何失败

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

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

Lighthouse 使用以下过程将链接标识为不安全的链接：

  1. 收集包含 target="_blank" 属性的所有 <a> 标记 而不是 rel="noopener" 或 rel="noreferrer" 属性。
  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”。

请参阅安全地共享跨源资源 。

资源