C C++ CMake CSS Cypress date-fns Django Django REST Framework ESLint Git GNU Make HTML htmx HTTP JavaScript MariaDB NumPy pandas PHP PostgreSQL Python PyTorch Qt SQLite Tailwind CSS

Understanding rel="noreferrer" in HTML: User Privacy and Link Behavior


Purpose

  • Enhances user privacy by not disclosing where a user came from.
  • Prevents the browser from sending the referring webpage's URL (referrer information) along with the link request to the target website.

Context

  • Used within the rel attribute of the following HTML elements:
    • <a> (anchor) for hyperlinks
    • <area> for image maps
    • <form> for forms (when target is set)

Behavior

  • The linked website won't know which page the user came from.
  • When a user clicks a link with rel="noreferrer", the browser omits the Referer header in the HTTP request to the linked page.

Example

<a href="https://example.com" rel="noreferrer">Visit Example.com</a>

In this example, clicking the link won't send the URL of the current page to https://example.com.

Use Cases

  • Preventing Unintended Referrer Leaks
    In some cases, you might want to avoid unintended referrer leaks, especially when dealing with sensitive data or actions.
  • Third-Party Forms
    For forms submitted to external websites (where target is set), using rel="noreferrer" helps prevent the linked website from knowing the source page.
  • External Links
    Commonly used for external links leading to websites outside your control. This prevents them from tracking where users originated from.
  • Consider using rel="noreferrer" judiciously, as it can limit some analytics tracking that relies on referrer information.
  • rel="noreferrer" is often used in conjunction with rel="noopener" or rel="noopener noreferrer", which prevents the linked page from opening in a new window or tab without user interaction (noopener behavior).

Linking to an External Website

<a href="https://example.com" rel="noreferrer">Visit Example.com (no referrer sent)</a>

This code creates a link to https://example.com. When clicked, the browser won't send the URL of the current page to example.com.

Linking to an External Website (Combined with target="_blank")

<a href="https://example.com" target="_blank" rel="noreferrer noopener">Open Example.com in New Tab (no referrer, no new window without user interaction)</a>

This code creates a link to https://example.com that opens in a new tab. Additionally, rel="noreferrer" prevents sending the referrer information, and rel="noopener" prevents the new tab from opening automatically (requires user interaction).

Submitting a Form to an External Website

<form action="https://example.com/submit" method="post" target="_blank" rel="noreferrer">
  <button type="submit">Submit (no referrer sent, opens in new tab)</button>
</form>

This code creates a form that submits data to https://example.com/submit in a new tab. Using rel="noreferrer" with target="_blank" prevents both the referrer information from being sent and the new tab from automatically opening (requires user interaction).

Using rel="noreferrer" with area Element (Image Map)

<img src="image.jpg" usemap="#imagemap" alt="Image Map">
<map name="imagemap">
  <area shape="rect" coords="100,50,200,100" href="https://example.com" rel="noreferrer">
</map>

This code creates an image map with a rectangular clickable area that links to https://example.com when clicked. The rel="noreferrer" attribute prevents the referrer information from being sent.


    • If you have control over the server of the target website, you might be able to configure it to ignore the referrer information altogether. This approach requires server-side modifications and is not directly related to HTML attributes.

  2. Limited Use Cases

    • If you only need to prevent referrer information from being sent to a specific website, you could potentially avoid linking to it directly. Consider providing a summary or description of the target site, allowing users to search for it manually. However, this is a user-experience trade-off compared to a direct link.

  3. Understanding Tracking

    • If your concern is primarily about user privacy and preventing tracking, it's important to understand that rel="noreferrer" only addresses referrer information in HTTP requests. Modern websites can still employ various tracking mechanisms like cookies, fingerprinting, and third-party scripts. You might need a more comprehensive privacy-focused approach that combines rel="noreferrer" with other strategies (e.g., blocking third-party cookies, using privacy-focused browsers).
ApproachDescription
rel="noreferrer" (Standard HTML)Prevents referrer information from being sent in the HTTP request.
Server-Side Configuration (if applicable)Configure the target website's server to ignore referrer information. (Requires server-side control)
Limited Use Cases (Avoid Direct Linking)Don't directly link to specific websites, potentially sacrificing user experience.
Comprehensive Privacy ApproachCombine rel="noreferrer" with other privacy-focused strategies (e.g., blocking third-party cookies or using extensions).