How to hide an API-KEY for Google Maps

Bootstrap Studio Help
1

Hello,

Bootstrap Studio's map element works fine. This is the orignal code (key is invalid):

<iframe allowfullscreen frameborder="0" width="100%" height="450" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDaEw6o8OhJvRQnTF3gI_tibMejtfasOlY&amp;q=Paris%2C+France&amp;zoom=15"></iframe>

The problem is that everybody can see that API-KEY and use it. One way to prevent hackers from doing that is letting the key be visible and let Google restrict access from a certain domain only.

But I wonder if there is another way. For instance using a constant thus making the key value invisible. Unfortunately something like

<script>
   const API_KEY="AIzaSyDgH....";
</script>
<iframe .... ?key=<script>API_KEY</script>& ...'></iframe>

does not work. Does anybody have a solution?

Henry

2

Have you tried this https://cloud.google.com/docs/authentication/api-keys#api_key_restrictions ?

3

@sup3xtian Tried it but it did not solve the problem the way I had in mind. Obviously it is not possible. I will look for another solution. Thanks for your comment. Henry