2

I've hide my API key inside .env file in my React app. And I used it through process.env. But When I go to network tab in developers tool of google chrome and check requests there I can see my API key present in the request URL. Therefore my API key is not secured. Anyone will able to get my API key. How can I hide my API from that place as well?

enter image description here

Kasun
  • 672
  • 8
  • 18
  • 3
    If it's making a call client-side, there is literally no way you can hide it. You can use a serverless function to obfuscate if you'd like. Anything server-side will hide it, and just pass the results. – Joel Hager Jun 09 '21 at 04:41

3 Answers3

6

There is no way to hide the key on the client-side.

My suggestions:

  1. Do this call from your back-end, and expose it to your front-end
  2. Add API HTTP referrer restrictions instead. Only requests from your domain make the call in (1)
wdetac
  • 2,712
  • 3
  • 20
  • 42
2

If you want to keep your API key private, don't use it in front end. Just keep it in back end and, first send request to backend and, then from back end, send request to that API server

Pranavan
  • 1,287
  • 1
  • 6
  • 18
1

Unsure if this is a service you're building or one your consuming. If you are in control of the service then you can change from using a query param through to an authorization header. When the service is live as long as you are using SSL then the header would be encrypted and the key would not be exposed to those snooping.

Jwilz
  • 54
  • 4