Window.open with 'noopener' opens a new window instead of a new tab

Question

I was using window.open('') with '_blank' as second parameter to open my link in new tab For eg. window.open('http://google.com', '_blank')

But, recently I added the third parameter 'noopener' so that window.opener becomes null in the new tab and the new tab does not have access to the parent tab/window. i.e. window.opener is null

window.open('http://google.com', '_blank', 'noopener')

So the above code solved the security problem, but instead of opening a new tab, a new window started opening which is not what I expected. My browser settings were same and no changes were made to it.

Is there anything I can do to make this code open new tab instead of new window ? I do not want to remove noopener as third parameter

Possible duplicate of [Using rel="noopener" in window.open()](https://stackoverflow.com/questions/46147949/using-rel-noopener-in-window-open) — Stender, Mar 14 '18 at 11:31
I don't think this is a duplicate, the link @Stender posted is about not getting "noopener" to work, not about it changed the tab/window behavior. Does this happen in all browsers the same? It could be a browser bug/inconsistency. — mayacoda, Mar 14 '18 at 11:37
I suppose the correct syntax would be `noopener=1/true/yes`. It looks like all the other window features would be somehow connected to a window with a chrome, and `noopener` is the only one which actually is usefull also in tabs. Maybe that has been forgotten in browser implementations, and when the windowFeature argument is present, the window will be opened to a new window instead of a tab automatically. I made a small test with FF, and it opens a new window if the windowFeatures argument is present, the value of the argument doesn't matter, it can even be gibberish ... — Teemu, Mar 14 '18 at 11:52

keimjohn · Answer 1 · 2018-07-13T12:15:58.033

12

Another approach that will solve this in one line is to access the opener property directly and set it to null to make use of the fact that window.open() returns a Window object. This will work across all browsers to open a new tab with a null window.opener.

window.open(url, '_blank').opener = null;

edited Jul 13 '18 at 12:15

answered Jul 13 '18 at 11:29

keimjohn

139
1
5

Looks a bit hacky, but this is the only solution, I found, which works reliably in all modern browsers. – foxylion Sep 25 '18 at 15:34

score 8 · Accepted Answer · answered Mar 14 '18 at 11:31

8

Honestly i think your code is fine but you can try a different implementation:

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

answered Mar 14 '18 at 11:31

Ricardo Costa

704
6
27

1

Note that using yourWindow.target = "_self" does not seem to work as intended in Safari as of 3/31/2020. Use, var yourWindow = window.open("http://someurl.here", "_self"); yourWindow.opener = null; – Adam Gerard Mar 31 '20 at 21:32

Joe Warner · Answer 3 · 2019-10-09T16:58:44.890

5

https://mathiasbynens.github.io/rel-noopener/

const anchor = document.createElement('a');

Object.assign(anchor, {
  target: '_blank',
  href: 'http://google.com',
  rel: 'noopener noreferrer'
})
.click()

This is the method which feels a bit cleaner. It creates an anchor tag and clicks it, we have to use this workaround as its a user preference.

edited Oct 09 '19 at 16:58

answered Mar 14 '18 at 11:30

Joe Warner

3,335
1
14
41

score 5 · Answer 4 · answered May 29 '18 at 09:10

This is the only thing that works cross-browser (IE11, Chrome 66, FF 60, Safari 11.1) for me

function openURL(url) {
  var link = document.createElement('a');
  link.target = "_blank";
  link.href = url;
  link.rel = "noopener noreferrer";
  document.body.appendChild(link); // you need to add it to the DOM to get FF working
  link.click();
  link.parentNode.removeChild(link); // link.remove(); doesn't work on IE11
};

Window.open with 'noopener' opens a new window instead of a new tab

4 Answers4