[CRITICAL] Api Keys are exposed over a network call

[ShreyasPrabhu26]

The query parameter 'key' conatins the apikey,
In client side apps (React) we can get the key eaisily in the network call.
Is there any fix or something so that we can encypt this.

[thezstack]

Restrict API Key Usage:
Application Restrictions: Limit the use of your API key to specific HTTP referrers (websites) or IP addresses. This ensures that only authorized sources can utilize your API key.

[gergokee]

@ShreyasPrabhu26 everything is visible in client side apps, even if you mask it won't be safer. Do what @thezstack suggesting, that is the solution. Restrict based on ip/website etc.

[lcaaroe]

Restricting API key usage to specific referer HTTP header does not protect you as the header can easily be spoofed. In short, if someone can see your Google Autocomplete/Maps on your website, they can see the request you make to Google, including your API key and your referer header.

And you can't restrict by IP if this is a client-facing Google API integration. (I assume you wouldn't have this worry if your website was only used internally by a known set of IPs.)

The best option I've seen is to protect your keys against abuse by setting up billing/usage limits in Google cloud.