Vector Tiles Security – Protecting Vector Tile Server Data on Amazon Web Services

amazon-web-servicespbfSecuritytile-servervector-tiles

I am deploying a Vector Tile Server on AWS with data I don't want to make publicly available and there are two main elements I want to cover regarding the security of the data

The tile server needs to be private. To accomplish this I need to set up an authentication method. I have this covered by using Cognito and serving the tile server with a Cloudfront distribution.
(And here is what I don't know how to fix) The tile server sends .pbf files (they can be downloaded from the network tab on the browser), even when I have users authenticating I would like to protect the data from them. Basically I don't want my authenticated users downloading the tiles from the pbf files

Is there any way to only show the data on the browser without sending the tiles in .pbf?

Another option is to encrypt/decrypt this tiles but how to accomplish this? Is there any docs or place with a how to on this?

Best Answer

Basically I don't want my authenticated users downloading the tiles from the pbf files

If you're sending data to the browser (which you are), there is nothing you can do to prevent users accessing that data. They already have it.

Another option is to encrypt/decrypt this tiles but how to accomplish this? Is there any docs or place with a how to on this?

This doesn't help you. If you're accessing the tiles over HTTPS, they're already encrypted - and the browser is decrypting them for the user. Again, if the browser has the data, the user has the data.

Related Solutions

Self-Hosting Mapbox Tiles – Guide to Self-Hosting Mapbox Vector Tiles

As pointed out by @Greg, instead of TileStream (my first attempt) you should use Tilelive to host your own vector tiles.

Tilelive isn't a server itself but a backend framework that deals with tiles in different formats from different sources. But it's based on Node.js so you can turn it into a server in a pretty straight-forward way. To read tiles from a .mbtiles source as exported by Mapbox Studio, you need the node-mbtiles tilelive module.

Side note: Current Mapbox Studio has a bug under Windows and OS X that prevents an exported .mbtiles file to show up at your chosen destination. Workaround: Just grab the latest export-xxxxxxxx.mbtiles file in ~/.mapbox-studio/cache.

I found two server implementations (ten20 tile server by alexbirkett and TileServer by hanchao) who both use Express.js as a web app server.

Here is my minimalistic approach which is loosely based on these implementations:

Install Node.js
Grab the node packages with npm install @mapbox/tilelive @mapbox/mbtiles express

Implement the server in the file server.js:

 var express = require('express');
 var http = require('http');
 var app = express();
 var tilelive = require('tilelive');
 require('mbtiles').registerProtocols(tilelive);

 //Depending on the OS the path might need to be 'mbtiles:///' on OS X and linux
 tilelive.load('mbtiles://path/to/osm_roads.mbtiles', function(err, source) {

     if (err) {
         throw err;
     }
     app.set('port', 7777);

     app.use(function(req, res, next) {
         res.header("Access-Control-Allow-Origin", "*");
         res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
         next();
     });

     app.get(/^\/v2\/tiles\/(\d+)\/(\d+)\/(\d+).pbf$/, function(req, res){

         var z = req.params[0];
         var x = req.params[1];
         var y = req.params[2];

         console.log('get tile %d, %d, %d', z, x, y);

         source.getTile(z, x, y, function(err, tile, headers) {
             if (err) {
                 res.status(404)
                 res.send(err.message);
                 console.log(err.message);
             } else {
               res.set(headers);
               res.send(tile);
             }
         });
     });

     http.createServer(app).listen(app.get('port'), function() {
         console.log('Express server listening on port ' + app.get('port'));
     });
 });

Note: The Access-Control-Allow-... headers enable cross-origin resource sharing (CORS) so webpages served from a different server may access the tiles.

Run it with node server.js

Set up the webpage using Mapbox GL JS in minimal.html:

 <!DOCTYPE html >
 <html>
   <head>
     <meta charset='UTF-8'/>
     <title>Mapbox GL JS rendering my own tiles</title>
     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.css' rel='stylesheet' />
     <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.js'></script>
     <style>
       body { margin:0; padding:0 }
       #map { position:absolute; top:0; bottom:50px; width:100%; }
     </style>
   </head>
   <body>
     <div id='map'>
     </div>
     <script>
       var map = new mapboxgl.Map({
         container: 'map',
         center: [46.8, 8.5],
         zoom: 7,
         style: 'minimal.json'
       });
     </script>
   </body>
 </html>

Indicate the location of the tile source and style the layers with the following minimal.json:

 {
   "version": 6,
   "constants": {
     "@background": "#808080",
     "@road": "#000000"
   },
   "sources": {
     "osm_roads": {
       "type": "vector",
       "tiles": [
         "http://localhost:7777/v2/tiles/{z}/{x}/{y}.pbf"
       ],
       "minzoom": 0,
       "maxzoom": 12
     }
   },
   "layers": [{
     "id": "background",
     "type": "background",
     "paint": {
       "background-color": "@background"
     }
   }, {
     "id": "roads",
     "type": "line",
     "source": "osm_roads",
     "source-layer": "roads",
     "paint": {
       "line-color": "@road"
     }
   }]
 }

Serve the webpage and rejoice.

[GIS] How to set Tomcat to completely prevent browser from caching the PBF vector tile

You might be better off avoiding GWC and hitting the WMS end point directly and modifying the HTTP Cache settings on the Layer Publishing tab. I'm not sure if that setting is still used if you go through GWC. Also using vector tiles seems like a lot of work for a rapidly changing data set, you might do better with simple png images.

Best Answer

Related Solutions

Self-Hosting Mapbox Tiles – Guide to Self-Hosting Mapbox Vector Tiles

[GIS] How to set Tomcat to completely prevent browser from caching the PBF vector tile

Related Question