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
: Althoughnoreferrer
implicitly includesnoopener
‘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 tonoopener
. - 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.