I am trying to follow the advice from https://developers.google.com/web/tools/lighthouse/audits/noopener and https://mathiasbynens.github.io/rel-noopener/ and am trying to set the value for rel
to be noreferrer noopener
. The thing is that I cannot set the href
value as it is dynamic. I need to make a Api call to my internal endpoint to get the url. As such I wonder whether the following will still work
<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');
}
Is there still any value on setting rel
value ?
It doesn’t work: The noopener
attribute won’t have the expected effect in the case in the question—that is, for a window/tab that’s opened from a link without the href
attribute. Simple test:
<!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>
In Case 1 in that example, if you check the window.opener
of the new tab/window that gets opened, you’ll see it’s non-null. But check the new window/tab in Case 2, and you’ll see it’s null.
Is there still any value on setting
rel
value ?
No—for the case in the question, it seems there’s no value in setting noopener
, because it’s not going to prevent the new window/tab from access to the window
of the document that opened it.