如何断开 JavaScript 弹出窗口与开启器的连接

Question

我从我的主页打开一个弹出窗口，代码如下：

<a href="http://external.domain.tld/"
   onclick="window.open(this.href, '_blank', 
       'width=512,height=512,left=200,top=100');return false">
 Open popup
</a>

这很好用，但我的问题是弹出窗口中加载的文档有权更改打开器窗口的位置。这甚至在弹出窗口中的文档来自不同域时也有效。它没有读取位置的权限，但可以更改位置。我不想要那个。我希望弹出窗口与我的主页完全断开。

即使没有 JavaScript，它也无法工作。当我使用target="_blank" 属性在新选项卡中打开另一个页面时，仍然允许此选项卡导航到opener 窗口并更改其位置：

<a href="http://external.domain.tld/" target="_blank">
  Open in new tab
</a>

这是打开的文档中不应该被允许的代码：

<script>
  opener.location.href = "http://badsite.tld/";
</script>

您可以观看现场演示 here。单击两个链接之一以在弹出窗口或新选项卡中打开另一个页面，然后在打开器窗口中加载第三个页面。这就是我想要阻止的。

我可以使用一些技巧来断开打开器窗口和打开的窗口之间的连接吗？理想情况下，打开的窗口根本不应该知道它是由任何其他窗口打开的。

Answer 1

来自文档：

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

查看所有支持的浏览器： https://caniuse.com/#search=noopener

此外，对于较旧的浏览器，请使用 no-referrer： https://mathiasbynens.github.io/rel-noopener/

所以解决方法是在使用target="_blank" 的任何地方执行rel="noreferrer noopener"

Answer 2

如果子窗口中的页面在你的控制之下，你可以将null赋给子页面中的opener：

window.opener = null;

通过将此作为您的 javascript 中的第一条语句。

如果页面不在您的控制范围内或在不同的域中，请在打开时执行：

popup = window.open(this.href, '_blank', 'width=512,height=512,left=200,top=100');
popup.opener = null;