Security: Google Maps API Key Exposed in Browser Network Requests

## Security: Google Maps API Key Exposed in Browser Network Requests

### Description

While using `@react-google-maps/api` with Google Maps and searching through the Places Autocomplete functionality, the Google Maps API request can be observed in the browser's DevTools → Network tab.

For example, a request similar to the following exposes the API key in the request URL:

```text
https://maps.googleapis.com/maps/api/js/GeocodeService.Search?...&key=YOUR_API_KEY&...
```

The API key is therefore visible to anyone who can access the application and inspect the browser's network requests.

### Security Concern

The concern is not simply that the key is visible in the browser. Google Maps JavaScript API is a client-side API, so a browser-accessible key cannot be completely hidden from the end user.

The security concern is that the exposed key should be properly restricted so that it cannot be reused from unauthorized websites or for unauthorized Google Maps APIs.

If the key is unrestricted, an attacker could potentially reuse the key for their own requests, which could result in unauthorized API usage and unexpected billing.

### Expected Solution

Please consider implementing/configuring the following:

1. **Use a dedicated API key for the frontend application.**
2. Add **Website/HTTP referrer restrictions** for the production domain, for example:

```text
https://example.com/*
https://www.example.com/*
```

3. Add **API restrictions** and allow only the APIs actually required by the application, such as:

   * Maps JavaScript API
   * Places API / Places Library, if required
   * Other required Maps APIs only

4. Do not use the same API key for both frontend/client-side and backend/server-side services.

5. If a server-side Google Maps Web Service API is required, keep that server-side key on the backend and do not expose it to the browser.

### Important Note

Moving the frontend API key into a `.env` file does **not** hide the key from users.

For example:

```env
VITE_GOOGLE_MAPS_API_KEY=xxxxx
```

or:

```env
REACT_APP_GOOGLE_MAPS_API_KEY=xxxxx
```

will still result in the key being included in the client-side JavaScript bundle/request when the application is built.

Therefore, the recommended solution is **not to try to hide the Maps JavaScript API key**, but to properly restrict it using Google Cloud Console.

### Suggested Acceptance Criteria

* The Google Maps frontend continues to work normally.
* Places Autocomplete continues to work.
* The frontend API key is restricted to the application's authorized domains.
* The key is restricted to only the required Google Maps APIs.
* A copied API key cannot be successfully used from an unauthorized domain.
* Server-side API keys, if any, are not exposed to the browser.
* No unrestricted Google Maps API key is committed to the repository.

### References

Google Maps Platform Security Guidance recommends restricting API keys by application and API, and specifically recommends website restrictions for browser-based Maps JavaScript API usage.


Navigation Menu

Uh oh!

Security: Google Maps API Key Exposed in Browser Network Requests #3452