HTML referrerpolicy Attribute

Posted in HTML Tutorial

Updated on Nov 19, 2024

By Mari Selvan

👁️ 59 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The referrerpolicy attribute in HTML is a powerful feature that allows developers to control the amount of referrer information sent when a user navigates to a new page.

This attribute can be applied to anchor (<a>) tags, image (<img>) tags, and other elements that trigger navigation. It plays a crucial role in enhancing privacy and security by limiting the referrer data shared with external sites.

🎯 Purpose of referrerpolicy

The primary purpose of the referrerpolicy attribute is to provide fine-grained control over the referrer information sent with HTTP requests. By specifying a referrer policy, you can determine how much of the originating URL should be included in the referrer header, thereby protecting user privacy and managing how your site's information is shared.

💎 Values

The referrerpolicy attribute supports several values, each dictating different levels of referrer information sharing. Here are the main values:

no-referrer: No referrer information is sent.
no-referrer-when-downgrade: The default behavior. Referrer information is sent for same-origin requests and secure-to-secure cross-origin requests. It is not sent for secure-to-insecure cross-origin requests.
origin: Only the origin (scheme, host, and port) of the document is sent as the referrer.
origin-when-cross-origin: Sends the full URL as the referrer for same-origin requests and only the origin for cross-origin requests.
same-origin: Referrer information is sent only for same-origin requests. No referrer information is sent for cross-origin requests.
strict-origin: Only the origin is sent as the referrer for both same-origin and secure cross-origin requests. No referrer is sent for insecure cross-origin requests.
strict-origin-when-cross-origin: Sends the full URL for same-origin requests, only the origin for secure cross-origin requests, and no referrer for insecure cross-origin requests.
unsafe-url: The full URL is always sent as the referrer, even with insecure requests. This can leak sensitive information and is generally not recommended.

📄 Implementation Example:

Let's look at a simple example of how to use the referrerpolicy attribute in an HTML document:

index.html

Copied

<a href="https://example.com" referrerpolicy="no-referrer">Visit Example</a>
<img src="https://example.com/image.jpg" referrerpolicy="origin" alt="Example Image">

🧠 How it Works

In this example, the anchor tag is set with referrerpolicy="no-referrer", meaning no referrer information will be sent when the link is clicked. The image tag is set with referrerpolicy="origin", so only the origin of the page will be sent as the referrer when the image is requested.

🔄 Dynamic Values with JavaScript

You can also dynamically set the referrerpolicy attribute using JavaScript. This can be useful when you want to change the referrer policy based on certain conditions or user interactions. Here's a brief example:

index.html

Copied

<script>
  // Dynamically set referrerpolicy for a link
  document.getElementById("dynamicLink").referrerPolicy = "strict-origin";
</script>

<a id="dynamicLink" href="https://example.com">Dynamic Referrer Policy Link</a>

🧠 How it Works

In this script, the referrerpolicy attribute is set to "strict-origin" for an anchor tag with the id "dynamicLink." This allows you to control the referrer policy programmatically.

🏆 Best Practices

Use the referrerpolicy attribute to enhance privacy and security, especially when linking to external sites or including external resources.
Be mindful of the potential impact on analytics and referrer-based features when restricting referrer information.
Test the behavior of the referrerpolicy attribute across different browsers to ensure consistent functionality.