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

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?

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.