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