Published at
Updated at
Reading time
3min
This post is part of my Today I learned series in which I share all my web development learnings.

If you want to be a good web citizen, you might know about the target="_blank" security issue.

In the old days, when you linked to a site and wanted to open a new tab with target="_blank", the target site could access your site via window.opener. This means in short:

If window A opens window B, B.opener returns A.

Suppose you haven't heard of this behavior; it's pretty wild because it implies that target pages could check if window.opener is accessible and, if so, change the location of your site with trivial JavaScript. This process is also known as "reverse tab nabbing".

if (window.opener) {
  window.opener.location = 'https://you-re-hacked.com';
}

Ooooff... And while it's unlikely, someone could now use XSS to inject target="_blank" links into your site and, when someone clicks on them, change the URL of the original site (which is now in the background) to a malicious copy to fish credentials.

To prevent this, you could use rel="noopener".

<!-- old school way to turn off `window.opener` -->
<a href="some-site.com" target="_blank" rel="noopener">
  Some site
</a>

But guess what? Because this behavior seemed so off, browsers changed it. In 2024, whenever you use target="_blank" rel="noopener" is implicit. Yay!

<a href="some-site.com" target="_blank" rel="noopener">
  some site
</a>

<!-- is the same as -->

<a href="some-site.com" target="_blank">
  some site
</a>

But is this new stuff? Nope.

MDN Compat Data (source)
Browser support info for `target="_blank"` implies `rel="noopener"` behavior
chromechrome_androidedgefirefoxfirefox_androidsafarisafari_iossamsunginternet_androidwebview_android
888888797912.112.115.088

Yet, the internet is full of rel="noopener" advice, and it continues to live on.

But guess what? There's yet another approach to avoid cross-origin security attacks.

The Cross-Origin-Opener-Policy header

Ignoring that most browsers implicitly set rel="noopener", it's still cumbersome to slap the rel attribute on every link that opens a new tab or window to a site you don't control.

Shouldn't there be a single place to define that you don't want to share the window.opener context with other origins?

And there is โ€” the Cross-Origin-Opener-Policy (COOP)).

The HTTP Cross-Origin-Opener-Policy (COOP) response header allows you to ensure a top-level document does not share a browsing context group with cross-origin documents.

Set the HTTP header and forget about the window.opener problem entirely.

Cross-Origin-Opener-Policy: same-origin

COOP is pretty well supported these days (the MDN compat data seems incorrect at the time of writing).

MDN Compat Data (source)
Browser support info for Cross-Origin-Opener-Policy
chromechrome_androidedgefirefoxfirefox_androidsafarisafari_iossamsunginternet_androidwebview_android
838383797915.215.213.0Non

If you don't have access to your server infra, unfortunately, you can't set Cross-Origin-Opener-Policy via a meta element.

Conclusion

Where does this investigation lead me?

According to caniuse.com, implicit rel="noopener" has a global support of 94% at the time of writing, while the Cross-Origin-Opener Policy has a global support of 91%.

For me this browser support is good enough and I'll stop thinking about the window.opener problem. To be very sure I might add the Cross-Origin-Opener-Policy header to my sites because it's always good to be more secure.

Don't take my word for it, though; if ~95% overall browser support isn't enough for you, totally fine. There's nothing wrong with adding rel="noopener" to some links. Each their own. ๐Ÿ˜‰

If you enjoyed this article...

Join 5.5k readers and learn something new every week with Web Weekly.

Web Weekly โ€” Your friendly Web Dev newsletter
Reply to this post and share your thoughts via good old email.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles