2

I am learning to code my own website using Bootstrap and have easily placed a map on my page using a Google map API-key and script from Google Developers:

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

Ideally I would have something like:(i.e. I have tried this):

Html: <script src="map-value-pair.php"></script></script><script async defer src="$MapURL"></script> PHP: <?php $MapURL="maps.googleapis.com/..." ?>

So obviously this doesn't hide the URL it prints to the html.

I am not convinced anyone actually tries to hide this key for a basic purpose like mine because the http referrer restriction on Google Developers is sufficient. But, after trying many different approaches to obfuscate the key I have decided I would like to learn to create environment variable to hide values. I think it could be useful and I would like to extend my server-side knowledge. Google best practices also suggests to "store them in environment variables or in files outside of your application's source tree".

I have found a related stack: What steps should I take to protect my Google Maps API Key? In that stack a related link was given to hackernoon.com (limited links in first post) My hosting service uses cPanel and provides this apache environment variables tutorial: documentation.cpanel.net...

I am having problems finding material to start myself off. Right now I have two potential action plans:

  1. enable ssh on cpanel>follow cPanel tutorial noted above>figure out how to access variable in html

or

  1. enable ssh on cpanel>install node.js somehow>follow something like this on twilio>figure out how to access variable in html

Any help or suggestions appreciated. Best case scenario some edits to my action plan with a couple links to check out. I just need some sort of confidence to move forward with one of these plans.

P.S. Woo first post!

EDIT: Minor cleanup of question. Added ideally script.

Duncan Brain
  • 305
  • 4
  • 11

2 Answers2

1

Anything you output as HTML can be scraped by anyone visiting your website. You can't access variables etc in HTML as it is the final output, generated server side once it has processed all your variables.

As you are using the Javascript library then there is no way to hide your key. Javascript is executed on the client's browser, so you have to pass them your API key for it to work.

If all you need are static maps then you can generate them server side and return them in your HTML without ever revealing your key to the end user.

Heres a PHP example:

$mapimg = "https://maps.googleapis.com/maps/api/staticmap?center=<$USER-LOCATION>&size=640x320&key=<$YOUR-KEY>"; // Include the user location in your request URL
$imagedata = file_get_contents($mapimg); // Retrieve the image server side
$src = base64_encode($imagedata); // Encode the image server side
$imagemap = '<img src="data:image/jpg;base64,'.$src.'">'; // Create a variable to insert the image into your page

Then within your PHP script to output the HTML you just include $imagemap wherever you want the map to appear.

miknik
  • 5,748
  • 1
  • 10
  • 26
  • Thanks for the response, but a static map won't cut it. Ideally I would have something *like*(i.e. I have tried this but it just prints out the URL to the html): Html: PHP: So obviously this doesn't hide the URL so I still think I need to go environment variable as suggested by google. But I am having trouble figuring out just how to do that. – Duncan Brain Sep 21 '17 at 15:59
  • I don't think that solves the problem you are trying to solve. The point of storing your key in an environment variable or outside of your project is so you can reuse your code with multiple clients or share your code within the developer community without sharing your key or having to go through all your code removing it. You code your project to use an environment variable in place of the key and then everyone who uses your code sets their key to that variable. The key in use for the project still gets output to the final HTML, it just makes sharing or reusing your code easy. – miknik Sep 21 '17 at 19:03
  • So it still outputs to html? I was not aware, I'm very new to server side. I was going on google's advice: support.google.com/googleapi/answer/6310037 . I found another stack I couldn't find beforehand that answers the question with some authority: https://stackoverflow.com/questions/39625587/how-do-i-securely-use-google-api-keys . I am counting the referrer restriction as sufficient, despite their possibly contradictory advice. However, if you or anyone else still has some reading material for creating environment variables and their usefulness I would still appreciate that! Thanks. – Duncan Brain Sep 22 '17 at 15:58
  • Environment variables are probably of little or no use to you if you are just starting out, they are kinda boring too. As the name suggests they relate to the environment where your code is running. Imagine you need to deploy the same code on 10 servers but they all have different file structures, database credentials etc. Instead of rewriting your code for each one you use environment variables in place of the root path and database credentials in your code and then set these variables on each machine you deploy on to match its specific configuration. – miknik Sep 23 '17 at 22:33
1

This stack has a similar question, see geocodezip's answer: How do I securely use Google API Keys (I looked but could not find this answer before posting the original question).

Basically what I gather is you must have the API_Key showing for Googles javascript to work, despite Googles somewhat contradictory advice here: https://support.google.com/googleapi/answer/6310037

If you know of some reading material for me or others about creating environment variables or their usefulness please do so, I am still interested in that!

Duncan Brain
  • 305
  • 4
  • 11