使用window.open但阻止使用window.opener

Question

前段时间我跑过interesting security hole

<a href="http://someurl.here" target="_blank">Link</a>

看起来很无害，但是有一个漏洞，因为默认情况下，正在打开的页面允许打开的页面通过window.opener回调它。有一些限制，跨域，但仍然有一些可以做的恶作剧

window.opener.location = 'http://gotcha.badstuff';

现在，HTML有一个解决方法

<a href="http://someurl.here" target="_blank" rel="noopener noreferrer">Link</a>

这可以防止新窗口传递window.opener。这对HTML来说很好，但是如果你使用的是window.open怎么办？

<button type="button" onclick="window.open('http://someurl.here', '_blank');">
    Click Me
</button>

您如何阻止使用window.opener传递到这里？

Answer 1

window.open()现在调用supports功能＆＃34; noopener＆＃34;。
因此，调用window.open('https://www.your.url','_blank','noopener') 应打开带有空window.opener的新窗口/选项卡。

我无法找到支持浏览器（和版本）的可靠列表 - MDN声明here

  

现代浏览器支持此功能，包括Chrome和Firefox 52+。

从我的实验中，我发现它适用于：

• Chrome 61
• FireFox 56
• Safari 11.1（感谢Jiayi Hu）

但不适用于：

• IE 11.608
• Edge 40

（运行Windows 10的PC上的所有测试......）

为了向后兼容，最好将其与t3__rry's answer结合使用。

Answer 2

使用

var yourWindow = window.open();
yourWindow.opener = null;
yourWindow.location = "http://someurl.here";

归功于Mathias Bynens：https://mathiasbynens.github.io/rel-noopener/

Answer 3

这对我有用：

const a = document.createElement("a")
a.href = args.url
a.target = "_blank"
a.rel = "noopener"
a.click()

Answer 4

根据文档（https://developer.mozilla.org/en/docs/Web/API/Window/open），在以下代码中

window.open('https://www.your.url','_blank','noopener')

第三个参数包含“ WindowFeatures”（请参见https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_features），因此可以在新窗口中打开目标很有意义

Answer 5

指出它是一个逗号分隔的功能列表（没有空格），因此您可以设置 'noopener,noreferrer,resizable' 即：

window.open('http://sensible.url', '_blank', 'noopener,noreferrer,resizable')

来自Mozilla docs：

<块引用>

windowFeatures 可选

一个 DOMString 包含以“name=value”形式给出的以逗号分隔的窗口特征列表及其对应的值。 [...]

Answer 6

更新：target="_blank" 暗示 rel="noopener" 行为已在 #4078 中提出，并于 2019 年 1 月 31 日在 PR#4330 中修复

大多数现代浏览器都包含此更改，但大多数是最新版本。来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#browser_compatibility