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.

Use rel noopener noreferrer for External Site Links

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

Frequently Asked Questions about noopener and noreferrer

What is the use of noopener noreferrer?

The usage of noopener noreferrer keywords in the rel attribute allows you to safeguard your website from dangerous and deceptive third-party website attacks by preventing them from accessing the browsing context of current HTML document (your website) as well as removing the referrer information.

Read more about them in the article above.

Should I use rel=noopener?

Yes, you should use rel=noopener in addition to rel=noreferrer.

Learn why you should use both in the article above.

What is the difference between no follow and no referrer?

The noopener keyword sets the value of Window.opener property to null. This prevents external sites or documents from accessing the current or originating document browsing context.

On the other hand, the noreferrer keyword omits the Referer HTTP header of the current site when navigating to external websites.

Read about their difference and more in the post above.


    Danial Zahid's headshot.

    About Danial Zahid

    I'm a self-taught web developer passionate about everything related to websites and web development. Over the past years, I've explored and worked with different web technologies and tools, notably WordPress, Eleventy, npm, and Gulp.js, to name a few.

    In addition, I've created and currently maintain several open-source projects, including web apps, widgets, websites, and more.

    When I'm not writing content for W3Things or doing web development work, I enjoy my free time by playing games or listening to podcasts.

    Get Essential Gulp Kit

    The ultimate Gulp.js solution to improve your developer experience.

    • Includes complete Gulp.js toolkit setup
    • Optimize website content and static assets
    • Continuous asset optimization during development phase
    • Optimize unlimited number of files in bulk
    • Plus many more awesome features

    Subscribe to the Newsletter

    This website uses cookies to optimize your site experience. By continuing to use the site, you are agreeing to its privacy policy and the use of cookies.