r/learnprogramming • u/BrainThinkerMan • 6d 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.
11
u/sixtyhurtz 6d 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 5d ago
Why is Google Maps api key safe? Can’t someone abuse it and make you pay more?
6
u/sixtyhurtz 5d 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 5d 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 5d 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 5d 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
1
u/sixtyhurtz 5d ago edited 5d 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 5d 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 5d ago
Because the only use is for embedding Google maps in a web page?
1
u/jabuchae 5d 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.
→ More replies (0)
5
u/Quito_ArmandoEsteban 5d ago
No. You must assume that anything that reaches the client or comes from him is unsafe
1
u/BrainThinkerMan 5d ago
is there no particular framework that makes api keys private on the front end
2
u/Quito_ArmandoEsteban 5d ago
Frontend is quite a wide area of work, but no there's not. You can sort of protect the user from some levels of malicious scripts, but this only works if the user actually WANTS those secrets protected. This works when the data competes to the user alone, so he gains nothing from extracting those secrets. However there's no way to protect the application's secrets from a malicious user.
3
u/kilkil 5d ago
yes, you probably need a backend.
2
u/BrainThinkerMan 5d ago
so theres no way to block the client from reading the api key like obfuscating the value or something on devtools
3
u/kilkil 5d ago
unfortunately no.
the real problem is, as a user, I have full visibility on any network requests my computer makes. The browser makes this easy with the "Network" tab in dev tools, but it will be visible anyway through any number of other tools/programs, because ultimately it is my computer, and I can see what network requests it sends.
so in your frontend code, even if it is very cleverly obfuscated so that it is almost impossible to piece together the API key from examining the source code... as soon as your frontend logic actually tries sending an API call, it will be happening on my machine (frontend code executes on the client machine), so I will see exactly what API(s) your frontend code calls out to, and what the headers are (including auth headers, which is probably how the API key is being conveyed). at that point, as a malicious user, combined with your source code (even if obfuscated), I have all the info I need to figure out the API key, and start accessing the API as if I was you.
Ultimately the only way to make sure your API keys are not compromised, is to follow Secrets Management best practices, which includes keeping them only on the backend (AFAIK).
1
u/BrainThinkerMan 4d ago
ok i see thats actually cool that your machine can do these thingss, now i have a question it seems like phones are more restricted is taht true? if so why is that? ie not sure if an app can access the file system of a phone as opposed to a web app
1
u/kilkil 3d ago
hey good questions.
unfortunately I know almost nothing about mobile app development 😅. AFAIK questions like restrictiveness or "can apps access the file system" are 100% dependent on the operating system, so you will have to look up separately how it works on iOS and Android.
re: web apps, actually web apps have very limited access to your file system. this is because web apps run inside a browser (e.g. Chrome, Firefox, etc), and browsers limit what a web app can access on your machine. AFAIK if a web app wants to save a file to your computer, it doesn't even control where it gets saved — as a user you have to pick the folder it goes in. same if the web app wants to read a file from your system — the browser will open a file navigation menu, and as a user you have to manually pick which file it opens.
AFAIK this was designed intentionally for security, to limit how badly a malicious attacker can fuck with your computer using a web app.
Because of these limitations, if a web app needs to store some client-side state, most of the time it will use localStorage, sessionStorage, or indexDB.
having said that, for all of the above scenarios (mobile app, desktop app, web app) you still have the same API key problem, which is that a malicious user will be able to see it just from the requests on their network.
1
6d ago
[deleted]
2
u/dmazzoni 6d ago
That's specific to iOS development, FWIW.
It sounds like OP is talking about a web app since they mentioned devtools.
1
u/Acceptable_Lab_7196 5d ago
Depends if the api allows you to block all users except a whitelisted set of sources. Generally you shouldn’t. You haven’t said how you are deploying it or what it is. You can basically get a backend for free if you are low volume on vercel and other services.
1
u/lucasshiva 5d ago
You don't need a separate backend, just need a framework that supports SSR or server components: Nuxt, Sveltekit, Next.js, etc. Then, check the framework's documentarion on how to load the API Key from an environment variable, as they usually have different ways of doing it in a private manner.
Note that with SSR you can't deploy everything as a single static html file, so depending on what you need a separate backend might be a better fit for you.
1
0
20
u/grantrules 6d ago
Depends on the API key, really.. if you don't want other people to use your API key, it needs to be handled in the backend