为什么总是使用rel =“ noopener noreferrer”的链接在新选项卡中打开?

问题描述 投票:0回答:1

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

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

这可将target属性添加到链接:

<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"添加到链接中,我有什么办法可以保持原始行为。

html hyperlink href
1个回答
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 = ''; } )

(当然,请确保在文档加载后执行。)

© www.soinside.com 2019 - 2024. All rights reserved.