HTML referrerpolicy Attribute

Introduction

The referrerpolicy attribute controls how much referrer information the browser sends in the Referer HTTP header when a user clicks a link or loads a subresource (image, iframe, script). It helps protect privacy — for example, hiding query strings with tokens from third-party sites. Apply it on <a>, <img>, <iframe>, <link>, and related elements. Values include no-referrer, origin, and strict-origin-when-cross-origin (the modern default). Set element.referrerPolicy in JavaScript. Use <meta name="referrer"> for a document-wide default.

What You’ll Learn

Purpose of referrerpolicy Attribute

When your page links to another site or loads an external image, the browser may send the current page URL in the Referer header. That URL can contain sensitive path segments, search queries, or session tokens. The referrerpolicy attribute lets you limit what is shared — from sending nothing at all to sending only the origin (scheme + host + port).

This is important for external links, embedded widgets, CDN images, and privacy-conscious applications. It complements (but does not replace) HTTPS and Content Security Policy.

📝 Syntax

Add referrerpolicy with a policy keyword on elements that make requests:

<!-- Link — send no referrer -->
<a href="https://example.com" referrerpolicy="no-referrer">Visit Example</a>

<!-- Image — send origin only -->
<img src="https://cdn.example.com/logo.png"
  alt="Logo" referrerpolicy="origin">

<!-- iframe embed -->
<iframe src="https://widget.example.com"
  referrerpolicy="strict-origin-when-cross-origin"></iframe>

Syntax Rules

• Value is one of the defined referrer policy keywords (see Values section).
• Valid on a, area, img, iframe, link, and script (when fetching).
• Element-level policy overrides the document default from <meta name="referrer">.
• JavaScript: element.referrerPolicy = "no-referrer" (camelCase).
• Empty string uses the inherited policy (document default or browser default).
• Affects the Referer header on navigation and subresource requests initiated by that element.
• Modern browsers default to strict-origin-when-cross-origin when no policy is set.

💎 Values

The referrerpolicy attribute accepts these policy keywords:

• no-referrer — No referrer sent at all.
• no-referrer-when-downgrade — Full URL for same-origin and HTTPS→HTTPS; none for HTTPS→HTTP.
• origin — Only origin (e.g. https://yoursite.com), never the path.
• origin-when-cross-origin — Full URL same-origin; origin only cross-origin.
• same-origin — Referrer sent only for same-origin requests.
• strict-origin — Origin only; none on insecure (HTTP) cross-origin.
• strict-origin-when-cross-origin — Full URL same-origin; origin on secure cross-origin; none on downgrade. Modern default.
• unsafe-url — Always full URL, even on HTTP. Not recommended — can leak sensitive paths.

<!-- Maximum privacy on external link -->
<a href="https://partner.com" referrerpolicy="no-referrer">Partner</a>

<!-- Balanced default-style policy -->
<img src="https://cdn.example.com/banner.jpg"
  referrerpolicy="strict-origin-when-cross-origin" alt="">

Applicable Elements

referrerpolicy vs meta referrer vs rel=noopener

Examples Gallery

Links and images with privacy policies, dynamic referrerPolicy in JavaScript, and choosing a policy with a dropdown.

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

<img src="https://example.com/image.jpg"
  alt="Example" referrerpolicy="origin">

<a id="dynamicLink" href="https://example.com">Dynamic link</a>

<script>
  document.getElementById("dynamicLink").referrerPolicy = "strict-origin";
</script>

<iframe
  src="https://widget.example.com/embed"
  width="400" height="300"
  referrerpolicy="strict-origin-when-cross-origin"
  title="Embedded widget"></iframe>

♿ Accessibility

• No direct a11y impact — referrerpolicy does not change how assistive tech reads links or images.
• iframes need titles — Always set title on iframe regardless of referrer policy.
• Images need alt — referrerpolicy does not replace meaningful alt text.
• External links — Indicate when links open new windows (target="_blank") for all users.
• Privacy benefits everyone — Limiting referrer leaks protects users with sensitive URLs in their browsing context.

💡 Best Practices