我们有一个网站与多个链接到一个网络应用程序。预期的行为是,在任何链接上的第一次单击都应该在一个新的选项卡中打开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"添加到链接中,我也能做些什么来保持原始行为吗?
发布于 2019-12-12 10:04:45
,但是为什么它会在一个新标签中打开呢?
似乎是这样规定的,https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types说:
注意,当使用
noopener时,_top、_self和_parent以外的非空目标名称在决定是否打开新窗口/选项卡时都被视为_blank。
我的猜测--应用程序本身指定了一个不同的选项卡名--可能有人担心某些不应该泄漏的信息仍然会泄漏--例如,如果一个不同的脚本先打开一个带有该名称的选项卡,但没有noopener --那么它可能有一个对该选项卡的引用,并且在用户打开一个显式设置了noopener的链接时,它仍然会使用该引用访问内容。
有什么我可以做的,以保持原来的行为,即使rel=“noreferrer”被添加到链接。
这可能会破坏这个特性最初应该提供的安全性。
但是,您可以尝试在加载文档之后让JS运行它,并让它从这些链接中删除rel属性。从其值中删除noopener部件。
当然,您不会得到这个功能所提供的任何“保护”,但是打开所有在同一个选项卡中的链接应该仍然有效。
编辑:将属性值设置为具有此特定target集的所有链接的空字符串的简单方法是
document.querySelectorAll('[target="webapp-tab"]').forEach(function(e) { e.rel = ''; } )(当然,请确保在加载了文档之后执行该操作。)
https://stackoverflow.com/questions/59301834
复制相似问题