How does a site redirect existing tab when visiting it in a new tab

Question

I am trying to open a page from Course Report in a new tab. Usually I would do this as follows:

<a href="https://www.coursereport.com/schools/flatiron-school" target="_blank">https://www.coursereport.com/schools/flatiron-school</a>

However course report is doing something strange. If I use that link, it:

• Briefly opens the tab correctly
• The tab closes
• The original tab (where I clicked the link) redirects to course report

I am interested in

• How course report achieves this (it seems bad that a new tab can have that much control over the referring tab)
• What I can do to prevent this and get the default behaviour instead.

I can't seem to reproduce directly in stackoverflow but here is a HackMD document where you can see the behaviour https://hackmd.io/s/Hy1Ln7g8X

Answer 1

Reproducing the behaviour

• window.opener returns a reference to the window that opened this current window
• the current window can be closed with window.close()

So you can reproduce the behaviour by creating 2 files:

1.html

<a href="2.html" target="_blank">Go to second page</a>

2.html

<script>
window.opener.location="about:blank";
window.close();
</script>

Rewriting the source tab from the target page can be used as reverse tabnabbing and it can be dangerous.

Reverse tabnabbing is an attack where a page linked from the target page is able to rewrite that page, for example to replace it with a phishing site. As the user was originally on the correct page they are less likely to notice that it has been changed to a phishing site, especially it the site looks the same as the target.

Preventing the behaviour

As window.opener's documentation says, you can prevent this behaviour with an attribute, but this works only in some browsers (Firefox 52+, Chrome 49+, Opera 36+, Safari 10.1+):

In some browsers, a rel="noopener" attribute on the originating anchor tag will prevent the window.opener reference from being set.

<a href="2.html" target="_blank" rel="noopener">Go to second page</a>

I found also this page about rel=noopener which mentions possible solutions for older browsers too:

For older browsers, you could use rel=noreferrer which also disables the Referer HTTP header, or the following JavaScript work-around which potentially triggers the popup blocker:

var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = url;

You can combine values for the rel attribute like rel="noreferrer noopener".