Drawing overlay returns 5xx errors

[lukas.grinys]

Hello,

We have been experiencing issues regarding the overlay drawing function on Cloudflare workers. We are trying to draw overlay only for certain images (the ones that match a certain URL pattern). The URL pattern (https://{domain}/{matching_pattern}/*) was added to the Routes and the worker was set up on that route.

Currently we are working under domain that is not public (testing enviroment), but we have Cloudflare IP addresses allowlisted (according to the IP range listed in https://www.cloudflare.com/ips/).

The code of the worker itself looks like this:

const WATERMARK_SRC = 'https://{domain}/{pathname_to_watermark}';

addEventListener("fetch", (event) => {
  event.respondWith(handleFetchRequest(event.request))
});

async function handleFetchRequest(request) {
  const response = await fetch(request.url, {
    cf: {
      image: {
        draw: [
          {
            url: WATERMARK_SRC
          }
        ]
      }
    }
  });

  return response;
}

• When testing with any image, that matches the {matching_pattern} we receive a response with 502 status code: “ERROR 9509: Could not fetch the image — the server returned HTTP error 502 Bad Gateway”;
• When testing with additionaly providing headers from original request - we receive a 524 timeout;
• When testing without providing cf parameters to the request - we receive an original image properly with 200 status code;
• When testing with replacing request.url with another image, that doesn’t match the worker route pattern - we receive an image with properly drawn overlay with 200 status code;

From what it looks like during testing, it seems that any request with provided overlay drawing parameters and one of the images provided matching the worker route pattern causes an error. Is something missing here in this type of implementation or is it simply not possible to re-use the same request URL?

Thank you

[asemiglazov]

sorry for late response. as you noticed, the issue with original code is that image resizing service can’t fetch original images, since the url is matches against worker (and this is where a loop is created which is not allowed).
It’s possible to add workaround to filter out requests from image resizing and bypass it to origin, but it’s strongly dissuaded as it will add to latency hitting workers twice. I’d suggest to add a subdomain or subpath and do url-rewrite