0
点赞
收藏
分享

微信扫一扫

对于在新标签页中打开的链接,始终使用

为了在新选项卡中打开链接,我们使用 ​​target="_blank"​​ 属性。然而,如果你稍不留意,它可能会导致一些问题。

首先,新打开的选项卡使用与打开的选项卡相同的进程。因此,它会降低页面速度。更重要的是,新选项卡能够通过 ​​window.opener​​​ 对象访问 ​​opener​​​ 页面的 ​​window​​ 对象。假设新选项卡执行以下代码:

window.opener.location = 'https://example.com'

正如代码所暗示的,它将原始选项卡重定向到一个假网站。如果假网站的用户界面与真网站相同,会发生什么?由于用户已经打开了它,他们可能没有意识到他们正在查看的网站不是真实的。

添加 ​​rel="noopener"​​​ 修复了这些问题。它不仅修复了 ​​noopener​​​ 所做的问题,而且还阻止了 ​​Referer​​ 头被发送到新选项卡。

<!-- 不要这样做 -->
<a target="_blank">...</a>

<!-- 像这样 -->
<a target="_blank" rel="noopener">...</a>

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

一些现代浏览器,如 Chrome 88+,如果缺少 ​​noopener​​​ 行为,会自动添加它。但是,仍然建议手动添加 ​​rel="noopener"​​​ 或 ​​rel="noreferrer"​​,以避免旧浏览器中的安全性和性能问题。

举报

相关推荐

0 条评论