对于在新标签页中打开的链接，始终使用“noopener”或“noreferrer”

为了在新选项卡中打开链接，我们使用该`target="_blank"`属性。但是，如果您不了解它们，它可能会导致一些问题。

首先，新打开的选项卡使用与打开器相同的过程。因此，它可能会减慢您的页面速度。更重要的是，新标签可以通过对象访问`window`开启页面的`window.opener`对象。假设新选项卡执行以下代码：

window.opener.location = 'http://fake.website.here';

正如代码所暗示的那样，它将原始标签重定向到虚假网站。如果假网站的用户界面与真实网站相同，会发生什么？由于用户已经打开它，他们可能没有意识到他们正在查看的网站不是真实的。

添加`rel="noopener"`修复问题。

很高兴知道有`rel="noreferrer"`属性。它不仅修复了`noopener`确实存在的问题，而且还阻止了`Referer`标题被发送到新选项卡。

<!-- Don't -->
<a target="_blank">...</a>

<!-- Do -->
<a target="_blank" rel="noopener">...</a>

<!-- Or -->
<a target="_blank" rel="noreferrer">...</a>
<a target="_blank" rel="noopener noreferrer">...</a>

某些现代浏览器（例如 Chrome 88+）会在`noopener`缺少该行为时自动添加该行为。但是，仍然建议添加`rel="noopener"`或`rel="noreferrer"`避免旧旧浏览器中的安全和性能问题。