How to create a map layout with hidden data?

Question

I've created an API for a personal project, which returns some GeoJSON data.

Currently, this data is basically returned to the client to be displayed on a map. However, the client has (obviously) a full access to the returned data, and it must implement itself the necessary Javascript to display it.

Something like :

$.ajax({
    url: "url/to/my/api",
    type: "POST",
    data: JSON.stringify({ /* some parameters */ }),
    contentType: 'application/json',
}).done(function(data) {
    data.addTo(map); 
    //data contains all the geo-coordinates, visible in browser console, that I'd like to hide
});

Question : Is there any way to "obfuscate" the data in order to let the client display it on a map but deny him the right to look at the data ?

For example, Google Maps API implements some traffic layer and we can't look at the data that make up the subway lines, just display it :

var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);

How to implement something similar, to "hide" the returned data to the client and just let him the possibility to display it on a map ?

Thank you

What attributes (or types of attributes) are needed for the map, that you don't want to share with the client? — the holla, Apr 02 '20 at 21:48
Actually, I just want my clients add a layer on their map with my data, but I don't want they can acess (even in browser's console) to this data. The data returned by my API is a bunch of lat/lng and i'd like to keep them private. Exactly the same way as the Google's Transit Layer I quoted in my original question. — user2687153, Apr 03 '20 at 14:55

score 3 · Answer 1 · answered Apr 04 '20 at 11:39

Gmaps doesn't "return" any transit data to the client -- it regenerates the image tiles as soon as you set the transitLayer to the map instance:

vs.

There's plenty of (geo)JSON uglifiers/obfuscators, the simplest of which might be base64 encoding (technically just a trivial visual obfuscator) in the backend and then decoding in the frontend using atob.

Example: {"type":"FeatureCollection","features":[]} b64-encoded is eyJ0eXBlIjoiRmVhdHVyZUNvbGxlY3Rpb24iLCJmZWF0dXJlcyI6W119. But note that everyone who's been around will see right through this...

Before you even consider obfuscating, make sure your API endpoints are secured & have proper CORS headers. Secondly, you may want to track who accessed your API and when.

Afterwards, this becomes a cryptographic question, not a geojson one!

Hey, thanks for this answer, I didn't know Google Maps regenerates the image tiles when I set the `transitLayer`, I now undestand why I can't access their metro lines data. I think my API endpoints are secured and I have proper CORS headers. I also track who access my API and when, but it seems whatever I implement, my data could be decrypted client side... — user2687153, Apr 05 '20 at 15:50

score 1 · Answer 2 · answered Apr 05 '20 at 07:59

You cannot achieve absolute security of whatever comes to browser and is consumed by JS. It doesn't matter how hard you encode your data, it must be decoded before the JS map rendering engine would be able to use it, and this is where it will be intercepted by whoever is interested in it.

Probably the only reliable way is to make your API to serve pre-made image overlays that your clients would put on their maps. In case of GMaps they can use custom overlays for that.

That's what i feared... I didn't know about Custom overlays, I'm going to take a look at it, thanks for the information — user2687153, Apr 05 '20 at 15:52

How to create a map layout with hidden data?

2 Answers2