javascripthtmlsecuritybrowserwindow-object

Setting noopener for dynamic url


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 ?


Solution

  • 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.