0

I have a Blazor WASM app using the Google Map API. Everything it working as it should but the Google Map API is exposed in the wwwroot\Index.html per instructions. I am looking to move it out of the index.html but I am unclear as to were I should set the key.

<-- Index.html -->
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<My Google API Key>=initMap"></script>```
B Thornton
  • 51
  • 3
  • 1
    A WASM app, just like any JavaScript application, is fully viewable by your client, both source code and configuration. Don't ever put secret information in there. – gunr2171 Mar 04 '22 at 13:35
  • I think this is more about Google API key issue than Blazor. Take a look at [this stackoverflow post](https://stackoverflow.com/questions/38153734/do-i-need-to-hide-api-key-when-using-google-maps-js-api-if-so-how) and the [Doc](https://developers.google.com/maps/api-security-best-practices). – T.Trassoudaine Mar 04 '22 at 14:20
  • you dont need to hide it. no one can use this key. google limited this key for your doman/IP/application .... – Ehsan Vali Mar 04 '22 at 17:08

1 Answers1

0

This is not specifically Blazor issue. However, as per comments in your question, you can add website or IP restriction in your google cloud platform. Go to the page where you generated your API key. So even if someone has your API key, they can not use it on their website.

enter image description here

Umair
  • 4,864
  • 3
  • 28
  • 47