Cannot get image transformations to work with S3 proxy.

I'm having an issue getting Image Transformations working, and I'm not 100% why. I have a worker that acts as a proxy for my s3 bucket. The function uses the AWS SDK to generate a signed request and then returns that to the client. This is working as expected. I wanted to add image transformations to this. So I updated my return to be:
const client = new AwsClient({
/* important stuff */
});

const signedRequest = await client.sign(url.toString(), {
method: request.method,
headers: headers
});

return fetch(signedRequest, {
cf: {
image: {
width: 100,
height: 100,
fit: 'contain'
}
},
});
const client = new AwsClient({
/* important stuff */
});

const signedRequest = await client.sign(url.toString(), {
method: request.method,
headers: headers
});

return fetch(signedRequest, {
cf: {
image: {
width: 100,
height: 100,
fit: 'contain'
}
},
});
When I did this, I get: ERROR 9408: Could not fetch the image — the server returned HTTP error 401 Unauthorized I thought this might have to do something the signed requests, so I made a new worker to act as a proxy. I followed the worker code in the documentation (and updated it in places) and passed my proxy url to this new function. When I do that, I get: ERROR 9408: Could not fetch the image — the server returned HTTP error 403 Forbidden. Which is different, but not really. I was starting to think that I had something mis-configured until I randomly tried an image from cloudflare's homepage through the new transformation worker... and that worked! So it seems like this has something to do specifically with my setup in the proxy. It's not entirely clear to me which server is returning the error code and why. Any help on what might be going on?
1 Reply
jason
jason7mo ago
I may have made a small discovery. I noticed that when I was signing the request, it was producing a request that had a Authorization header. I had read elsewhere that Image Transformations didn't work with cookies/sessions/headers/etc. So I updated the signing request to put it all in the URL. The signing still works - now without any headers (I've double checked the signed urls). And now I'm getting this: ERROR 9408: Could not fetch the image — the server returned HTTP error 400 Bad Request I did find this thread: https://community.cloudflare.com/t/problem-with-cloudflare-worker-image-on-specific-datacenter-cph-ams-and-fra-is-working-fine/575660 Which seems to suggest that some CF endpoints will rewrite urls from https to http and that's what is causing the issue. My S3 backend (not actually S3, but an S3 compatible service) doesn't have the option to turn off secure images. I finally figured it out. For anyone who comes looking afterwards. I was on the right track with the Authorization header - but I didn't realize that when the request is signed - it signs all of the headers - and if they don't match up, the signature verification will fail. So the solution for me was to remove the headers from the signing request when an image transformation was being done.
Want results from more Discord servers?
Add your server