Use rel noopener noreferrer for External Site Links

Security is one of the crucial aspects of any website or application. One of the ways to protect your site is to ensure all external links, when opened, should have no access to current document context.

Fortunately, the HTML rel attribute allows you to do that.

In this article, you'll learn about the HTML rel attribute and its recommended values (noopener and noreferrer) when used with the HTML anchor element <a>.

Furthermore, I have also shared a minimal JavaScript or TypeScript code that automatically adds rel=noopener noreferrer to all external website links.

Let's get started.

The HTML rel Attribute

According to MDN, the rel attribute defines the relationship between a linked resource and the current document.

It can only be used on the following HTML elements, and its supported values depend on the element it is used on.

• <a>
• <link>
• <form>
• <area>

The rel attribute accepts values the same way as the HTML class attribute, separated by a space.

About noopener

When used with either <a>, <area>, or <form> HTML element, the noopener value for the rel attribute instructs the browser to navigate to the target resource (external website) without granting access to the current browsing document (your website, for example).

It does so by setting null on the Window.opener property on the window of the external site.

This is especially useful when you're unsure about linking to external sites (in case they try to tamper with the originating site, your website or app, for example).

While it removes the value for the Window.opener (by setting it to null), it still returns the Referer HTTP header, unless you remove it with the noreferrer value as well (see below for more info).

Read more about the noopener keyword on MDN.

About noreferrer

When used with either <a>, <area>, or <form> HTML element, the noreferrer value for the rel attribute instructs the browser, when navigating to an external site link, to remove the Referer HTTP header and any information related to the referring website or origin.

Read more about the noreferrer keyword on MDN.

SEO Advantages of Using rel=noopener noreferrer

When search engine crawlers visit your website, they go through all the links, including external ones.

If the web crawlers visit and find any dangerous external links, such as those that try to hijack or tamper with the user's security, they will mark your website as not safe, and as a result prevent indexing of your website in search engine results page (SERPs), among other penalties.

Therefore, it is important to ensure that the external web content you link on your website is safe and not deceptive in any way.

And to ensure your website is not considered a referrer to such deceptive or unsafe web content, you should always add the rel=noopener noreferrer HTML attribute to all external site links.

Add noopener noreferrer to HTML Anchor Elements

You can add the noopener noreferrer tags or keywords as shown below.

<a href="https://twitter.com/w3things" rel="noopener noreferrer">Follow W3Things on Twitter</a>

Here, the anchor element, the <a> HTML tag, specifies an external link to X (formerly Twitter) social media platform.

To ensure that X never has any access to the current site or document (W3Things), we add the noopener and noreferrer values in the rel attribute.

This way, X doesn't get any information or receive the Referer HTTP header about the referring website, W3Things in this case.

Automatically Add rel noopener noreferrer to All External Links Using JavaScript

It's convenient and quick to manually add the noreferrer and noopener keywords if your website is small and/or has only a few external links.

However, for large websites with dozens of external links, it's recommended to automate this process using JavaScript or any other method.

Below, I have shared the TypeScript code that you can use to automatically add rel=noopener noreferrer to all external links on your website or web app.

export function addRelAttribute(): void {
  const links = document.querySelectorAll('a')

  links.forEach(link => {
    if (link.hostname !== location.hostname) {
      link.setAttribute('rel', 'noopener noreferrer')
    }
  })
}

First, we use the links variable to store references to all anchor links on the web page.

Next, with forEach method, we check if the domain address of the target anchor link is not the same as the domain of the web page (your website, for instance) by comparing the values of the hostname property of both the link and the Location interface (current website).

If the domains differ, we add the rel attribute and set its value to noopener noreferrer on the relevant links.

With this small snippet of JS code, you can easily automate the process of adding rel=noopener noreferrer to all external websites on your website.

Wrapping Up

That wraps up everything you need to know about the noreferrer and noopener keywords for the rel attribute.

If you find this article helpful, I'd appreciate you sharing it with others.

And if you haven't already, check out Essential Gulp Kit - a toolkit to speed up your front-end development and improve developer experience by automating repetitive and complex tasks.

Further Learning

You should also consider learning about how to open external links in a new tab using JavaScript by reading this article.

While the rel=noopener noreferrer attribute helps prevent attacks by unsafe and deceptive websites, the target="_blank" attribute helps improve your website SEO by keeping the users on your current site page by opening external links in a new window or tab.