7

How and where do you store third-party API ApiKey (aka AppId, AppSecret, AppKey) that you use in your javascript web app? Should I care to keep it secret from public if it is used in fetch URL and is visible in browser network tab anyway?

Example: in my React app I use OpenWeatherMap service. I need to sign up on their website and obtain the apikey, then I request data using URL:

http://api.openweathermap.org/data/2.5/weather?APPID=96547d41585ab16c48ee1evtm1bb1g8&q=London,uk

My appid in the URL above is associated with my account and there is a limited amount of requests I can do with this appid. So I'd like to keep this appid hidden from anyone. Is it possibly to do so in React app?

Liu
  • 135
  • 2
  • 9
  • Environment Variables. – Siya Jun 20 '18 at 12:43
  • 3
    Personally, if your API key is a paid service, I wouldn't expose to your WebApp directly, but get your backend server to handle this. Basically using your backend as a proxy to the API service,. Here you have full control. – Keith Jun 20 '18 at 12:50

3 Answers3

1

A common solution is to have your application user create their own API keys for the relevant third-party services. The user may then provide these keys to your app and, for example, have them stored in their profile (within your app).

If you want to provide access to a third-party service under your own credentials to the users of your app, the only properly secure option would be to proxy the requests through your own server, where you can safely store your API keys without exposing them.

KT.
  • 9,166
  • 3
  • 38
  • 65
-1

There are many alternatives for securely storing API keys and secrets. Some of them let you use your Git repository and encrypt the sensitive data. Other tools are more sophisticated and decrypt sensitive information as part of a deploy workflow.

The most popular tools are (your choice will depend on your taste and what you are building on and for, of course)

  1. git-remote-gcrypt (Let's you encrypt the whole repo. So very safe :))
  2. git-secret (Let's you encrypt specific files locally before pushing them)
  3. BlackBox (more or less the same as #2 but also support encrypting small strings)
  4. Heroku Configuration and Config Vars (if on Heroku) (Let's you access sensitive information through config vars, which is where you would put your secret keys)
  5. Docker Secrets (Lets you define encrypted variables and makes them available to specific services during runtime. Secrets are encrypted both during transit and at rest.)

In my opinion, #5 is best. But like I said, this would depend entirely on you.

Siya
  • 3,975
  • 1
  • 15
  • 36
-1

If you use create-react-app to create your application, you may use the multiple .env file structure defined in https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables

Murilo Cruz
  • 1,819
  • 13
  • 18