6

I'm working on a react project in team. We are using a few third party services and these services require api keys. Right now We are storing these key right in the code. As I know It's not good and dangerous.

I tried to find some recommendations in that regard. All ways to solve this problem I see now are:

  • create .env file and store all key there (but in this case I need to share my keys with other members of the team)
  • or move all keys to server and always make a calls to the server in order to get required information (but in this case I have no idea how to work with external components which are require keys, for example google maps/places/drawing and so on).

enter image description here

Which way are you using in your team and why? I would like to understand what's the best solution for me. Thanks!

Ivan Banha
  • 753
  • 2
  • 12
  • 23
  • 1
    Well it depends on the keys. If it's a **public key** then that's fine you can have it in public facing stuff (since that's the idea of *public* keys after all), but if it's a **PRIVATE** key, then you absolutely *need* to have these server side as environment variables, and leverage them via calls to your own API. You can't embed these in a front end app, since those keys can let people do nefarious things. In regards to sharing them with the team, if they're private environment variables, then that's fine you can share it with them, just not the public. – Jayce444 Jan 10 '20 at 12:11
  • 1
    Those "external" components aren't. They run in the same page as all other components. They receive properties the same way - they can be hard-coded, they can be part of your component's properties, or you can retrieve them in each call and pass them downstream. They could be loaded once and stored in the store. – Panagiotis Kanavos Jan 10 '20 at 12:12
  • 2
    As [the answers to this question explain](https://stackoverflow.com/questions/48699820/how-do-i-hide-api-key-in-create-react-app) putting the keys in `.env` isn't enough. The values are included in the build so you'll be sharing that key with the entire world, not just your team – Panagiotis Kanavos Jan 10 '20 at 12:14
  • is it a right way to make a simple proxy server with all secrets? And make calls like `client -> proxy -> external resource`? – poltorin Jan 10 '20 at 12:31
  • @poltorin explain please, I didn't get it. – Ivan Banha Jan 10 '20 at 12:57
  • @PanagiotisKanavos. Load keys from server it's interesting but if I understand right you can get this key from your browser. So I don't it's secure way enough or am I wrong? – Ivan Banha Jan 10 '20 at 13:03
  • 1
    You already linked to an article with the actual answer. *Environment variables* are sent to the client, no matter what. They can be viewed directly from the source. Requesting the key from the server is safer *but* someone could inspect the roundtrips using the Network tab in the dev tools. The link you posted explains that the *safe* option is to make the calls server-side and send the output to the client – Panagiotis Kanavos Jan 10 '20 at 13:06
  • 1
    @IvanBanha I will. Imagine you have your own node.js server which will store all secret keys. You can make calls from this server to external resources and take a response from them. You should write several endpoints on your own server to trigger it from frontend, then you will have all data with no security risks – poltorin Jan 10 '20 at 13:23
  • @poltorin now I got it. Thanks. I'm thinking about this way. I need to rewrite some modules on server. – Ivan Banha Jan 10 '20 at 14:16
  • Thanks you guys for explanations. Now I know how to solve my problem. I'll try to move all keys to the server end simply call that endpoints. – Ivan Banha Jan 10 '20 at 14:17

1 Answers1

1

You cannot really hide an API key used for a client-side API such as JavaScript API and its services. The right way to secure your API key is to add API key restrictions.

Check out Google's guide on API Key Best Practices. You may also want to have a look at this answer.

Hope this helps!

evan
  • 5,443
  • 2
  • 11
  • 20