cPanel Question posted in
The official documentation can be seen here.

How do I create environment variables to protect my Google Maps API Key(or any other secret value) for my website? – CPanel

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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!


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search