Hide file url and encrypt gpx data about leaflet-elevation HOT 9 CLOSED

Hi @hupe13,

it depends a bit on what you really want to achieve.

BTW, here is a hint:

var controlElevation = L.control.elevation({
  ...
  downloadLink: 'modal', // see: https://github.com/Raruto/leaflet-elevation/blob/ea155564475c44941cb81a9df3eaf8d633ed90fc/src/control.js#L1300-L1312
  ...
  }).addTo(map);

// Load your track from a proxy server
controlElevation.load("https://example.com/track.php?id=via-emilia.gpx"); // you can secure it by checking some user info (e.g. session cookies)

/**
 * Dialog modal: conditionally download gpx file after Accepting or Rejecting Terms and Conditions
 */
(function() {
  let modal = document.querySelector('#myModal');

  // see: https://github.com/GoogleChrome/dialog-polyfill
  dialogPolyfill.registerDialog(modal);

  modal.filePath = '';

  modal.addEventListener('close', () => {
    if ('OK' !== modal.returnValue) {
      // reject event
    } else {
      // accept event
      if (typeof modal.filePath == "object" && typeof modal.filePath.confirm == "function") {
        modal.filePath.confirm();
      } else if (typeof modal.filePath == "string" && modal.filePath.length > 0) {
        location.href = modal.filePath;
      }
    }
    document.scrollingElement.style.overflow = '';
  });

  document.addEventListener("eletrack_download", function(e) {
    if (e.detail && e.detail.confirm) {
      document.scrollingElement.style.overflow = 'hidden';
      modal.filePath = {
        confirm: e.detail.confirm
      };
      modal.showModal();
    }
  });
})();

<dialog id="myModal" role="dialog">
  <form method="dialog">
    <button type="submit" autocomplete="off">×</button>
    <h3 class="modal-title">Terms and Conditions</h3>
    <div class="modal-body">
      <p>Et atque veniam modi ut sunt quo libero. Fuga debitis qui culpa voluptas tenetur est. Cupiditate esse labore nihil.</p>
      <p>Aut rerum laudantium consequatur maxime maiores soluta et. Eligendi et sed praesentium ea numquam quas. Vero esse veritatis qui omnis autem sunt est. At ut eos consequuntur quis est. Accusantium quae expedita facilis officia quae atque voluptatem sed. Nihil totam voluptates quia.</p>
      <p>Rerum itaque impedit et incidunt perspiciatis. Sed dolor est rem rem dolorem quae deleniti qui. Blanditiis consectetur ratione qui fuga unde deleniti neque. Laborum cumque rem unde non omnis odit quidem. Autem id tenetur molestiae.</p>
      <p><label><input type="checkbox" autocomplete="off" onchange="document.querySelector('.modal-btn[value=\'OK\']').disabled = !this.checked;"> I agree to the Terms and Conditions</label></p>
    </div>
    <div style="text-align: right;">
      <button type="submit" autocomplete="off" value="OK" class="modal-btn" disabled>Accept</button>
      <button type="submit" autocomplete="off" class="modal-btn">Decline</button>
    </div>
  </form>
</dialog>

For more info:

👋 Raruto

from leaflet-elevation.

it depends a bit on what you really want to achieve.

The visitor of a website using elevation should not see the url of the trackfile in the developer console.
I will try your hint. Thank you very much.

from leaflet-elevation.

DownloadLink it is not what I mean.

// Load your track from a proxy server
controlElevation.load("https://example.com/track.php?id=via-emilia.gpx"); // you can secure it by checking some user info (e.g. session cookies)

But this looks good, I can do something with it. I hope.

from leaflet-elevation.

Unfortunately I am not successful. The big "problem" is the JavaScript "fetch". I managed to protect the URL, but you can still get raw GPX data in browser console, if you check the URL "Response" tab.

from leaflet-elevation.

you can get still view raw GPX data in the browser console, if you check the URL "Response" tab.

I assume this is what you're referring to:

If that's safe enough for you, just code a your own encryption algorithm (or copy-paste one from the net..).

So the more "stubborn" guys will just have to take a little more time to extrapolate your data.

Be aware, that doing like so:

• you will also have to take care of code the whole process: "download" --> "decoding" --> "loading" at your own on the client side (ie. before consuming that data within the leaflet-elevation plugin).

• you will also have to remove every global variable that can be used to extract to such data in a JSON format (eg. the L.Map instance)

👋 Raruto

from leaflet-elevation.

Hi Raruto,

for the moment I am able to have a proxy and rewrite the original url from gpx file. This url is valid only once. I can encrypt the gps data. In browser console I see the encrypted data. To decrypt I need to change

I can change the code directly, this works, but you surely know (as always) a better way.

Yes, and I know there won't be a 100 percent solution, but I can try to make it as hard as possible to get the gps data.

Thank you very much.

from leaflet-elevation.

Hi hupe,

This url is valid only once. I can encrypt the gps data. In browser console I see the encrypted data.
I can change the code directly, this works, but you surely know a better way.

you might also consider monkey patching the global fetch function.

// somewhere before (write a wrapper function for: `fetch` --> `decrypt`)

globalThis.fetch = yourCustomFetchWrapper;

...

// so any latter `response.text()` call will always return "decrypted" data (ref: `L.Control.Elevation::_loadFile(url)`)

fetch(url).then((response) => response.text()) 

Related info

• https://blog.logrocket.com/intercepting-javascript-fetch-api-requests-responses/
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy (a modern way to traditional/lazy "monkey patches")

👋 Raruto

from leaflet-elevation.

Surprisingly it was not difficult to change this function:
https://github.com/hupe13/extensions-leaflet-map-testing/blob/f734ddcc0c873ef376583565feb3291a63e21fae/php/elevation.php#L45-L53

But see the notes.

from leaflet-elevation.

I'm closing the issue. Since the code is executed on the client (browser), it is impossible to really hide the data.
Thank you very much for your help.

from leaflet-elevation.