DEV Community

Cover image for Hiding API Key in Img Src URL?
Nic FitzGerald (they/them)
Nic FitzGerald (they/them)

Posted on

Hiding API Key in Img Src URL?

I'm learning to build a "product" from idea to deployment and I have a user profile picture url that contains an API key (abstract api avatar, fwiw) for the image source. Is there any way to obscure that once I use it via the front-end?

Cover Photo

Discussion (4)

jappyjan profile image

It’s in the frontend anyway. So there will never be a secure way of hiding anything in there.
The api key stored/used in the client side should be bound to the fingerprint (e.g. ip + User Agent) of the current session and be only valid for a certain amount of time.
Except from that, you cannot do a lot...

thespiciestdev profile image
James Allen • Edited on

Try looking into signed URLs, where your server has the secrets configured and can generate unique URLs for your clients/browsers. Your implementation will depend on your file/image storage (AWS S3, your backend filesystem, etc.)

Edit: whoops!.. I had a type-o! I've updated my post with "your browser" to "your server" - very important, all things considered!

thespiciestdev profile image
James Allen

@nicfitzgerald , I had to edit my post... I hope I didn't cause too much confusion!

motss profile image
Rong Sen Ng

Does OAuth help for your case? It is commonly used for authorization.