How to hide client side api keys?

user_10795348 0
Viewed 436

so I want users in my app to say places they've been and I want to use google maps API and make a request here:

https://maps.googleapis.com/maps/api/geocode/json?address=London&key=MY_API_KEY

so that I can get the long latitude and plot on a map

the problem is if I make a request to that url above I fear I might expose my API key so someone looking in the network tab would just be able to steal it when it makes the request

I know I can hide them in my source code with environment variables. but is there a way to hide/jumble them from the network tab? or am I going to have to completely rethink my approach?

api-key frontend client-side environment-variables javascript
2 Answers

You should use it request on the backend

user_81952150

the problem is if I make a request to that url above I fear I might expose my API key so someone looking in the network tab would just be able to steal it when it makes the request

Your can restrict your API key in Google Cloud Platform

google cloud platform manage credentials

@Владислав also recommended calling API on the server. Another reason for that would be CORS

user_23044740
Related