Use window.open but block use of window.opener

A while back I ran across an interesting security hole

<a href="http://someurl.here" target="_blank">Link</a>

Looks innocuous enough, but there's a hole because, by default, the page that's being opened is allowing the opened page to call back into it via window.opener. There are some restrictions, being cross-domain, but there's still some mischief that can be done

window.opener.location = 'http://gotcha.badstuff';

Now, HTML has a workaround

<a href="http://someurl.here" target="_blank" rel="noopener noreferrer">Link</a>

That prevents the new window from having window.opener passed to it. That's fine and good for HTML, but what if you're using window.open?

<button type="button" onclick="window.open('http://someurl.here', '_blank');">
    Click Me
</button>

How would you block the use of window.opener being passed here?

Solution 1:

The window.open() call now supports the feature "noopener".
So calling window.open('https://www.your.url','_blank','noopener') should open the new window/tab with a null window.opener.

I'm having trouble finding a reliable list of supporting browsers (and versions) - MDN states here that

This is supported in modern browsers including Chrome, and Firefox 52+.

From my experimentation, I see it works for:

• Chrome 61
• FireFox 56
• Safari 11.1 (thanks Jiayi Hu for this)

But doesn't work for:

• IE 11.608
• Edge 40

(All tests on a PC running Windows 10...)

For backwards compatibility it may be better to combine this with t3__rry's answer.

Solution 2:

Use

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

Credit goes to Mathias Bynens: https://mathiasbynens.github.io/rel-noopener/

Solution 3:

According to the documentation (https://developer.mozilla.org/en/docs/Web/API/Window/open), in the following code

window.open('https://www.your.url','_blank','noopener')

The third argument contains the "WindowFeatures" (see https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_features) so it makes sense that it opens the target in a new window

Solution 4:

Pointing out that it's a comma separated list of features (no whitespaces), so you could set 'noopener,noreferrer,resizable' i.e.:

window.open('http://sensible.url', '_blank', 'noopener,noreferrer,resizable')

From Mozilla docs:

windowFeatures Optional

A DOMString containing a comma-separated list of window features given with their corresponding values in the form "name=value". [...]