Introduction

Cloudflare hotlink protection is meant to stop other sites from embedding your media without permission. Sometimes it ends up blocking your own images instead. That usually happens when media is served from a different hostname, requests arrive without a referrer, or the site uses cross-domain asset delivery that Cloudflare interprets as third-party embedding. The fix is to map how your images are requested and then narrow the protection so legitimate traffic still works.

Symptoms

  • Images fail to load only on some pages, devices, or browsers
  • Media works on the direct asset URL but not inside the site layout
  • A redesign, CDN change, or asset hostname change happened before the breakage
  • Subdomains such as www, cdn, or language-specific hosts show inconsistent image behavior
  • The issue appears after enabling Cloudflare hotlink protection or changing security settings

Common Causes

  • The site serves images from a different hostname than the page itself
  • Requests arrive without a referrer because of app behavior, privacy features, or certain browsers
  • Cloudflare hotlink protection is too broad for the current asset architecture
  • Cached image responses hide which requests are being blocked
  • Theme or front-end code rewrites media URLs to a hostname not covered by the intended rules

Step-by-Step Fix

  1. Test a broken image in the browser network panel so you can confirm whether Cloudflare is blocking it or another layer is failing first.
  2. Compare the page hostname and the image hostname to see whether your own site is effectively requesting media cross-domain.
  3. Check whether the failing requests include a referrer header, because some legitimate browser flows may omit it.
  4. Review Cloudflare hotlink protection settings alongside any custom rules that affect image paths or static asset hostnames.
  5. Verify whether www, non-www, CDN, localization, or app subdomains all count as trusted first-party origins in your current setup.
  6. Temporarily disable or narrow the feature and re-test to confirm it is the real cause before changing image code unnecessarily.
  7. Update asset URLs or hostname strategy so the page and media delivery pattern match your intended first-party architecture.
  8. Clear caches after the rule change so blocked responses are not mistaken for ongoing policy failures.
  9. Keep image protection scoped to actual abuse patterns rather than broad rules that break normal visitors and your own templates.