javascript - 在新标签页中访问网站时，网站如何重定向现有标签页

Question

我正在尝试打开来自 Course Report 的页面在新标签页中。通常我会这样做:

<a href="https://www.coursereport.com/schools/flatiron-school" target="_blank">https://www.coursereport.com/schools/flatiron-school</a>

然而，类(class)报告正在做一些奇怪的事情。如果我使用该链接，它:

• 短暂正确地打开标签页
• 标签页关闭
• 原始标签(我点击链接的地方)重定向到类(class)报告

我感兴趣

• 类(class)报告如何实现这一点(新选项卡可以对引用选项卡进行如此多的控制似乎很糟糕)
• 我可以做些什么来防止这种情况发生并获得默认行为。

我似乎无法在 stackoverflow 中直接重现，但这是一个 HackMD 文档，您可以在其中看到行为 https://hackmd.io/s/Hy1Ln7g8X

Answer 1

重现行为

• window.opener 返回对打开当前窗口的窗口的引用
• 可以用window.close()关闭当前窗口

因此您可以通过创建 2 个文件来重现该行为:

1.html

<a href="2.html" target="_blank">Go to second page</a>

2.html

<script>
window.opener.location="about:blank";
window.close();
</script>

从目标页面重写源标签可以作为reverse tabnabbing这可能很危险。

Reverse tabnabbing is an attack where a page linked from the target page is able to rewrite that page, for example to replace it with a phishing site. As the user was originally on the correct page they are less likely to notice that it has been changed to a phishing site, especially it the site looks the same as the target.

防止行为

正如 window.opener 的文档所说，您可以使用属性阻止这种行为，但这仅适用于某些浏览器(Firefox 52+、Chrome 49+ , Opera 36+, Safari 10.1+):

In some browsers, a rel="noopener" attribute on the originating anchor tag will prevent the window.opener reference from being set.

<a href="2.html" target="_blank" rel="noopener">Go to second page</a>

我还找到了this page关于 rel=noopener 也提到了针对旧浏览器的可能解决方案:

For older browsers, you could use rel=noreferrer which also disables the Referer HTTP header, or the following JavaScript work-around which potentially triggers the popup blocker:

var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = url;

您可以组合 rel 属性的值，例如 rel="noreferrer noopener"。