Using imgproxy with SPA Frameworks - Examples & best practices?

[sltsm]

Hi, I went through the documentation and couldn't find anything about using imgproxy with a SPA framework like vue. Are there any examples or guides on this?

If I understand correctly imgproxy is ment to be used serverside because of the encryption aspect. Would love to know about any best practices on how to implement it in a SPA scenario.

Thank you

[selul]

Not sure if it's possible to generate the encryption in Vue without exposing the key/secret in the frontend. Might be a good idea in such cases to deploy imgproxy behind a CDN with IMGPROXY_BASE_URL set and generate unencrypted images URLs from the SPA framework of your choice.

[DarthSim]

Hi, The ideal way is to generate URLs on the backend side and return them via API, that's how we work with it.

If generating URLs on the backend side is not an option, you can work the way @selul described. It's not fully secure since an attacker would be able to change processing options, but they wouldn't be able to reuse your imgproxy instance with their images.

You can also combine this with IMGPROXY_ONLY_PRESETS config option and use only predefined presets.

[jbergstroem]

The ideal way is to generate URLs on the backend side and return them via API, that's how we work with it.

I do the same; couple it with an api that likely has more info about the object.

If generating URLs on the backend side is not an option, you can work the way @selul described. It's not fully secure since an attacker would be able to change processing options, but they wouldn't be able to reuse your imgproxy instance with their images.

If you have control over your caching layer, you can add logic here to do the url mapping (VCL, Cloudflare Workers, Apache Traffic Server, ..). That way, you can for instance add a whitelist of what image transformations (or as mentioned above, IMGPROXY_ONLY_PRESETS) you want to supply and pass on. It'll be some glue but can be a safe way of managing freedom-within-boundaries in frontend but still staying safe from resource attacks.