Hotlink Protection (Scrape Shield) blocking access to images in `wrangler dev -e production`

Developers Cloudflare Workers
1

Let’s say my application renders an HTML page that contains some img tags. These images are also served by the same worker.

  1. When I access the http://127.0.0.1:8787 after deploying wrangler dev -e production images are not displayed from the HTML page and the console indicates that the access is forbidden by the Hotlink Protection.
  2. When I access images directly http://127.0.0.1:8787/images/example1.jpg it works!
  3. This problem does not affect wrangler publish, wrangler publish -e production, wrangler preview --watch, wrangler dev. It only affects wrangler dev -e production

I was able to fix it using a 302 redirect, but…

	const response = await fetch(imgCdnUrl)
	
	if(response.ok)
	{
		return new Response(response, {headers: response.headers})
	}
	else
	{
		///here is my fix
		
		const {status, statusText, headers} = response;
		
		if(status === 403)
		{
			const body = await response.text();
			
			if(body.includes('hotlinking'))
			{
				///I tried a 307 redirect, but it didn't work
				
				return new Response.redirect(imgCdnUrl, 302)		
			}
		}
		/// until here
		
		return new Response(statusText, {status, statusText})
		
	}

…I don´t want imgCdnUrl to be public.

Is there a way to bypass Hotlink Protection with the localhost when using the production environment?

2

You should be able to mimic hotline protection with Firewall Rules. If file has an image extension and referrer is not your site and IP address isn’t SOMETHING, then block.