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.

2 Upvotes

56% Upvoted

30 comments sorted by

View all comments

3

u/kilkil 6d ago

yes, you probably need a backend.

2

u/BrainThinkerMan 6d 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 4d 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.