Prevent phishing scams with noreferrer and noopener

In this article, we’ll look at two important HTML rel attributes that you may not be aware of: noopener and noreferrer. We’ll also look at why it’s important that they be included in every external link on your website. 

noopener

When we put an external link in our site, we often set the target to blank. It looks something like this:

<a href="https://example.com" target="_blank">normal link</a>

If a user clicked on this link, it would open in a new tab in the browser. But there’s a little problem with that new tab that you’re probably not aware of. This new tab, opened in a different domain, has access to the global object in Javascript called window.opener. So what’s the big deal? Well, this object lets you change the URL of the site where the link originated. Seriously!

This is a pretty big security risk for your users. Imagine a financial site that links to some external article. The user clicks on the link which opens a new tab, and then reads the article. In the meantime, a little bit of malicious code on the site with the article changes the URL of the tab with the financial site to a phishing site. When the user finishes the article, they close the tab and go back to the financial site. They see the session has expired and then enter their login details to the phishing site. Bad news!

But there is a solution for this particular problem—rel=”noopener”. What it does is quite simple—it stops the page that you’re linking to from accessing the opener object. It’s as simple as adding the rel=”noopener” into the tag, like so:

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

noreferrer

Another problem with external links is when we give away our referrer. This can be problematic if we’re linking from a security-sensitive system. On one hand, it’s true that security via concealment isn’t the best practice. But on the other, it doesn’t mean I have to make life easy for anybody that’s carrying out attacks. And besides, if there is a phishing script on the site then I don’t want to give them information about where the user came from. If I use rel=”noreferrer” then I’m preventing the site I link to from accessing the referrer. And all I need to do this is:

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

It’s easy in WordPress

Starting in WordPress version 4.7, every external link with target=”_blank”, norefferer and noopener are automatically added to the link. Just find any external link on any WordPress site, open the developer tool, and you’ll see that noopener and noreffere are there in the tag. So if you have a WordPress site, you’re good to go. But if you don’t, make sure to add norefferer and noopener to the rel of the tag and keep your users safe.

About the author: Ran Bar-Zik is an experienced web developer whose personal blog, Internet Israel, features articles and guides on Node.js, MongoDB, Git, SASS, jQuery, HTML 5, MySQL, and more. Translation of the original article by Aaron Raizen