为什么带有 rel="noopener noreferrer" 的链接总是在新标签页中打开？

Question

我们有一个网站，其中包含多个指向 Web 应用程序的链接。预期行为是第一次单击任何链接应在新选项卡中打开 Web 应用程序，任何后续单击应在同一新选项卡中打开 Web 应用程序。

我们这样做是因为我们的用户只希望同时打开一个网络应用实例。

这适用于将targetattribute 添加到链接：

<a https://example.com" target="webapp-tab">Link 1</a>
<a https://example.com" target="webapp-tab">Link 2</a>

但我们的 CMS 会自动将rel="noopener noreferrer" 添加到所有链接，因此链接将如下所示：

<a https://example.com" target="webapp-tab" rel="noopener noreferrer">Link 1</a>
<a https://example.com" target="webapp-tab" rel="noopener noreferrer">Link 2</a>

问题在于这会改变行为。现在，每次单击任何链接都会打开一个新选项卡。

行为改变是否有特定原因？据我了解，区别应该只是不会随请求发送推荐人和开启者信息，但为什么它会在新选项卡中打开？

即使rel="noopener noreferrer" 被添加到链接中，我还能做些什么来保持原始行为。

Answer 1

但为什么它会在新标签页中打开？

似乎是这样指定的，https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types 说：

请注意，当使用noopener 时，在决定是否打开新窗口/选项卡时，除_top、_self 和_parent 之外的非空目标名称都被视为_blank。

我的猜测-应用程序本身指定了不同的选项卡名称，可能会担心某些不应该泄漏的信息仍然会泄漏-例如，如果不同的脚本首先打开具有该名称的选项卡，但如果没有noopener - 那么它可能会引用该选项卡，并且稍后当用户打开明确设置了noopener 的链接时仍然使用该引用来访问内容。

即使将 rel="noopener noreferrer" 添加到链接中，我还能做些什么来保持原始行为。

这可能会破坏此功能最初应该提供的安全性。

您可以尝试在加载文档后让 JS 运行它，并让它从这些链接中删除 rel 属性，分别。从其值中删除 noopener 部分。

那么您当然不会获得此功能提供的任何“保护”，但在同一个选项卡中打开所有链接应该仍然有效。

---

编辑：为所有设置了此特定target 的链接将属性值设置为空字符串的简单方法是

document.querySelectorAll('[target="webapp-tab"]').forEach(function(e) { e.rel = ''; } )

（当然，请确保在文档加载后执行。）