I am developing a web application using HTML, CSS, Javascript as frontend and Django as backend python server. I have a form on the frontend side which consists of common address fields like street address, city, state, and zip. I want to implement google place autocomplete api so that the user can autofill the address fields by typing the address in the address field and getting the suggestions from google. Now the way I implemented is using the prebuilt widget that google provides and I placed it in my javascript file and it’s working as expected but now there’s a huge security concern regarding my api key being hardcoded in my javascript to fetch the suggestions. I know that it’s not a good practice to hardcode any type of secrets or api keys in any codebase, but I was unable to find any solution particularily in this situation.

If any user inspects my website on a browser, my api-key could be easily misused or something more dangerous to my application.

For deploying my application on cloud, I used a secret manager service (GCP) to load my api keys and secrets. I’m not sure if this could work out for api keys in javascript also.

For now, I have just restricted my api key to my domain only, but I don’t how good of an approach is that from security standpoint. Kindly share your suggestions or insights if anyone have dealt with this before or in general how to handle/hide/load api keys securely in javascript or in any frontend libraries/frameworks.