I’m trying to wrap my head around using API keys. Let me know if I’ve got this right. An API key is a code that you need to get from an API provider to make the API work. It’s like a password, and as such, it should be stored as an environmental variable on the server where your application lives.
Since JavaScript is on the client-side, exposing API keys there is a security risk. Why? What can a hacker do maliciously with an API key? Is the weather application challenge asking new developers to develop insecure applications? Codepen is full of FCC student projects that have put there API keys directly in their JS. Is that bad, or is it okay just for learning purposes? Is there a way that you can actually use JavaScript securely with API keys?
Generally its a bad idea, but for learning purposes there isn’t much you can do about it. I have had to delete my weather app key twice now and generate a new one because so many people have copied it, and then I would get an email from the api weather provider saying I was being suspended due to overuse.
On a real website you would be in control of the backend, and then you can hide the details of the api credentials you use and keep them safe. The Google API way of doing things is a good example. But for now don’t stress about it on Codepen and places like that.
They can use the key in exactly the same way that you can. They can write their own application and plug in your key instead of getting their own.
If the API key is rate-limited (if you can only use it 100 times a day, for example), and the hacker uses the key more than that, then the key could be disabled. Then your application would stop working. (Or, in the case of a paid API, you could be charged more money for the extra usage.) The worst thing that’s reasonably likely to happen, though: your API key gets canceled and your weather app stops working.
You can use JavaScript as a server-side language, using Node.js. Which means that you can use JavaScript securely with API keys - as long as you’re using server-side JavaScript. I went back and created a version 2 of my weather app project a little while ago to practice using API keys the right way.
Anyway, your intuition is right on. An API key belongs in an environmental variable on your server. Not in your client-side JavaScript. Not on GitHub. If you’re looking for a simple project to help you figure out how to use ajax and API’s, it might be worth it. Or you might decide you’d rather substitute a similar project that uses a keyless API.
Thanks @rickstewart and @AgathaLynn. My take away, then, is that for the purposes of learning; it’s fine to just use an API key directly on the weather app challenge. At some point, you’ll have to update your key as rate-limits get maxed out, or your app just won’t work, at least during your cut-off periods.
On a production website, though, you’d want to keep your key safely away from others who would use it. To do that, you’d store the key on the server-side, using node.js or another server-side language.
I’ll take look at your version 2 @AgathaLynn. Thanks!
Some APIs (ex: Google) allows you to place restrictions, either via IP address, or http referrers (i.e. your website domain name/wildcard) to prevent quota theft. Then only those IP addresses and websites can use these API keys successfully.
There are no hard and fast rules, but you understand correctly. How things get implemented as far as securing API keys are concerned depends on the backend technologies. I have a WordPress website that uses a Google G Suite email setup, and to use the API keys for that your just cut-and-paste them into the plugin, and the plugin takes care for securing them. If you use an API key in your own code, how you deal with that would be language dependent, platform dependent, server software dependent etc…
When you know specifically the conditions under which you are going to use an API, a quick online search will tell you everything you need to know for the setup you are using at the time. Generally it is not something you learn once and always do it the same way, it depends upon your specific needs which can change from project to project.
Others have answered this question well already but I think it’s an important topic and wanted to add that you can secure your API keys without a proper backend.
I hit this snag when I was a beginner and found it a bit overwhelming and cumbersome to build a backend just to secure one API key. The weather app in the FCC curriculum for example, all I wanted was a simple frontend that I could host free on GitHub Pages. But the only way I knew how to do that was risk my API key getting stolen.
It’s so much easier to fix this problem now with Netlify Functions. Basically think of it as a backend that you don’t need to worry about how it gets deployed, secured or hosted. Plus it’s free
I published a video recently that goes through the whole process as well as answers your question more in depth too but I get flagged for spam if I share it.
So to answer the question in the title, technically yes you do need a server-side language to secure API keys but you don’t need to deploy a whole backend application to do it either.
