CODEWITHSUNDEEP
htmlhyperlinkhref
Waruyama
Waruyama

Reputation: 3533

Why do links with rel="noopener noreferrer" always open in a new tab?

We have a website with multiple links to a web application. The intended behaviour is that the first click on any of the link should open the web application in a new tab, any subsequent click should open the web app in the same new tab.

We do this because our users only want one instance of the web app open at the same time.

This works with adding the targetattribute to the links:

<a https://example.com" target="webapp-tab">Link 1</a>
<a https://example.com" target="webapp-tab">Link 2</a>

But our CMS automatically adds rel="noopener noreferrer" to all links, so the links will look like this:

<a https://example.com" target="webapp-tab" rel="noopener noreferrer">Link 1</a>
<a https://example.com" target="webapp-tab" rel="noopener noreferrer">Link 2</a>

The problem is that this changes the behaviour. Each click on any of the links will now open a new tab.

Is there a specific reason why the behaviour changes? From what I understand the difference should only be that no referrer and opener information will be sent with the request, but why does it open in a new tab?

Is there anything I can do to keep the original behaviour even if rel="noopener noreferrer" is added to the links.

Upvotes: 0

Views: 6097

Answers (1)

04FS
04FS

Reputation: 5820

but why does it open in a new tab?

Seems to be specified that way, https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types says:

Note that when noopener is used, nonempty target names other than _top, _self, and _parent are all treated like _blank in terms of deciding whether to open a new window/tab.

My guess - with a different tab name specified by the application itself, there’s probably concerns that some sort of info that is not supposed to leak, could leak nonetheless - for example if a different script opened a tab with that name first, but without noopener - then it could have a reference to that tab, and still use that reference to access the contents later on, when the user opens a link that explicitly has noopener set.

Is there anything I can do to keep the original behaviour even if rel="noopener noreferrer" is added to the links.

That would likely undermine the security this feature is supposed to provide in the first place.

You can try and have a JS run over your document after it is loaded though, and have it remove the rel attribute from those links, resp. remove the noopener part from its value.

Then you would of course not get any of the “protection” this feature provides, but opening the links all in the same tab should still work.

Edit: A simple way to set the attribute value to an empty string for all links that have this particular target set, would be

document.querySelectorAll('[target="webapp-tab"]').forEach(function(e) { e.rel = ''; } )

(Make sure to execute that after the document has loaded, of course.)

Upvotes: 1

Related Questions