在新选项卡中访问站点时，站点如何重定向现有选项卡

Question

我正在尝试在新选项卡中打开课程报告中的页面。通常我会这样做：

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

然而，课程报告正在做一些奇怪的事情。如果我使用该链接，它：

• 正确短暂地打开选项卡
• 选项卡关闭
• 原始标签（我点击链接的地方）重定向到课程报告

我对感兴趣

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

我似乎无法直接在 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>

从目标页面重写源选项卡可用作反向选项卡，这可能很危险。

反向 tabnabbing 是一种攻击，其中从目标页面链接的页面能够重写该页面，例如用网络钓鱼站点替换它。由于用户最初位于正确的页面上，因此他们不太可能注意到该页面已更改为网络钓鱼站点，尤其是该站点看起来与目标站点相同时。

预防该行为

正如window.opener的文档所述，您可以使用属性来阻止此行为，但这仅适用于某些浏览器（Firefox 52+、Chrome 49+、Opera 36+、Safari 10.1+）：

在某些浏览器中，rel="noopener"原始锚标记上的属性将阻止设置 window.opener 引用。

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

我还发现这个页面也提到了针对rel=noopener旧浏览器的可能解决方案：

对于较旧的浏览器，您可以使用rel=noreferrer它也禁用 Referer HTTP 标头，或者使用以下可能触发弹出窗口阻止程序的 JavaScript 解决方法：

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

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