5 JavaScript API Key Mistakes (and how to fix them)

Cannot not use npm dotenv package in vanilla JavaScript.

I have an api-key error case, my api-key is case sensitive, in javascript my execution does not progress, due to the error it shows in api-key, please does anyone know how to solve it?


"x-api-key": "swGwRN7X65XLuBqFFsthpwxMjhXjxL9CrUmvtW70"

error displayed: message: 'The request message is not properly formatted.'

I guess what I don’t get is, yes I want to minimize exposing my api key or auth token via github or dev console, but I also want people to use the app I’ve made without having to make an account and login. Don’t some of these approaches go a little too far in “protecting” the keys? What’s the trade off if people can’t even use the thing. And what’s to stop multiple accounts from signing up and spamming your key anyway?

Sure I need more help and explanations about how to solve the problem number four 😂. Nice video!

whats the point of this video?

Thanks James. Properly put up in an order to understand

Actually you can use env variables in Astro if you're not using your API keys in client side code. Since Astro runs in build time, the requests that need the API keys will be sent during build time and no js code with the API keys would be shipped to the user.

Thank you so much this helped a ton James!!

Suppose in react before push it github or hosting craete .ENV file and write REACT_SECRET_API_KEY=abcd...........etc etc
And my index.js file code {process.env.REACT_SECRET_API_KEY} then add .ENV file to . gitignore after that if i push it github then okay or probelm ? I mean can hide my api key that's way ??

shouldn't we use a vault service to securing your API key and get api key dynamically to request backend.

Hi, James. Thank you so much for this valuable video. Actually I have stored all my env variables in vercel, but when I see in browser/inspect/source tab, I could see all of them even though my github username, developer key etc which is very sensitive info. How to hide them? 🙏🙏🙏🙏

So I with 0 dollars in my pocket basically can't use any API because I don't have a server to make it secret... veb dev is a giant headache.

Should use other API as an example because there are two different types of API keys, Public and private API keys.

Public API keys, like Google Map API key, for example, will be always exposed to the internet because you need the key to access the map. This kind of keys should be restricted by limiting IP addresses, referer or domains to secure the usage.

Private API keys are for internal use, for example: APPs to APPs or servers to servers communication, so they shouldn't be exposed to public. Instead, they should be secured by ways mentioned in this video.

And how does reading from env variable make it any secure ?

Any one who can look at your network tab have access to the curl and hence the key.

Please stop making these videos which gives people a false sense of security which is more dangerous in practice .

client secret in a react/single page application !!!

There is only one way to secure your JavaScript client and using oAuth.

Security is such a sensitive topic and videos like this only makes it worse.

Do I have to give the web developer the secret key to implement the payment method?

People just do not understand security at all. All that .env bullshit about api keys ruins here: anyone can open devtools, network tab and see all exact headers browser sends to 3rd party api including your 'secret' key

Hey James, I recently being diving in deeper in this topic and I been learning a new tool API managmenebt and Key Vault. Was wondering if you have knowledge on or could do a video about key vaults?

Cors is good if backend consuming from website but if you have mobile app?

Hi James. Thanks a lot for this post! I'm still learning about securely using my API keys. It seems that this will be a long, long way to go. I almost can't believe that there are no more robust and secure methods implemented in modern browsers. Seems like one has to go to university to be able to securely use widespread API's. But hey, let's figure it out. I like your content, and thanks again.

Thanks for this video James, it was actually Ania's video that led me here and it's an issue I've been wrestling with for longer than I'd like to admit!

Please make follow up video

Is it okay to expose an API Key that is limited and retrieves information for demonstration purposes (i.e. demo projects hosted on GitHub Pages)?

Absolutely need a demo with some visuals

So you didn't explain how to solve it. Nice. What a waste of time.

what if don't want to make localhost:3000/weather data available to all users, just to the ones that are authenticated?

Using environment variables gives you a "false" sense of safeness, you are still exposing the API key to the world. Which not always is a problem as many API will give you an option to limit what URL requests can be made from, so exposing API keys isn't always a problem. Google Maps API key is one example that comes to my mind.

Backend protection, use Firebase auth with custom claim with JWT

Thats where i am stuck i created proxy node backend but i think its useless now because you can call it directly and get the data😂😂😓

Great video James - Objective, honest, and on point, without unnecessary things!

Do you not sing a song anymore?

Please make a demo. Even if it's a multipart video to avoid all mistakes.

Vercel environment vars work great for prod. Thought you maybe are highlighting this as not the best solution.
NextJs newer version of 12 has resolved the ability to get env vars into the front-end. If the var is prefixed with NEXT_PUBLIC_..., then the value is return and not return of a blank. Although, it only works for NextJs. And, I do believe Vercel's NextJs would offer this only if it were secure approach.

Thanks for this video, james. Yes, a demo would be nice.

Hi James,

I work on full stack development for more than 5 years now, and created multiple apps which has more than 2million downloads on the playstore,

The methods which you have mentioned is having couple of issues,

Method 1: use cors : here I can simply create a backend server which internally calls your backend server which you have mentioned as proxy, and I'll be able to use it on any website I need

Method 2: Rate limit, if you rate limit an application just using the token without checking IP this could back fire, as this will lead to a DOSS attack and I can block your actual request

Method 3: JWT token, this has the same problem as initial one, where if a person is smart enough to get the secret key from the code base, he can easily get the JWT token from the network logs / network inspector, and we will be able to easily crack your refresh token mechanism too,

So here what I have done is, create a hash key mechanism with custom token, where the custom token is generated using browser finger print and few other information which I don't want to disclose and server will also use these same information to create a hash for every request, if it's found an hash mismatch, it will immediately blacklist the token, all the browser and every request will generate a unique hash, any of the parameters changes hash will change, this is one way to secure your service

Here what you have mentioned is the minimum requirements, but it will not fully secure your application

Can you please make an Tutorial on SSR Streaming with Next.js

As long as it’s being used on the client, the key can still be seen on the browser if you dig deep into it, no? Unless you mask it with a serverless function then yes it’ll be completely hidden.

Great

Why not have it on a database on the web, then construct a class with private values if ur shipping an app with API keys.

Please make the follow up video

Hey bro. How much longer before the everything svelte course is dropped?

So there no solution to prevent a stranger to trigger our backend from a server ? (Apart login auth)

A simple like counter which is available for guests (no login) that be stored in a db can’t be secured to a stranger call?

Not so much info about Chrome extensions and JWT. Would be nice to see some tips/tricks :)

Yes, demo please :D

DevTools > Network > see api key in plain text in the request
=/

Please suggest in detail how to manage multiple dev/test/production .env files shared among multiple developers and testers.

Also, how would ex-developers (potential saboteurs) be denied access? Generate new keys and rebuild/redistribute a new generation of .env files?

Also, please address Pavel Pirogov's comment that many api keys are host-limited, apparently mitigating key secrecy as a serious issue.

So would this also be true for using an API to say gather just simple blog posts from a CMS; I mean do you need to get special tokens for that type of application?

I'm already making popcorn for the follow up :)

I have to use Google Maps in a project. I was wondering if anything that you said would apply for the Google API key, but I guess it doesn't. Google forbids using Maps with a proxy as far as I know. Restricting the key to a host (via Cors in the Google account settings) is the only possible protection I guess.