[stephenlf]

> But there’s a catch: anyone can abuse your app to optimize their own images, which costs you compute.

Could anyone explain this?

[samtheprogram]

The components work by requesting the image URL from your own server/API, at a route like `/_next/image`. The actual image URL that's passed as a prop to the component is passed to that API endpoint as a URL parameter.

So, the endpoint is essentially a proxy that does additional image processing, like compression and width/height resizing (again, a URL parameter that the Image component or any other client can change based on the device / screen size in use).

This means that without a domain whitelist, theoretically any image URL can be passed to the endpoint, which will then be processed and cached by your infra.

This has been used in the wild, e.g. racking up charges on someone else's Vercel bill by requesting a bunch of images through this endpoint.

[DylanSp]

Thanks for the explanation - I was deeply confused by this article's premise. I've never worked with Next.js or Astro, so I didn't have the background.

[cantalopes]

Imagine your app uses that Image tag to process image for some specific resolution/quality - just any processing done on your server for any imagw resource loaded via this tag.

Not sure how exactly it works, never used the framework, but i assume that when the frontend app detects this image tag it makes a server call to orocess it and rerurn optimized version.

Now, if someone were to insert such tag onto the frontend of your app and put in source of their own image, your server would do the processing of their image.

I have absolutely no idea in what universe would this be a practical attack of benefiting anyone at all

Edit: oh i see the coment by samtheprogram. I would think that the framework would use some form of csrf, this is a really weird implementation