CODEWITHSUNDEEP
javascriptsecurityapi-keydotenv
Kasun Jalitha
Kasun Jalitha

Reputation: 771

How to solve API key is visible on request URL problem?

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

Upvotes: 4

Views: 6688

Answers (3)

wdetac
wdetac

Reputation: 2832

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)

Upvotes: 8

Jwilz
Jwilz

Reputation: 54

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.

Upvotes: 1

Pranavan
Pranavan

Reputation: 1395

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

Upvotes: 2

Related Questions