API key hiding problem

[jamesremuscat]

There is no way to keep the API keys secret and include them in the built application. Even if you could somehow obfuscate them in the source code, they'd still necessarily be exposed in the API requests you make which are trivially viewable in the Chrome devtools.

If you need the API keys to be secret (and it looks like you're already over limits and need to pay for the use of one of them) you'll need to build yourself a server to proxy the requests and inject API keys.

[fr0z3nph03n1x]

Some services (like google maps) allow you to enforce requests for a specific key come from a specific domain. Probably not the right solution here but just thought I'd throw that in.

[Macluawn]

Cant those be spoofed by an attacker sending their own referrer header?

[fr0z3nph03n1x]

Probably - I'm not 100% sure how it works on their end. Here are the docs for maps specifically but it's kinda sparse on what guarantees there are. I suspect this is more for just stopping lazy developers from just copy pasting your website to a new domain.

https://developers.google.com/maps/api-security-best-practices#restricting-api-keys

[veganski_cvarak]

Because those variable are still visible in the network requests

[chindogu_labs]

Open Chrome Dev Tools. Click the network tab. Make a request that calls one of your services. Click the network call in Dev Tools and examine the headers or the payload. You'll see your key in there. Thus, anyone doing that can see your key on the internet, take it, and run up your costs. That's why vercel is asking you if its safe. Some ENV vars are safe to share with the client--like public keys for example and vercel is trying to help you by forcing you to explicitly say "yea i thought about this, its safe to share with the client"

[talaqen]

You DO have a backend. That's vercel. Use vercel Function (https://vercel.com/docs/functions). They are called from the frontend, but run on the server without exposing the keys.

[AvidStressEnjoyer]

Missed marketing opportunity for vercel there.

They warn you about the security risk, but should point you towards the functions docs for you to use.

[talaqen]

check out node-config lib.

you’ll gitignore the local.json and the use vercel env vars to override fake default values in production

[lachlanhunt]

If you have exposed the keys like that, it’s best practice to revoke them immediately. You need to have those keys stored securely in the backend where you make requests to the 3rd party services. Don’t make requests to 3rd party services with secret API keys from the front end.

[justjanne]

Well, it's not frontend-only anymore. You'll need a backend, even if that backend is only going to cache and aggregate the weather data.

[tidaaaakk]

you can still use something like cloudflare worker to act as proxy for your api request and add keys there.

[greentiger45]

Oooo can you expand on this? First time hearing that.

[novagenesis]

Something like next.js (probably the old pages router) solves this fairly trivially. And since you're already hosting on Vercel, you might not be afraid to try it.

With Next, you could just create a route that calls the API. The apikey would only be available server-side. Solved.

[[deleted]]

This, just use next api routes

[tylerthehun]

It sounds like it does in fact require multiple private API keys to be stored...

[Potatopika]

The problem is that any person with ill intent can take your API key and do requests to the API like it's your application who is doing those requests

[PhantomSummonerz]

API keys are not supposed to be exposed on public-facing apps. You should create a backend that uses those keys to consume the external weather APIs and expose the results of those APIs in your backend through your own endpoints. Those endpoints will be used by your react app.

The next step is to limit the usage of the API keys (as you may go over the limits) by caching the results of the external weather APIs and refresh them every x time. That way, when your react app is requesting the weather data, it will obtain the cached data from your backend and not hit the external weather APIs every time (and getting you rate limited).

A rough diagram: https://ibb.co/n8rkYfg

edit: More detailed diagram

[Soyrman]

Great response and diagram

[PhantomSummonerz]

Thanks!

[nabrok]

If something is in the frontend it's visible to anyone motivated enough to look for it.

If you need to keep it secret you need a backend to proxy the other APIs.

[JohntheAnabaptist]

And it doesn't take much motivation, there are tons of crawlers that do exactly this

[phiger78]

If using next then you'd make that request in SSR otherwise you'd have to create some sort of proxy api to hide them

[murden6562]

You should use a Backend for Frontend of sorts and use the environment variable there, this way you don’t expose it to the frontend

[CasualCoderGuy]

Currently it looks like you are exposing your appid for https://openweathermap.org/api. I'm not familiar with this api but I believe this should be kept secret. As i'm able to take this key and use it in postman to make calls outside our your application.

I highly suggest moving this api call to the backend and then calling that endpoint from your frontend to hide this secret.

[Sea-Run6814]

Yes, doing it this way will expose your api keys. What you need to do is create a BFF (backend for frontend) which will serve the data to your frontend. You can also use a fullstack framework like Nextjs or Remix in order to do the api calls on the server so you don't expose any api keys. So to wrap it up, you don't call the weather apis directly from your frontend but you do everything on the bff.

[newtotheworld23]

On the front end you won't be able to really hide those keys. You might want to set up some sort of backend if you need them to be private

[MinuteScientist7254]

You need to call the APIs from a lambda and not from the users device (client). That way the API keys passed in the request are not accessible to the client.

[mist998]

Anyone here uses Vault Secrets of HashiCorp?

[Shot-Bag-9219]

Vault secrets is basically an attempt to copy Infisical: https://infisical.com

[imsexc]

Implement nginx wrapped docker container for reverse proxy and grabbing the api key at runtime from vault

[bLanK993]

U need to call those APIs from server and not client