Cloudflare Hotlink Protection (403 on Cross-Origin Images)
There's a new feature in Cloudflare websites - Scrape Shield. This feature is used to protect the website from scraping.
Cloudflare show's a banner to enable the free feature on websites.
This also includes a feature Hotlink Protection that prevents images from being used by other sites.
Enabling it breaks all the workers and buckets mapped to the domain/subdomain in the zone that are serving any kind of images of type - gif, ico, jpg, jpeg, and png.
Requesting any image URL from the domain results in a 403 Forbidden error with no CORS headers.
Note that this only happens for images, not for other files like glb, js, css, pdf etc. So this only breaks parts of apps that you serve.
To fix, disable hotlink protection or scrape shield for the website or add a Configuration Rule to disable it selectively.
- Go to website in cloudflare dashboard
- Rules -> Configuration rules
- Add a new rule
- Set filter like
(http.host in {"assets.example.com" "assets.drive.example.com"})- Add
Hotlink Protectionsetting and set to Toggle to Off. - Save and Deploy