Add noopener to Link Tags I

Fix a security vulnerability with target="_blank"

MODX Forums user apathy asked for a way to automatically add rel="noopener" to link code in MODX. In this short series of articles, we'll look at several ways to do this. In this one, we'll discuss the problem and how to fix it. In the following articles, we'll look at some ways to automate the fix.

MODX logo

The Issue

There's a potential security vulnerability when you have links on your site that include target="_blank". Such links are useful if you want your links to open in a new browser tab or window instead of replacing the current one. Without target="_blank", the user has to click on the "Back" button to return to the previous page. With it, both pages will be available in different tabs or windows.

On my site, for example, I might be discussing a MODX topic. Halfway through the article, I might have several links to other relevant pages at my site or to pages at the MODX documentation site. The user would probably like to continue reading my page, but have the other pages available for reference. The user could accomplish the same thing by right-clicking on the links and telling the browser to open them in a new tab or window, but it's a lot less convenient than just clicking on them.

If you search the web for "target=_blank," you'll see some strong opinions on whether you should ever use target="_blank". I consider it a convenience for users in certain situations, but not everyone agrees.

The problem is that using target="_blank" by itself opens up a security hole. There's a description of the vulnerability here (though their demo doesn't seem to work). There's another explanation here with a very nice demo showing the problem. To be honest, the vulnerabilty only exists if your link is to an untrusted page, but if the site you're linking to gets hacked, preventing the issue would be well worth it. Luckily, the fix is relatively easy.

The Solution

The fix is to add a rel attribute to the link code. You will see suggestions to add this: rel="noopener", but that won't fix the problem for some browsers, especially older browser versions. A better method is to use this: rel="noopener noreferrer". Here's an example:

<a href="" target="_blank" rel="noopener noreferrer">Link Text</a>

What if I Have a Lot of Links to Fix?

It would be pretty tedious to go through your whole site, find, and fix all the link code, especially if your site is large and has a lot of links. You'd probably miss some and mistype the correction on others. In this series of articles, we'll look at several methods for fixing the problem automatically. In the following articles, we'll look at some different ways to automate the correction. The various techniques we'll discuss can be used in a number of other situations.

Coming Up

In the following article, we'll see how to fix this problem with a plugin attached to OnWebPagePrerender.

Looking for high-quality, MODX-friendly hosting? As of May 2016, Bob's Guides is hosted at A2 hosting. (More information in the box below.)

Comments (0)

Please login to comment.