0

I'm using Flutter web and in my index.html I have :

<head>
  <script src="https://maps.googleapis.com/maps/api/js?key={MY_KEY}"></script>
</head>

And when I run it, I can inspect the web and see the API key from the source code in the web browser. I need to hide it from the user because it's an important credential. is there any way I can do that? Thanks in advance!

I need a way other than restricting the API Key from google console. I expect to be able to hide the credentials in a way that users in the production environment won't be able to see these.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Amin Sajadi
  • 25
  • 5
  • 1
    you can't. The HTML is downloaded by the browser and as such the user has full access to the entire code that was ended. The only thing to do it is to hide it on server-sided coding. – tacoshy Dec 29 '22 at 14:25
  • @tacoshy can you please guide me on how to do this? – Amin Sajadi Dec 29 '22 at 14:28
  • Or [What steps should I take to protect my Google Maps API Key?](https://stackoverflow.com/q/1364858) – gre_gor Dec 29 '22 at 15:03

1 Answers1

0

You can't, however, you can restrict your API keys to an IP address, HTTP referrer, IOS or Android app.

This means that if someone tries to use your keys and have not passed the restrictions you've created, it won't work and you'll be safe even though your key is public.

Please check this documentation:

https://developers.google.com/maps/api-security-best-practices#restricting-api-keys

gugateider
  • 1,983
  • 2
  • 13
  • 17