Using rel="noopener" in window.open()

Question

So I know that I can apply rel="noopener in an a tag when using target="_blank". But I'm trying to pass it as an argument to window.open(), ie:

window.open('http://cats.com', '_blank', 'rel=noopener')

however it doesn't seem to be working the way that I expected, as the opener object still exists on the window after the user clicks on the link.

Is there something I'm missing? Or cannot it not be done the way that I'm intending?

I've found some great articles but they don't quite address my use case as far as I can tell.

https://developer.mozilla.org/en-US/docs/Web/API/Window/open https://mathiasbynens.github.io/rel-noopener/

Much appreciated.

The window feature flag string, as used in `window.open()`, is just `noopener` and not `rel=noopener`. The solution [suggested here](https://stackoverflow.com/a/47634819/656132) has the best backwards and cross-browser compatibility, however. — Daniel, Sep 30 '19 at 17:17

score 27 · Accepted Answer · answered Apr 19 '18 at 10:19

27

There is no direct example in doc but it can be used like this and it worked for me.

window.open('http://cats.com', '_blank', 'noopener,resizable,scrollbars')

answered Apr 19 '18 at 10:19

Nauman Rafique

385
4
8

2

It is available in the documentation here: https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_functionality_features as "Window functionality features" is part of the "Window features" is third argument of the window.open method. – Alexander Yamkov Jun 15 '20 at 09:15

score 12 · Answer 2 · answered Aug 28 '20 at 05:05

12

Cover all your bases

The safest way to redirect is by adding noopener, noreferrer, and window.opener = null.

const openInNewTab = (url) => {
    const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
    if (newWindow) newWindow.opener = null
}

Then call your new funtion

openInNewTab('https://stackoverflow.com')

The third param can also take these optional values, based on your needs.

answered Aug 28 '20 at 05:05

Gibolt

42,564
15
187
127

1

`noreferrer` implies `noopener`, so only the `noreferrer` is required to have them both active. "8. If noreferrer is true, then set noopener to true." from https://html.spec.whatwg.org/multipage/window-object.html#apis-for-creating-and-navigating-browsing-contexts-by-name – Xeos Sep 30 '20 at 02:34

score 5 · Answer 3 · answered Dec 04 '17 at 13:46

5

As far as I know, this cannot be achieved with window.open() arguments. There is, however, is a way to get the behavior:

var newWindow = window.open();
newWindow.opener = null;
newWindow.location = 'http://some.url';

answered Dec 04 '17 at 13:46

Cl Local

109
2
3

not working in the latest chrome Version 88.0.4324.190 (Official Build) (64-bit). rel = 'noreferrer' worked for me – JJ_Coder4Hire Mar 16 '21 at 20:04

score 5 · Answer 4 · edited Dec 05 '17 at 00:30

5

This worked for me:

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

edited Dec 05 '17 at 00:30

Paul Roub

36,322
27
84
93

answered Dec 05 '17 at 00:10

Chet

18,421
15
69
113

So simple. Thanks! – Bryantee Apr 12 '18 at 18:13
2

This does not answer the posters question and is not a good coding style as it creates a fake element instead of using a built in function. This should be the accepted answer: https://stackoverflow.com/a/49918599/7905854 – onewaveadrian Jul 26 '21 at 19:49

Using rel="noopener" in window.open()

4 Answers4

Cover all your bases

Linked