How to hide an API-KEY for Google Maps

Forums Help and How To How to hide an API-KEY for Google Maps

This topic contains 2 replies, has 2 voices, and was last updated by  Henry 2 months, 1 week ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #13608
    Henry
    Member

    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

    #13613
    sup3xtian
    Member
    #13631
    Henry
    Member

    @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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.