AJAX Call to back-end server for API Keys

Hey fellow campers,
So I created a basic node.js backend that uses dotenv environment variables to store my API Keys.

I need help on where to start on setting up this backend to where I can just make an AJAX call from another web app of mine to get the API KEY. Anyone have any suggestions?

I don’t know if I understood correctly but you probably shouldn’t get the api key from another website. What you need to do is to make all the requests to the API provider only from your back-end, and respond to your front-ends with the data.
If you need to check if the website that is requesting the data is your website, you can always check the url in the back-end or make some sort of authentication. But getting the API key from the front-end is not the secure way.

If you mean that you have setup a server only for your API keys, and you want to get the keys from other servers, you might want to use some sort of key exchange encryption like gpg on the back-ends of your websites to encode the codes on one sever and decode the keys from the other one.

Hey @tuxitop, thanks for the quick response.

I’m sorry if my question wasn’t clear or concise.

What I am trying to do is try to store my API Keys on a separate web app I created (hosted by webfaction) using dotenv. I then want to, for example, have my weather webapp to request to the separate web app for the API Key (which is in a .env file). This in turns removes the API Key from the client-side.

Maybe I am going about this all wrong.

You suggested using gpg for key exchange. Will this solution require me to install modules/packages on both client/backend?

I would argue so. It’s a bad idea for 2 reasons: 1) It still exposes the API key on your client, even though you’re retrieving it in an AJAX call, and 2) unless you create another layer of authentication, anyone can query your server for those same API keys.

The only way to keep your secrets and keys secure is to make sure they never leave your server. You’ve already got your server set up with dotenv, so as long as you don’t check your .env file into source control, you’re golden. The next step is to have your server be the intermediary between your client and the services you’re using. Then you can do all sorts of neat things like caching response data and rate limiting.

3 Likes

@PortableStick Thanks for the explanation!

So, in this case the best way would be to call the API on the backend and then have my webapp request the data, if I am understanding this correctly.

As @PortableStick already said, no matter what you do, if any other website can request your API key, it makes it unsecure. Also your .env file should never be committed to github or any other publicly available space.

What you need to do is to store each API key on the back-end of its own website (not committing them to github), Some services like Heroku also provide a way to store Environment Variables on your server manually and you don’t need dotenv there. I’m not familiar with webfaction. but try to look for the best way to store your private environment variables on your server.

Yes, that’s it exactly. You’re building your own web API. Also remember to disable CORS and set the origin to the domain of your client app.

1 Like

Thanks @PortableStick!

Most appreciated, will take a look into all of these.

Here’s a project I worked on for the backend portion of FCC:

If you look at the references in the README at the bottom, you’ll see the Udemy course that I based it on.

1 Like

@zklinger2000 hey, this will be very helpful. Thanks for offering to show me your project. I will definitely look into it tonight!