Keeping API Keys Hidden - Specific Question - Heroku/Netlify

JavaScript
1

Hi Campers,

I am working on a weather App, and I’m curious how you keep API keys secret using Heroku/Netlify. I’m following this article: https://medium.com/better-programming/how-to-hide-your-api-keys-c2b952bc07e6.

Question: Let’s say in the React Code, I do make the url call, and for the API key I do use “{process.env.REACT_APP_API_KEY}”. And let’s say I put the .env file under the protected settings in Netlify/Heroku. Would I still be vulnerable to attack, somehow? Or, is it secure as long as I put the key on the server side?

Trying to learn about front-end security. Thanks!

2

In general, anything on the server-side not sent to the client is safe.

I cannot speak for Netlify, but, in terms of Heroku, the expected use case would be:

  • Source code hosted somewhere (GitHub is a popular and easy option)
    – Ensure secret keys are not visible (only referenced - process.env...)
  • Server is hosted on Heroku, where secrets are stored/set on the apps settings page/dashboard.
  • Client can be hosted on Heroku as well for simplicity.

For the most part, the only data you need to worry about is the data being made accessible to the client-side.

I hope this clarifies

3

Thank you! That helps!