Enhancing Web Security and Privacy with rel="noreferrer noopener"

Understanding rel="noreferrer noopener" and Its Importance in Web Development

When working with HTML links, you might have come across the "rel" attribute, which stands for "relationship." The "rel" attribute allows you to specify the relationship between the current document and the linked document. One particular value of the "rel" attribute that has gained importance in recent years is "noreferrer noopener." This attribute combination enhances web security and privacy by preventing certain vulnerabilities that could be exploited by malicious actors. In this article, we will delve into the details of rel="noreferrer noopener", its significance, and provide practical examples to illustrate its usage.

1. The Vulnerabilities

Before we delve into rel="noreferrer noopener," let's understand the vulnerabilities it addresses.

1. Referrer Leakage: When a user clicks on a link to navigate from one page to another, the browser sends a "referrer" header with the request. This header contains the URL of the page the user is coming from. While this is useful for analytics and tracking, it can also lead to security and privacy concerns. Malicious websites might exploit this information to track users or gather sensitive data from the URL.
2. Tabnapping: Tabnapping is a technique used by attackers to replace the content of a previously opened tab with malicious content. By leveraging the "window.opener" property, a malicious website could alter the content of a previously opened tab, tricking users into interacting with a seemingly legitimate page that has been replaced with harmful content.

2. Introducing rel="noreferrer noopener"

To address the vulnerabilities mentioned above, the "rel" attribute values "noreferrer" and "noopener" were introduced.

1. noreferrer: Adding "noreferrer" to the "rel" attribute prevents the browser from sending the "referrer" header when navigating to the linked page. This effectively stops the destination website from knowing the source URL.
2. noopener: Adding "noopener" to the "rel" attribute prevents the newly opened page from having access to the "window.opener" property, thus safeguarding against tabnapping attacks.

3. Using rel="noreferrer noopener"

Let's look at some practical examples of how to use rel="noreferrer noopener" in HTML links:

Example 1 - Basic Link:

<a href="https://www.example.com" target="_blank" rel="noreferrer noopener">Click here</a>

In this example, we have a standard HTML link that opens "https://www.example.com" in a new browser tab or window. By adding "noreferrer noopener" to the "rel" attribute, we ensure that the referrer information is not sent, and the newly opened page cannot access the parent window.

Example 2 - Using Other "rel" Values:

<a href="https://www.example.com" target="_blank" rel="nofollow noreferrer noopener">Click here</a>

In this case, we added "nofollow" to the "rel" attribute along with "noreferrer noopener." "nofollow" tells search engines not to follow the link for ranking purposes, and it is often used to combat spam. Combining "nofollow" with "noreferrer noopener" ensures both security and search engine-related benefits.

Example 3 - Combined with JavaScript:

<a href="https://www.example.com" onclick="window.open(this.href,'_blank','noopener,noreferrer'); return false;">Click here</a>

This example demonstrates the use of "noreferrer noopener" in a link that is opened via JavaScript. The "onclick" event triggers the "window.open" method with the specified attributes, ensuring that the link opens securely in a new tab or window.

4. Browser Support

It's important to note that while "noreferrer" and "noopener" are widely supported, "noopener" might not work in older versions of Internet Explorer. However, modern browsers and most users are likely to have updated versions that support these attributes.

Comparing rel="noreferrer noopener", rel="nofollow," and rel="dofollow"

HTML's "rel" attribute provides a way to specify the relationship between the current document and a linked document. Among the various values that can be assigned to "rel," three commonly used ones are "noreferrer noopener," "nofollow," and "dofollow." Let's compare these attributes based on their purposes and effects:

rel="noreferrer noopener":

Purpose: This attribute combination serves to enhance web security and privacy.

Effect:

1. "noreferrer": Prevents the browser from sending the "referrer" header when navigating to the linked page. This helps protect the source URL from being disclosed to the destination website.
2. "noopener": Prevents the newly opened page from having access to the "window.opener" property, guarding against tabnapping attacks where the content of a previously opened tab is altered with malicious content.
3. Use Cases: Recommended for external links, especially when opening them in a new tab or window to ensure a safer browsing experience.

rel="nofollow":

1. Purpose: The "nofollow" attribute is primarily used for search engine optimization (SEO) purposes.
2. Effect: When a link has the "nofollow" attribute, search engines do not follow that link for ranking purposes. It essentially tells search engines not to transfer any "link juice" or SEO value to the linked page.
3. Use Cases: Useful when you want to prevent search engines from associating your website's authority or reputation with the linked page. Commonly used for user-generated content like comments, forum posts, and sponsored links.

rel="dofollow":

1. Purpose: Unlike "nofollow," "dofollow" is not an official HTML attribute. It is used informally to indicate that a link should be followed by search engine crawlers and pass on "link juice."
2. Effect: By not specifying "nofollow," search engines will consider the link for ranking purposes and attribute SEO value to the linked page.
3. Use Cases: Generally, all links are considered "dofollow" by default unless explicitly marked as "nofollow." It is typically not used explicitly in the "rel" attribute.

Summary:

Use rel="noreferrer noopener" for external links to enhance security and privacy, preventing referrer leakage and tabnapping attacks.

Use rel="nofollow" when you want to tell search engines not to follow the link and pass on SEO value to the linked page, commonly used for user-generated content or sponsored links.

"dofollow" is not an official HTML attribute; all links are considered "dofollow" by default unless marked as "nofollow".

It's essential to use these attributes judiciously based on their intended purposes to ensure an optimal and secure user experience while also managing your website's SEO strategy effectively.

Conclusion

The "rel" attribute with the values "noreferrer noopener" provides an essential layer of security and privacy for your website and its visitors. By mitigating referrer leakage and protecting against tabnapping attacks, this attribute combination ensures a safer browsing experience. When creating external links in your HTML, consider using "rel="noreferrer noopener"" to enhance the security posture of your website and protect your users from potential threats.