referrerpolicy

Controls how much referrer information is sent with requests. Prevents leaking URL paths to third parties.

Overview

The referrerpolicy attribute controls how much referrer information the browser sends when making requests for a resource or following a link. By default, browsers send the full URL of the current page in the Referer header, which can leak sensitive URL paths (user IDs, search queries, internal routes) to third parties.

You can set the policy per-element or page-wide using a <meta> tag. Per-element policies override the page-wide policy.

Policy Values

Value	Referrer Sent	Notes
`no-referrer`	Nothing	Maximum privacy. No `Referer` header sent at all.
`no-referrer-when-downgrade`	Full URL on HTTPS→HTTPS, nothing on HTTPS→HTTP	Was the old browser default. Protects against protocol downgrade only.
`origin`	Origin only (e.g. `https://example.com`)	Strips the path and query. Good balance of utility and privacy.
`origin-when-cross-origin`	Full URL for same-origin, origin only for cross-origin	Keeps internal analytics intact, protects paths from third parties.
`same-origin`	Full URL for same-origin, nothing for cross-origin	Cross-origin requests get no referrer at all.
`strict-origin`	Origin only on HTTPS→HTTPS, nothing on downgrade	Like `origin` but also protects against protocol downgrade.
`strict-origin-when-cross-origin`	Full URL same-origin, origin cross-origin, nothing on downgrade	Browser default. The best general-purpose policy.
`unsafe-url`	Full URL always (including to HTTP)	Not recommended. Exposes the full URL path to all destinations.

Which Policy to Use

Sensible Default

For most sites, strict-origin-when-cross-origin is the right choice. It is the browser default and provides a good balance: your own analytics see full URLs, third parties see only the origin, and nothing is sent on protocol downgrade.

Maximum Privacy

Use no-referrer on individual elements that load resources from untrusted third parties, or when the current page URL contains sensitive information (user tokens, internal paths).

Analytics-Friendly

Use origin-when-cross-origin if partner sites need to know your origin for attribution but should not see the full URL path.

Applies To

The referrerpolicy attribute works on elements that make network requests:

<a> — navigation links
<img> — image loads
<iframe> — embedded documents
<script> — script loads
<link> — stylesheets, preloads, etc.

Per-Element Policy

Privacy-Sensitive Image Loads

Third-party images (avatars, CDN assets, tracking pixels) should not receive your full page URL.

<img src="https://cdn.example.com/photo.jpg" alt="User avatar" referrerpolicy="no-referrer" />  <img src="https://analytics.example.com/pixel.gif" alt="" referrerpolicy="origin" />

Links

Control what information partner sites or external tools see about your pages.

<a href="https://partner-site.com/landing" referrerpolicy="strict-origin-when-cross-origin"> Visit our partner </a>  <a href="https://external-tool.com/login" referrerpolicy="no-referrer"> Open external tool </a>

Iframes

Embedded third-party content should generally receive minimal referrer information.

<iframe src="https://embed.example.com/widget" referrerpolicy="origin" loading="lazy" title="Third-party widget"></iframe>  <iframe src="https://maps.example.com/embed" referrerpolicy="strict-origin" title="Map embed"></iframe>

Scripts and Stylesheets

CDN resources rarely need referrer information at all.

<link rel="stylesheet" href="https://cdn.example.com/styles.css" referrerpolicy="no-referrer" />  <script src="https://cdn.example.com/lib.js" referrerpolicy="origin"></script>

Page-Wide Policy

Set a default policy for the entire page using a <meta> tag. Individual elements can still override it with their own referrerpolicy attribute.

<head> <meta name="referrer" content="strict-origin-when-cross-origin" /> </head>  <a href="https://trusted-partner.com" referrerpolicy="unsafe-url"> Trusted partner (sends full URL) </a> <img src="https://untrusted-cdn.com/image.jpg" alt="Stock photo" referrerpolicy="no-referrer" />

Policy Resolution Order

Per-element referrerpolicy attribute (highest priority)
<meta name="referrer"> page-wide policy
Referrer-Policy HTTP header
Browser default (strict-origin-when-cross-origin)

Common Mistakes

Lazy-loading every page to no-referrer breaks analytics and affiliate attribution. Use a targeted approach instead.
Using unsafe-url sends the full URL including query strings, even over HTTP. Avoid unless you have a specific need and trust the destination.
Forgetting protocol downgrade: Policies without "strict" in the name may still send referrers on HTTPS-to-HTTP requests. Prefer strict-* variants.