0

Right now I am using an OpenWeatherMap API key in my client side javascript for a simple weather app (Node/Express). I know this is not ideal outside of development, so I did npm install dotenv. On the server side, I can get and set the env variables just fine in Node. I can see them when I console.log out.

How do I call the API key in my javascript on the client-side? For example, currently my weather app has its simple logic in a file called weather.js and the HTML uses weather.js.

Ideally I would just like to call my api like http://api.openweathermap.org/data/2.5/forecast/daily?lat=${lat}&lon=${lon}&units=metric&appid=${process.env.WEATHER_API_KEY}

I know the .envs are on server side and you have to do stuff to make it work client side. New Node developer here who has read too much that I think I am confused between requireJS, Browserify, modules, .env, etc...

K2SO Ghost Spirit
  • 1,291
  • 3
  • 11
  • 11
  • if you want to get some data on the client I see 2 ways: 1) do HTTP request and get JSON data of the .env from the nodeJS/Express API. 2) Put that data during compile time into your client code – Pavel Kostenko Mar 14 '19 at 18:54

3 Answers3

2

You don't want your API keys (or other secrets) to be public. Using them in the front-end would make them visible when inspecting the page and in the network requests log. You need to store and use your secrets server-side.

Create a route on your backend (which you protect from being used by other domains using CORS) which calls the weather API (using the token stored in .env on your server) and sends back the data.

Then have your frontend hit that route.

JBallin
  • 8,481
  • 4
  • 46
  • 51
  • I would like to emphasize the importance of not using secrets like API keys in your frontend code. Someone could easily get your API key if they open up the network tab of chrome developer tools and look at the requests your frontend app is sending to the API. If someone wanted to, they could take that API key and use it themselves, or they could mess up your app by, for instance sending a large number of requests that would count against your usage limits or incur charges to your account. – djheru Mar 14 '19 at 20:03
  • 1
    @djheru updated the answer a bit to emphasize the importance of not using secrets and the fact that you can view the keys in the network tab. – JBallin Mar 15 '19 at 00:38
0

You will have to request the API Key from the server.
This can be done easily by making a simple route in your backend that will return the key as a response.

If you don't want to expose your API Key (I recommend you to not expose it), what you can do is create a route in your backend that will make a call to the WeatherAPI using your API key, and the client will send HTTPS request to your backend, which will then create another HTTPS request to the WeatherAPI and send the response back to the client.

Aviv Biton
  • 100
  • 7
0

You don't want to expose your API keys to outside world. What you can do is to create backend route (/api/keys) make it protected with CORS and call it from front-end.

Milos Kovacevic
  • 861
  • 1
  • 9
  • 20