I'm using the google maps API, which has a secret key that I need to use on the client side.
I was thinking of some alternatives to store it safely. One of them is storing it in my flask database. Then the front-end can send a query to obtain it.
Is there a way to do this safely by encryption?
Anything that ends up on the client in an unencrypted form can be accessed by the client. There's no way to avoid this. You have not control over what the client is doing with the responses that come from your server. The best you can do in this situation is obfuscate and/or try to make it more difficult for someone to access the key directly.
In situations like this, where you want to be able to allow your client to make direct calls to a third-party under your authority, you need some sort of token, ticket, or signing system which allows you to grant specific access to the client in a way that the 3rd-party provider can verify without giving the client your credentials.
I didn't spend much time looking into it and it's not really in the scope of this site to assist with the specifics of Googles API but as an example of how this works, it appears that this API provides a signature system. If I understand correctly, you would create a bare URL for the request that your client needs to make, and then using your credentials you get a signed URL from the API. This happens on your server, you would never provide your key to the client.
This signed URI would then be given back to the client and they can execute the call and the API will know that this is associated with your authority and billing. Presumably there is some sort of time limit on this signed URL. For those details, refer to the API documentation.
If you want to keep a key safe you leave it on the server side and make the call from there. If you want to not have the extra hop you must compromise your key to some degree, there is nothing you can do client side to hide from a determined client. Users have full control over their browser, there isn't anything you can do that they can't undo.
I think you don’t need to worry about Google Maps secret key being insecure. You can put restrictions on the referrer in your Google Maps API console.
Google earlier suggested to keep that key in html head tag. This itself gives me an indication that I don’t need to worry much.
Read this SO links: https://stackoverflow.com/questions/8729976/does-google-maps-javascript-api-key-v3-need-to-be-kept-secret-in-html-checked
Dont store it in the front end.
Instead:
Client -> Service Proxy -> Google
Your client calls a Proxy service that you own. The proxy calls Google. The key is stored with the proxy.
Do not include your key with the client.
It's a little bit of extra effort with this but your private API key stays private in this scenario.
