How to Fix _blank Target Vulnerability

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.

Contents

• The Fix
• Explanation
• Understanding the Risk
• Secure and Protect
• Related Resources

The Fix

Up front and center, here is the recommended best way to write secure, valid HTML _blank-target hyperlinks:

<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.

Explanation

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.

Otherwise, if there is even a remote possibility that, at some point in the future, the pages to which you link via target blank might possibly be taken over by a bad actor who then hosts some evil link-jacking JavaScript with the sole intent of fooling your visitors into revealing sensitive information when trying to log in, make a purchase, or via some other interactive UI trickery.

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 rel="external" instead.

Best protection (alternate strategy)

Instead of target="_blank", use 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:

$('a[rel="external"]').attr('target', '_blank');

FYI: Here are a couple of tutorials with more information about using JavaScript and jQuery to open external links in their own tabs.

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 noreferrer on blank-target links, like so:

<a href="https://example.com/" target="_blank" rel="noopener noreferrer">Example</a>

Then back that up with this bit of JavaScript:

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

Note: this JavaScript technique fails in older versions of Safari. For Safari support, inject a hidden <iframe> that opens the new tab, and then immediately remove the iframe. More about this here.

Related Resources

• WordPress and the Blank Target Vulnerability
• The Friendliest Link Targets in the Neighborhood
• Open External Links as Blank Targets via Unobtrusive JavaScript
• Targeting External Links Intelligently
• jQuery Open Links in New Tab

About the Author

Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.