Referrer-Policy and Privacy for Hotlinked Placeholder URLs
Understand how referrer policy images controls what URL information is sent when your pages hotlink placeholder images from external APIs like fallback.pics.
When your page loads an image from an external URL, the browser sends a Referer HTTP header containing your page URL to the image server. For most placeholder APIs this is benign, but for sensitive internal tools, staging environments, or pages with user IDs in the URL, the referrer leaks navigation context to third parties. Understanding referrer policy images behavior lets you balance analytics collection with privacy.
This guide explains what the Referer header reveals when loading external placeholder images, how to configure Referrer-Policy to control what is sent, and when to prefer self-hosted fallback images over external API URLs.
What is sent
What the Referer header reveals when loading placeholder images
When a browser loads an image from https://fallback.pics, it sends a request with a Referer header containing the URL of the page that triggered the load. By default (no-referrer-when-downgrade), this is the full URL including path and query parameters: https://yourapp.com/admin/users/123?filter=active.
For public marketing pages this is harmless. For internal dashboards, admin panels, or pages where query parameters contain user IDs or session tokens, the referrer leaks sensitive routing information to the image API provider — even if the image itself is innocuous.
The Referrer-Policy header or meta tag gives you precise control over what is sent. strict-origin-when-cross-origin (the Chrome default since 2020) sends only the origin (https://yourapp.com) to cross-origin image requests, which is a reasonable balance between analytics utility and privacy.
Policies
Choosing the right Referrer-Policy for image requests
There are eight Referrer-Policy values. For cross-origin image requests to placeholder APIs, the most relevant are: strict-origin-when-cross-origin (sends only origin), origin (always sends only origin), and no-referrer (sends nothing). Avoid unsafe-url — it sends the full URL including sensitive query parameters to every cross-origin request.
Set strict-origin-when-cross-origin as a site-wide default. For specific pages that handle sensitive data, override to no-referrer on the individual img element using the referrerpolicy attribute.
# Site-wide Referrer-Policy header
Referrer-Policy: strict-origin-when-cross-origin
# nginx
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
# Per-element override for sensitive pages
<img
src="https://fallback.pics/api/v1/400x300/7C3AED/FFFFFF?text=No+Image"
referrerpolicy="no-referrer"
alt="Product unavailable"
width="400"
height="300"
/>
# Meta tag (applies to all requests from the page)
<meta name="referrer" content="strict-origin-when-cross-origin">Analytics impact
How Referrer-Policy affects image API analytics
Placeholder image APIs use referrer data to provide analytics: which pages are loading images, how many unique origins are using the service. Restricting the referrer to origin-only (strict-origin-when-cross-origin) still provides this data at the domain level without exposing individual page paths.
If you use no-referrer, the image API receives no referrer information. For privacy-sensitive applications this is the right choice. For development and staging environments where analytics are less important, no-referrer prevents staging URLs from appearing in usage reports.
# Staging/internal environment — suppress referrer entirely
Referrer-Policy: no-referrer
# Production — allow origin-level analytics
Referrer-Policy: strict-origin-when-cross-originSelf-hosting
When to self-host placeholder images instead of using an API
If your compliance requirements prohibit sending any data to third parties — even an HTTP request — self-hosting your placeholder images is the only option. Generate SVG placeholder files at build time and serve them from your own domain. No external request, no Referer header, no third-party involvement.
The fallback.pics API is open source and can be deployed as a Cloudflare Worker on your own account. Self-hosting the worker gives you all the API capabilities with no external domain dependency.
<!-- Self-hosted fallback: no external request -->
<img
src="/placeholders/400x300.svg"
alt="Product unavailable"
width="400"
height="300"
/>
<!-- Generated at build time with a simple SVG template -->
<!-- /placeholders/400x300.svg -->
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="#E5E7EB"/>
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle"
font-family="system-ui" font-size="14" fill="#71717A">400 × 300</text>
</svg>Hotlink prevention
Protecting your own images from hotlinking by third parties
Your own CDN images may be hotlinked by third parties — their pages load your image URLs without your permission, consuming your bandwidth. Configure your CDN or server to check the Referer header and deny requests that don't originate from your domain.
Fallback.pics does not implement hotlink protection — it is designed to be loaded from any origin. For your own image CDN, use Cloudflare's hotlink protection feature or an nginx referer block.
# nginx hotlink protection for your own images
location /images/ {
valid_referers none blocked yourapp.com *.yourapp.com;
if ($invalid_referer) {
return 403;
}
}Key takeaways
What to standardize before shipping
- By default (no-referrer-when-downgrade), the browser sends your full page URL as the Referer header when loading external placeholder images — including query parameters that may contain user IDs or session tokens.
- Set Referrer-Policy: strict-origin-when-cross-origin site-wide to send only the origin (domain) to cross-origin image requests, balancing analytics with privacy.
- Use referrerpolicy='no-referrer' on individual img elements for sensitive pages where even the origin should not be leaked to external APIs.
- For compliance environments that prohibit all third-party requests, generate SVG placeholder files at build time and serve them from your own domain.
- Fallback.pics is designed to accept requests from any origin and does not log or track referrer data for user profiling.
Production fallback layer
Use fallback.pics anywhere an image URL is accepted.
Start with one deterministic URL and standardize fallback behavior across your design system.
Continue reading
Related articles
Content-Security-Policy img-src for External Placeholder APIs
Configure a csp img-src directive to allow external placeholder image APIs like fallback.pics without opening your policy to untrusted image sources.
GDPR-Safe Image URLs: What Not to Put in Query Parameters
Understand what gdpr image urls compliance requires when using query-parameter-based placeholder image APIs and how to keep personal data out of URL logs.
Privacy-Safe Placeholder Images: Why URL Text and Uploads Matter
A practical privacy guide for placeholder image URLs, URL text parameters, no-upload placeholders, logs, referrers, caching, and safe production examples.