Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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.
Images with referrerpolicy
<!-- Don't send any referrer info when loading third-party images --><img src="https://cdn.example.com/photo.jpg" alt="User avatar" referrerpolicy="no-referrer" /> <!-- Send only the origin (not the full URL path) --><img src="https://analytics.example.com/pixel.gif" alt="" referrerpolicy="origin" />Links
Control what information partner sites or external tools see about your pages.
Links with referrerpolicy
<!-- Analytics-friendly: send full referrer to same-origin, origin-only to cross-origin --><a href="https://partner-site.com/landing" referrerpolicy="strict-origin-when-cross-origin"> Visit our partner</a> <!-- Maximum privacy: send no referrer at all --><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.
Iframes with referrerpolicy
<!-- Embedded content should not know the embedding page's full URL --><iframe src="https://embed.example.com/widget" referrerpolicy="origin" loading="lazy" title="Third-party widget"></iframe> <!-- Strict: only send origin on HTTPS-to-HTTPS, nothing on downgrade --><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.
Scripts and stylesheets
<!-- CDN stylesheet: no referrer needed --><link rel="stylesheet" href="https://cdn.example.com/styles.css" referrerpolicy="no-referrer" /> <!-- CDN script: send origin only --><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.
Page-wide policy with overrides
<!-- Set a page-wide referrer policy via meta tag --><head> <meta name="referrer" content="strict-origin-when-cross-origin" /></head> <!-- Individual elements can still override the page-wide policy --><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
referrerpolicyattribute (highest priority) <meta name="referrer">page-wide policyReferrer-PolicyHTTP header- Browser default (
strict-origin-when-cross-origin)
Common Mistakes
- Lazy-loading every page to
no-referrerbreaks analytics and affiliate attribution. Use a targeted approach instead. - Using
unsafe-urlsends 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.