HTML referrerpolicy Attribute

The HTML referrerpolicy attribute controls how much referrer information the browser sends when following a hyperlink or requesting a resource. It can be used to limit or prevent information about the referring page from being included with the request.

Elements That Use the referrerpolicy Attribute

The referrerpolicy attribute is used with the <a>, <area>, <iframe>, <img>, <link>, and <script> elements.

Element	Description
`<a>`	Controls the referrer policy used when following a hyperlink.
`<area>`	Controls the referrer policy used when following an image map hyperlink.
`<iframe>`	Controls the referrer policy used when fetching the embedded document.
`<img>`	Controls the referrer policy used when fetching the image.
`<link>`	Controls the referrer policy used when fetching and processing a linked resource.
`<script>`	Controls the referrer policy used when fetching an external script and scripts it imports.

referrerpolicy Values

The referrerpolicy attribute accepts several keywords that determine how much referrer information is sent with a request.

Value	Description
`no-referrer`	Does not send referrer information with the request.
`no-referrer-when-downgrade`	Sends referrer information when the security level remains the same or improves, but not when navigating from HTTPS to HTTP.
`origin`	Sends only the origin, such as the scheme, host, and port.
`origin-when-cross-origin`	Sends the full referrer for same-origin requests and only the origin for cross-origin requests.
`same-origin`	Sends referrer information for same-origin requests but not for cross-origin requests.
`strict-origin`	Sends only the origin when the destination has the same or a higher security level and sends no referrer when moving from HTTPS to HTTP.
`strict-origin-when-cross-origin`	Sends the full referrer for same-origin requests, sends only the origin for secure cross-origin requests, and sends no referrer when moving from HTTPS to HTTP.
`unsafe-url`	Sends the origin, path, and query string for same-origin and cross-origin requests, but does not include the URL fragment, username, or password.

How referrerpolicy Works

When a browser follows a link or requests a resource, it may send a Referer HTTP header that identifies the page from which the request originated. The referrerpolicy attribute controls how much of that information is included for the request initiated by the element.

<a href="https://www.example.com/" referrerpolicy="no-referrer">
  Visit Example
</a>

In this example, the browser follows the hyperlink without sending referrer information to the destination.

If an element does not specify its own referrerpolicy, the request can use a referrer policy inherited from a broader context, such as the document's policy. Modern browsers use strict-origin-when-cross-origin as the default policy when no other policy is specified.

Using referrerpolicy with Links

The referrerpolicy attribute can control the referrer information sent when users follow hyperlinks created with <a> and <area> elements.

<a href="https://www.example.com/" referrerpolicy="origin">
  Visit Example
</a>

With referrerpolicy="origin", the destination receives only the origin of the referring page rather than its complete URL.

Using referrerpolicy with Resources

The attribute can also control referrer information when browsers request images, embedded documents, linked resources, and external scripts.

<img src="photo.jpg" alt="Mountain landscape" referrerpolicy="no-referrer">

<iframe src="example.html" referrerpolicy="same-origin"></iframe>

<script src="example.js" referrerpolicy="origin"></script>

Each element can use a policy appropriate for the request it initiates.

Privacy Considerations

Referrer information can reveal information about the page a user was viewing before a request was made. Depending on the policy, this can include the referring site's origin or more of the page URL.

Policies such as no-referrer, same-origin, and strict-origin can reduce the amount of information shared with other sites. The unsafe-url value sends more information and should be used carefully because paths and query strings can be exposed to cross-origin destinations.

Common Mistakes

Do not confuse referrerpolicy with the rel="noreferrer" value. Both can affect referrer information for hyperlinks, but they are separate HTML features.

Do not assume that no-referrer-when-downgrade is the modern browser default. The current default when no other policy applies is strict-origin-when-cross-origin.

Do not use unsafe-url without considering the information that could be revealed to another origin. It can send URL paths and query strings as part of the referrer.

Do not misspell the HTTP header as Referrer. The standardized HTTP header name is historically spelled Referer, while the HTML attribute is correctly spelled referrerpolicy.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The referrerpolicy attribute is widely supported on applicable HTML elements in current core browsers. Support for individual elements and policy values was introduced at different times, so compatibility with older browser versions can vary.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the referrerpolicy Attribute

The example uses referrerpolicy="no-referrer" on a hyperlink. When the link is followed, the browser is instructed not to send referrer information to the destination.

Play in Editor

Summary

The HTML referrerpolicy attribute controls how much referrer information is sent when an applicable HTML element initiates a navigation or resource request. Its values range from no-referrer, which sends no referrer information, to unsafe-url, which can send the origin, path, and query string. Choosing an appropriate policy can help limit unnecessary information sharing.