当您使用 target="_blank"
属性链接到其他网站上的网页时,可能会使您的网站面临性能和安全问题:
- 另一个网页可能会与您的网页在同一进程上运行。 如果另一个网页运行了大量 JavaScript,网页的性能可能会受到影响。
- 另一个页面可以使用
window.opener
属性访问您的window
对象。这可能会导致其他网页将您的网页重定向到恶意网址。
向 target="_blank"
链接添加 rel="noopener"
或 rel="noreferrer"
可避免这些问题。
Lighthouse 跨源目标审核如何失败
Lighthouse 标记指向跨源目的地的不安全链接:
![显示指向跨源目的地的不安全链接的 Lighthouse 审核报告](https://developer.chrome.google.cn/static/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/image/lighthouse-audit-showing-b1f47b11d85bc.png?authuser=6&hl=sr)
Lighthouse 使用以下流程将链接识别为不安全的链接:
- 收集包含
target="_blank"
属性(但不包含rel="noopener"
或rel="noreferrer"
属性)的所有<a>
标记。 - 滤除任何同主机的链接。
由于 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”。
如需了解详情,请参阅安全地共享跨源资源这篇博文。