为动态 url 设置 noopener答案

【问题标题】：Setting noopener for dynamic url为动态 url 设置 noopener
【发布时间】：2018-02-07 13:29:48
【问题描述】：

我正在尝试遵循 https://developers.google.com/web/tools/lighthouse/audits/noopener 和 https://mathiasbynens.github.io/rel-noopener/ 的建议，并尝试将 rel 的值设置为 noreferrer noopener。问题是我无法设置 href 值，因为它是动态的。我需要对我的内部端点进行 Api 调用以获取 url。因此，我想知道以下是否仍然有效

   <a ng-click="getUrl()" rel="noreferrer noopener">
                            <i class="action icon view"></i>
   </a>

   var getUrl = function() {
         // call some endpoint, on success
         $window.open(url, '_blank');
   }

设置rel值还有什么价值吗？

【问题讨论】：

标签： javascript html security browser window-object

【解决方案1】：

它不起作用：noopener 属性在问题的情况下不会产生预期的效果——也就是说，对于从没有href 属性的链接打开的窗口/选项卡。简单测试：

<!doctype html>
<title>simple noopener test</title>

<a onclick = "getUrl()"
rel = "noreferrer noopener">Case 1: click here to open a new tab that <b>will</b>
have access to the window object of this document (despite the'noopener')</a>

<p>
<a href="http://example.com"
rel = "noreferrer noopener">Case 2: click here to open a new tab that <b>will not</b>
have access to the window object of this document (because of the'noopener'</a>

<script>
var getUrl = function() {
  window.open("http://example.com", '_blank');
}
</script>

在该示例中的情况 1 中，如果您检查打开的新选项卡/窗口的 window.opener，您会看到它是非空的。但是检查案例 2 中的新窗口/选项卡，您会看到它为空。

设置rel值还有什么价值吗？

否 - 对于问题中的情况，设置 noopener 似乎没有任何价值，因为它不会阻止新窗口/选项卡访问打开它的文档的 window。

【讨论】：

谢谢。使用window.open 中返回的window 对象然后执行window.opener = null 怎么样？
是的解决方法，请参阅mathiasbynens.github.io/rel-noopener/#recommendations：您需要这样做：var otherWindow = window.open(); otherWindow.opener = null; otherWindow.location = url;。