In this article, I am reposting part of my recent tutorial, WordPress and the Blank Target Vulnerability. That post is aimed at WordPress specifically, however most of the article applies to HTML in general. So the tutorial below explains how to fix all “blank target” links, regardless of whether or not WordPress is involved.
Up front and center, here is the recommended best way to write secure, valid HTML
<a target="_blank" rel="noopener noreferrer" href="https://example.com/">Example</a>
So apply that golden formula and you’re good to go. Continue reading to learn all the theory and details about this technique.
noreferreris no longer necessary for the blank target fix. This is true only if you ignore Internet Explorer, Edge, older versions of Firefox, and various other browsers. At the time of this writing, IE and Edge together have nearly 8% market share. So eventually it will be safe to remove
noreferrer, but not yet.
I first heard about the “blank target” security vulnerability from Mathias Bynens and Ben Halpern. Basically the way it works is that browsers give the blank-target destination page full control over the window object of the source page. And that in turn opens the door to all sorts of hacks and exploits. Fortunately, there are ways to protect against such attacks, ad we’ll cover a bit later in the article. For now, an important thing to understand about this potential vulnerability, is this:
Blank target is an issue only for untrusted links.
Think of it this way. In order for the blank-target hack to work, the attacker must have control of the target page. For example, if I have a blank-target link pointing at Facebook, like this:
<a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer">Facebook</a>
For this blank-target link to be exploited, the attacker must have control of the Facebook homepage, in order to execute whatever malicious script. For another example, say we have a blank-target link pointing at a cool blog post located on some obscure, random website:
<a href="https://some-obscure-random-site.com/cool-thing/" target="_blank" rel="noopener noreferrer">Something cool</a>
As with the pervious example, in order for this blank-target link to be exploited, the attacker must have control of the page located at
https://some-obscure-random-site.com/cool-thing/. If the attacker does not have control of that web page, the blank-target link is totally safe.
Understanding the Risk
The main thing to understand is that, in order for blank-target links to be unsafe, the attacker needs control of the target page in order to execute their script. Otherwise there is no threat and the blank-target link is completely safe and secure. So it’s all about trust: do you 100% trust the pages that you’re linking to? If so, you have absolutely nothing to worry about.
YES that’s really what the blank-target hack is all about. Whether or not the pages that you link to via target-blank will ever be compromised by link-jacking bandits. Like if you link to big corporate sites, your blank-target links probably are pretty safe. But if you link to smaller sites that may be more likely to fall under the influence of bad actors, then there is a greater risk that some lowlife would actually attempt some link-jacking buffoonery.
Protect and Secure
If you recall from the previous discussion:
Blank target is an issue only for untrusted links.
The problem of course is that, web pages that are trusted today may fall prey to bad actors in the future. So even though there are specific cases and scenarios where external blank-target links always will be trusted, it is recommended to treat all blank-target links as unsafe.
So then how to protect and secure your external links? Here are some recommendations, organized by overall ease and effectiveness:
- Best protection (recommended)
- If possible, simply avoid using
target="_blank"on any links anywhere, ever. This is simple to implement and literally eliminates the vulnerability 100% done. And for any external links that absolutely must be opened in a new tab, use
- Best protection (alternate strategy)
- Instead of
rel="external"for external links. Using the rel-external attribute is better semantics than blank target. And if you need the external link to open in a new tab or window, you can add the following slice of jQuery:
- Average protection
- Add the
rel="noopener"attribute to any blank-target links. Like WordPress does with blank-target links inserted via the Insert Link tool. Using the rel-noopener attribute protects blank-target links in the latest versions of all major browsers. Unfortunately, support for rel-noopener only goes back so far. Older versions of Chrome, Firefox, Opera, Safari, IE (et al) do NOT support rel nopener, so extra support is required to secure blank-target links for older browser versions.
- Older browsers
- To cover older versions of browsers, include rel
noreferreron blank-target links, like so:
<a href="https://example.com/" target="_blank" rel="noopener noreferrer">Example</a>
var otherWindow = window.open(); otherWindow.opener = null; otherWindow.location = url;
<iframe>that opens the new tab, and then immediately remove the iframe. More about this here.
- WordPress and the Blank Target Vulnerability
- The Friendliest Link Targets in the Neighborhood
- Targeting External Links Intelligently
- jQuery Open Links in New Tab