这是用户在 2024-5-23 24:08 为 https://www.stefanjudis.com/today-i-learned/target-blank-implies-rel-noopener/ 保存的双语快照页面,由 沉浸式翻译 提供双语支持。了解如何保存?
Published at 发表于
Updated at 更新于
Reading time 阅读时间
2min 2分钟
This post is part of my Today I learned series in which I share all my web development learnings.
这篇文章是我今天学习系列的一部分,我在其中分享了我所有的 Web 开发知识。

If you want to be a good web citizen, you might be aware of the target="_blank" security issue.
如果您想成为一名优秀的网络公民,您可能会意识到 target="_blank" 安全问题。

In the old days, when you linked to a site and wanted to open a new tab with target="_blank", the target site could access your site via window.opener. This means in short:
在过去,当您链接到一个网站并想要使用 target="_blank" 打开一个新选项卡时,目标网站可以通过 window.opener 访问您的网站。简而言之,这意味着:

If window A opens window B, B.opener returns A.
如果窗口 A 打开窗口 B, B.opener 返回 A。

If you haven't heard of this behavior, it's pretty wild because it implies that target pages could check if window.opener is accessible and if so change the location of your site with trivial JavaScript. This is also known as "reverse tab nabbing".
如果您还没有听说过这种行为,那么它非常疯狂,因为它意味着目标页面可以检查 window.opener 是否可访问,如果可以访问,则使用简单的 JavaScript 更改站点的位置。这也称为“反向标签抓取”。

if (window.opener) {
  window.opener.location = 'https://you-re-hacked.com';
}

Ooooff... And while it's unlikely, someone could now use XSS to inject target="_blank" links into your site and, when someone clicks on them, change the URL of the original site (which is now in the background) to a malicious copy to fish credentials.
Ooooff...虽然不太可能,但现在有人可以使用 XSS 将 target="_blank" 链接注入您的网站,并且当有人点击它们时,将原始网站(现在位于后台)的 URL 更改为恶意副本钓鱼凭证。

To prevent this, you could use rel="noopener".
为了防止这种情况,您可以使用 rel="noopener"

<!-- old school way to turn off `window.opener` -->
<a href="some-site.com" target="_blank" rel="noopener">
  Some site
</a>

But guess what? Because this behavior seemed so off, browsers changed it. In 2024, whenever you use target="_blank" rel="noopener" is implicit. Yay!
但猜猜怎么了?因为这种行为看起来很不正常,所以浏览器改变了它。在 2024 年,每当您使用 target="_blank" 时, rel="noopener" 都是隐式的。耶!

<a href="some-site.com" target="_blank" rel="noopener">
  some site
</a>

<!-- is the same as -->

<a href="some-site.com" target="_blank">
  some site
</a>

But is this new stuff? Nope.
但这是新东西吗?没有。

MDN Compat Data (source)
MDN 兼容数据(来源)
Browser support info for target="_blank" implies rel="noopener" behavior
target="_blank" 的浏览器支持信息意味着 rel="noopener" 行为
chromechrome_androidedgefirefoxfirefox_androidsafarisafari_iossamsunginternet_androidwebview_android
888888797912.112.115.0Nope

Yet, the internet is full of rel="noopener" advice, so the legendary target="_blank" issue continues to live on.
然而,互联网上充斥着 rel="noopener" 建议,因此传奇的 target="_blank" 问题继续存在。

Let's see if this post will help make it disappear.
让我们看看这篇文章是否能帮助它消失。

Was this TIL post helpful?
这篇 TIL 帖子有帮助吗?

Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 3 days ago.
是的?凉爽的!您可能想查看《网络周刊》以获取更多快速学习信息。最后一版已于 3 天前发布。
Stefan standing in the park in front of a green background

About Stefan Judis 关于斯特凡·朱迪斯

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.
拥有十多年经验的前端书呆子、自由开发者、“今天我学到了”博主、会议发言人和开源维护者。

Related Topics 相关话题

Related Articles 相关文章