1
\$\begingroup\$

Explaining the idea and first steps

Today, I had the idea to do a website which displays my current position. I searched in the App Store for an App and found one named SendLocation. This App provides an interface for sending GET requests to an server with some geometrical data. This is how the data gets send:

http://yourserver.com/yourscript.php?lat=***&lon=***&speed=***&heading=***&vacc=***&hacc=***&altitude=***&deviceid=**&battery=***&ts=***&quick=***&background=***

File Structure

./location.php
./data.json
./index.html

Writing the server side script

After setting the app up and achieving the connection, I wrote an php script to get the data and store it into an JSON file to use it for example on a website. I don't want to set up a database for this and want to have this in an accessible file, so storing it in a .json file was totally easy and fast.

<?php

  if (file_exists('data.json')) {
      $current_data = file_get_contents('data.json');
      $array_data = json_decode($current_data, true);
      $formdata = array(
            'lat' => $_GET['lat'],
            'lon' => $_GET['lon'],
            'speed' => $_GET['speed'],
            'heading' => $_GET['heading'],
      );
      $array_data[] = $formdata;
      $final_data = json_encode($array_data);
      if (file_put_contents('data.json', $final_data)) {
          echo 'Data saved successfully';
      }
  } else {
      echo 'JSON File not exits';
  }

Access the data from the frontend

I am going on with parsing the .json file and get the data of the last entry which is my current likely position. After, with the lat and lon, I do a Google Maps API call and get my real name position and log it to the console (yet).

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>This is my location</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
</head>

<body>
  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script>
    $(document).ready(function () {

      $.ajaxSetup({
        cache: false
      });
      $.getJSON("data.json").then(function (json) {
        // get latest position
        var lastElement = json[json.length - 1];

        // extract coordinates from position
        var lat = lastElement.lat;
        var lon = lastElement.lon;
        console.log(lat);

        // get name of coordinates
        getAddress(lat, lon);

        // get adress from google
        function getAddress(latitude, longitude) {
          var key = "api-key-goes-here";
          $.getJSON("https://maps.googleapis.com/maps/api/geocode/json?latlng=" + latitude + "," +
            longitude + "&key=" + key,
            function (json) {
              console.log(json);
              console.log(json.results[9].formatted_address);
            });
        }
      });

    });
  </script>
</body>

</html>

Screenshots of console output

screenshot of console

My questions

  1. How can I hide the API key of the Google Map service to make it more secure?
  2. Which improvements can be made to make the GET writing the .json more safe? I though about limit the writing to 3 a day or similar.
  3. How can I hide the data.json from Google or normal visitors of my page, that only my code can access the file, is this even possible?
  4. What can I do to make the JS faster and maybe more secure?
  5. What else can be done?

Any feedback really appreciated.

\$\endgroup\$
  • \$\begingroup\$ To the close voters: this is not a feature request. This is a request for review with specific questions because the OP has thought well enough ahead and acknowledges the issues the code currently has. \$\endgroup\$ – Mast Jun 3 at 6:55
1
\$\begingroup\$
  1. One thing you can do to secure your Google API key is to make the whole request to Google Map API on the server. So, instead of having a call from the frontend to Google API, you create a new GET request on the server that just wraps the call to Google API. And then, from your website, just make a request to your server instead to Google API.

  2. If by safe you mean "I want every request to be written in the file and not to lose any data because of parallel requests", then you need some sort of locking mechanism. I'm not a PHP developer, and I'm not sure what's the best way to achieve this. A quick search on the internet for PHP lock resulted in this and this. So once you have some way of locking, you just need to surround your the true part of your condition with the locking mechanism.

  3. You can do so by configuring your web server. If you're using Apache, then you can take a look at this SO question.

  4. I don't see any problem with your JS. You are using JQuery for making requests to the server and I guess this is fine. If you would to query for some HTML element, then I think that native APIs outperform JQuery, so that would be a thing to take into consideration. Maybe consider using native Fetch API if you use JQuery only for the server call. This will only speed up the page load time, since the browser won't need to load the remote library.

  5. I don't have anything else to add.

\$\endgroup\$
  • \$\begingroup\$ thank you very much, the help is really appreciated. maybe there are some other answers and I leave this answer for now with not marking it as the accepted one. will do that if there are no other answers. \$\endgroup\$ – Felix May 29 at 19:13
  • 1
    \$\begingroup\$ I'm not here for the "most accepted answers", I'm here to spread the knowledge, so no worries :) Glad you find it helpful. \$\endgroup\$ – Pritilender May 29 at 19:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.