Safe Storage Of API Key

[CamTheWebGuy]

I can't seem to find much information about this topic specifically regarding this module.

However, I figured I'd ask those more experienced than I am...

I'm going to go out on a limb and say that having this code:

<LoadScript googleMapsApiKey='123456789'> // Do Stuff </LoadScript>

Is not the safest method and could lead to the key being easily stolen and used by an unintended third party.

Obviously, you wouldn't want to upload your API key to GitHub.

But my question comes from me assuming even having it on the frontend like this is a no go as well. Perhaps I am wrong? If my assumption is correct, is there a better way to handle loading the Maps API that is more secure and less likely to result in a stolen API key?

[JustFly1984]

Well, even if you hide the key to env variable, it will be some string value in js. The main security approach is limiting the domain name and services

[CamTheWebGuy]

Yeah that's what I was thinking too.

Thank you for the help/answer!

[CoreyKovalik]

I'm actually curious here...even if you restrict the domain / referrer for the API key, couldn't an attacker just simply paste their malicious code into dev tools when they edit the page, and then use the API key as they wish since they are still on the same origin? I assume I'm missing a piece of knowledge here, but if I'm right they could theoretically take somebody's API key and make tons of requests, sending their usage through the roof and thus owing tons of money to Google. I imagine the only thing that prevents this is Google rate limiting requests if somebody were to do this.

[waddyvic]

I've done the same ing as @CoreyKovalik described during development. I can run the app on my local machine, modify the hosts file so I can use the domain/referrer protected google API key. Anyone accessing the app can take the API key and do the same thing on their local machine.

I recently came across this article on using NGINX to proxy API requests and protect API keys from the general public:

https://www.freecodecamp.org/news/how-to-deploy-react-apps-to-production/

I think this is a very clean way to handle API key security since it has CORS protection in mind, and actually hides API key from the client's browser. If this google map package can allow overriding the google API URL, then it's a much more secure solution in my opinion.