Noreferrer

What is Noreferrer?

Definition

Noreferrer is an HTML attribute used in hyperlinks (<a> tags) to enhance privacy and security when linking to external sites. When added to a link, the noreferrer attribute instructs the web browser not to send the HTTP Referer header to the new page. This header typically contains the URL of the current page, which could be used by the destination page for tracking, analytics, or malicious purposes. Additionally, noreferrer implicitly includes the behavior of the noopener attribute, preventing the newly opened page from accessing the originating page’s window object, thus improving security, especially in conjunction with target="_blank".

Types

There are no distinct “types” of noreferrer, but it is part of a broader category of link relation attributes (rel attribute values) that control the behavior and relationship between the current document and the linked document. These include:

  • noopener: Prevents the new page from being able to access the original page’s context, enhancing security.
  • nofollow: Instructs search engines not to follow the link, affecting the SEO of the linked page by not passing along link equity.

Examples

  • Basic Usage in HTML:
    <a href="http://example.com" target="_blank" rel="noreferrer">Visit Example</a>

    This creates a hyperlink that, when clicked, opens “http://example.com” in a new tab without sending the HTTP Referer header and without allowing the new page to access the originating page’s window object.

  • Combining with noopener: Although noreferrer implicitly includes noopener‘s functionality, combining them was more common before browsers universally supported the implicit inclusion:
    <a href="http://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>
  • Impact on Privacy and Security: Using noreferrer prevents the destination site from knowing where the traffic originated, which can be beneficial for user privacy. It also mitigates security risks associated with external links, similar to noopener.
  • Considerations for SEO and Analytics: While enhancing privacy and security, using noreferrer can affect analytics by preventing the destination site from identifying the source of the traffic. This might impact referral data in analytics platforms and the understanding of traffic sources.

Using noreferrer is a practical approach in web development for addressing privacy concerns and safeguarding both the site and its users from potential malicious activities through external links. It is especially crucial for sites that heavily rely on external links for content or references.