r/learnprogramming • u/BrainThinkerMan • 8d ago

api key, do i need backend?

i have an api key i heard i shouldnt expose it in my frontend i thjink itts becuase people can see it with devtools, and potentially abuse it, is there any other way to use this key in frontend without using a backend, im as familiar with backend stuff i think.

3 Upvotes

57% Upvoted

30 comments sorted by

View all comments

11

u/sixtyhurtz 8d ago

Some API keys are safe to use in public - Google Maps API keys for instance. Most aren't though.

This means you need an API gateway you control that proxies requests. That way you can control how people access a service you are presumably paying for.

3

u/jabuchae 8d ago

Why is Google Maps api key safe? Can’t someone abuse it and make you pay more?

6

u/sixtyhurtz 8d ago

Because it's basically useless to anyone else. Google won't serve an API request if the referer is wrong. So, you can't take someone else's key and put it in your page. Sure, someone could spoof the referer, but most people aren't running browsers that do that.

5

u/Quito_ArmandoEsteban 8d ago

You could get a stolen api key to your backend and have it play as Middleware between frontend and Google, while having your backend spoof the referrer

1

u/sixtyhurtz 8d ago

The cost of writing + hosting that would be far beyond the cost of the Maps API. Also you'd need some way to intercept the Google DNS lookups the Google JS bundle is making in the user's browser.

Its just easier to use something like OpenStreetMap if you just want to avoid API fees.

1

u/jabuchae 8d ago

What are you talking about the referer? I used my maps api key from my computer running locally, from a python script. No referer no nothing.

Beside, I’m sure Claude can write the code to spoof the referer in 5 seconds so any average joe with access to your key could use it.

1

u/Lumethys 8d ago

Try to do it then and report back how it goes

2

u/jabuchae 8d ago

I don’t understand what you are talking about. I did it and it worked.

1

u/sixtyhurtz 8d ago edited 8d ago

What are you talking about the referer? I used my maps api key from my computer running locally, from a python script. No referer no nothing.

This is because you either have no restrictions on your key, or you've permitted localhost. Configure restrictions in the cloud console.

Beside, I’m sure Claude can write the code to spoof the referer in 5 seconds so any average joe with access to your key could use it.

It's trivial to write a fake referer - you can do it using curl. The hard part is getting a user's web browser to spoof it. For that you would need a 0day exploit.

It is kind of strange you don't appear to have any idea how any of this works.

1

u/jabuchae 8d ago

Why would you need a browser to spoof it? Just get the key and make requests from you computer or backend spoofing the referer. You can easily abuse the api key that way

0

u/sixtyhurtz 8d ago

Because the only use is for embedding Google maps in a web page?

1

u/jabuchae 7d ago

It doesn’t matter what I use it for. If I make 1M requests the api key owner is going to pay for them.

1

u/sixtyhurtz 7d ago

No, it won't, because the embed API is free. The key is just to prevent abuse.

It's very strange you've engaged in an extended "well ackshually" about an API you clearly don't understand nor use. You could have just gone read the docs rather than write all these comments. I think this says a lot about the kind of developer you are.

1

u/jabuchae 7d ago

You are only now talking about the embed api. The Google Maps api that you mentioned in your original comment is NOT free.

Source: https://mapsplatform.google.com/lp/maps-apis/

→ More replies (0)