Target=_blank implies rel=noopener
Target=_blank 意味着 rel=noopener
- Published at 发表于
- Updated at 更新于
- Reading time 阅读时间
- 2min 2分钟
这篇文章是我今天学习系列的一部分,我在其中分享了我所有的 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
. This means in short:
在过去,当您链接到一个网站并想要使用 target="_blank"
打开一个新选项卡时,目标网站可以通过 window
访问您的网站。简而言之,这意味着:
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
is accessible and if so change the location of your site with trivial JavaScript. This is also known as "reverse tab nabbing".
如果您还没有听说过这种行为,那么它非常疯狂,因为它意味着目标页面可以检查 window
是否可访问,如果可以访问,则使用简单的 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 兼容数据(来源)
![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
88 | 88 | 88 | 79 | 79 | 12.1 | 12.1 | 15.0 | Nope |
- Chromium shipped it end of 2020.
Chromium 于 2020 年底发布。 - Safari shipped it end of 2018.
Safari 于 2018 年底发货。 - Firefox shipped it mid 2020.
Firefox 于 2020 年中期发布。
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.
让我们看看这篇文章是否能帮助它消失。
这篇 TIL 帖子有帮助吗?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 3 days ago.
是的?凉爽的!您可能想查看《网络周刊》以获取更多快速学习信息。最后一版已于 3 天前发布。
Related Topics 相关话题
Related Articles 相关文章
- Reasons for opening links in a new tab
在新选项卡中打开链接的原因 - disabled vs aria-disabled on form elements
表单元素上的禁用与 aria-disabled - htmz — a 176 bytes htmx alternative
htmz — 176 字节 htmx 替代方案 - How to turn off password managers for fields
如何关闭字段的密码管理器 - How to exclude elements from being shown in Google Search results
如何排除 Google 搜索结果中显示的元素