target="_blank" can be insecure. Especially if you use these from within a web app.
Links that are opened using
target="_blank" can control the opener tab in some limited ways.
Yes, you read that right. Thank to the window.opener property, new windows have a reference to the window that opened them.
What's the big deal?
Imagine this scenario:
- I log in to my favorite web app.
- I click over to some section, and click a link to a 3rd party. The developers of the web app don't want me leaving their app, so they made it
- I close the 3rd party tab, and am back on my original (now "logged out") tab. Everything looks legit, so I log in again.
I just gave some hackers my login information.
If you want to see this in action, check out docs/index.html.
Wow. So how do I fix this?
The solution, it turns out, is pretty simple.
rel="noreferrer" to your links that use
target="_blank" (HTML spec)
Simple enough, so why does this library exist?
We're humans, and adding
rel="noreferrer" is easy to forget, let alone spell (is that one "r" or two?)
So, just add this script to the bottom of your page, like so:
<!-- stuff -->
You can install safe-target-blank in several ways:
Include the hosted JS directly on your page
Install via npm (or yarn), and require it (for use with Webpack or Browserify)npm install safe-targetyarn add safe-target
Install via Bowerbower install safe-target