-1

I'm a beginner in javascript. I made a sample website where it runs Google Maps and I have my API Key. How can I hide the API Key so that others won't steal it?

<script async defer
     src="https://maps.googleapis.com/maps/api/js?key=[THE_KEY_HERE]&callback=initMap">
</script>

I was thinking if I can make a variable for the key and store it in another js but I don't know how can I insert in the src.

Lemsic
  • 35
  • 4
  • 1
    You can not hide anything that is loaded to client's browser. You can have a look at [this official page](https://developers.google.com/maps/api-key-best-practices) – Harun Yilmaz Apr 20 '20 at 11:30

1 Answers1

4

I was thinking if I can make a variable for the key and store it in another js but I don't know how can I insert in the src.

That's pointless. You'd still have to give it to the browser.

See API Key Best Practices:

To set an application restriction for an API key

  1. Visit the credentials panel.
  2. Select the API key that you want to set a restriction on. The API key property page appears.
  3. Under Key restrictions, select Application restrictions. Select one of the restriction types and supply the requested information following the restriction list.

HTTP referrers

Accept requests from the list of websites that you supply.

Below the types, specify one or more referrer web sites. Wildcard characters are acceptable for naming similar web sites. For example, *.google.com accepts all sites ending in google.com, such as https://developers.google.com.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335