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

【问题标题】：Use window.open but block use of window.opener使用 window.open 但阻止使用 window.opener
【发布时间】：2017-03-28 09:05:31
【问题描述】：

不久前我遇到了一个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 的使用？

【问题讨论】：

【解决方案1】：

使用

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

【讨论】：

如链接文章所述，此方法可能会触发浏览器的弹窗拦截。我刚刚尝试了代码，确实，黄色条“Firefox 阻止此站点打开弹出窗口。”
Mod note：不要引入作为评论评论的编辑。
您仍然需要在 Safari 中执行此操作才能使上述内容正常工作：Note that the JavaScript-based work-around fails in Safari. For Safari support, inject a hidden iframe that opens the new tab, and then immediately remove the iframe.
适用于 Firefox，但不适用于打开弹出窗口但未加载网站的 Chrome 86。 Chrome 错误消息：Uncaught DOMException: Failed to set the 'href' property on 'Location': The current window does not have permission to navigate the target frame to 'https://google.com'. 反转最后两行有效，但不确定是否会影响安全性。

【解决方案2】：

window.open() 现在调用supports 功能“noopener”。
所以调用window.open('https://www.your.url','_blank','noopener') 应该打开带有空window.opener 的新窗口/标签。

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

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

根据我的实验，我发现它适用于：

但不适用于：

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

为了向后兼容，最好将它与t3__rry's answer结合起来。

【讨论】：

如果有人在其他浏览器/操作系统上对此进行了测试，请随时发表评论或提出修改建议 - 如果能更全面地了解对此功能的支持情况，那就太好了
等等，实际上它确实有效——但它不会在选项卡中打开它。它是一个没有框架的新窗口。很奇怪。在您的控制台中尝试一下。
@Chet 你在哪个版本的 Chrome 上看到了这种行为？
我使用的是版本 62.0.3202.94
@Chet 正如 Chrome 问题中提到的，你可以做 window.open(url,'_blank','toolbar=1,menubar=1,location=1,status=1,scrollbars=1 ,noopener') 作为一种解决方法，让它在选项卡中打开。 bugs.chromium.org/p/chromium/issues/detail?id=596068#c15

【解决方案3】：

这对我有用：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

windowFeatures 可选

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

【讨论】：

一个小问题 - 文档状态以 name=value 的形式使用。那么它不是'noopner = “吗？不确定这应该是对还是错。
@AshD 您可以在examples 中看到工具栏和 UI 部分是键值功能，status=yes, status=1, and status have identical results.，但 noopener 和 noreferrer 是功能性功能，因此它们存在或不存在t 存在，但没有额外的价值

【解决方案6】：

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

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

【讨论】：

这只对<a>元素有影响。我在 Chrome 99 中试过这个，当通过window.open(url, "_blank")打开窗口时，我仍然可以访问window.opener