本文，讲的是有关安全的话题。

概述

GIS的数据一直是比较敏感的，所以数据安全也是一个“老生常谈”的话题。本文利用geoserver的矢量切片插件对数据进行发布，通过自己写的中间接口实现矢量切片的加密，并修改mapboxGL源码，添加数据的解密与展示。

实现效果

image.png

实现

1. MapboxGL 2.X离线时候的token强认证

2.X的mapboxGL是有token的强制认证的，离线的时候我们可以通过修改源码取消这个强制认证。

token.PNG token2.PNG token1.PNG

2. geoserver矢量切片加密

大致流程如下：

image.png

1. 修改vector_tile_source.js

   
   image.png

        const params = {
            request,
            data: undefined,
            uid: tile.uid,
            tileID: tile.tileID,
            tileZoom: tile.tileZoom,
            zoom: tile.tileID.overscaledZ,
            tileSize: this.tileSize * tile.tileID.overscaleFactor(),
            type: this.type,
            source: this.id,
            pixelRatio: browser.devicePixelRatio,
            showCollisionBoxes: this.map.showCollisionBoxes,
            promoteId: this.promoteId,
            isSymbolTile: tile.isSymbolTile,
            metaData: this._options.metaData
        };

2. 修改vector_tile_worker_source.js

   
   image.png

// 添加解密
import CryptoJS from 'crypto-js'
const key = CryptoJS.enc.Utf8.parse("密钥");  //十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse('密钥偏移量');   //十六位十六进制数作为密钥偏移量

function StringToUint8Array(str){
    var arr = [];
    for (var i = 0, j = str.length; i < j; ++i) {
        arr.push(str.charCodeAt(i));
    }

    return new Uint8Array(arr);
}

function Decrypt(word) {
    const encryptedHexStr = CryptoJS.enc.Hex.parse(word);
    const srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    const decrypt = CryptoJS.AES.decrypt(srcs, key, {iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7});
    const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
}

image.png

    const makeRequest = (callback) => {
        let request = null
        if (params.metaData && params.metaData.type === 'geoserver') {
            request = fetch(params.request.url).then(res => res.json()).then(res => {
                const str = Decrypt(res.data)
                const data = StringToUint8Array(str)
                callback(null, {
                    vectorTile: skipParse ? undefined : new vt.VectorTile(new Protobuf(data)),
                    rawData: data
                });
            })
        } else {
            request = getArrayBuffer(params.request, (err: ?Error, data: ?ArrayBuffer, cacheControl: ?string, expires: ?string) => {
                if (err) {
                    callback(err);
                } else if (data) {
                    callback(null, {
                        vectorTile: skipParse ? undefined : new vt.VectorTile(new Protobuf(data)),
                        rawData: data,
                        cacheControl,
                        expires
                    });
                }
            });
        }

        return () => {
            request.cancel();
            callback();
        };
    };

测试服务端代码

const express = require('express');
const request = require("request");
const secret = require("./secret");
const fs = require('fs')

const app = express();

// 自定义跨域中间件
const allowCors = function (req, res, next) {
  res.header('Access-Control-Allow-Origin', req.headers.origin);
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Credentials', 'true');
  next();
};
app.use(allowCors);//使用跨域中间件

app.get('/tile/:z/:x/:y', function (req, res) {
  const {x, y, z} = req.params
  const url = `http://localhost:8086/geoserver/gwc/service/tms/1.0.0/sfmap%3Achina@EPSG%3A900913@pbf/${z}/${x}/${y}.pbf`
  // 直接转发
  // request(url).pipe(res)
  // 加密转发
  const path = `./tiles/${z}-${x}-${y}.mvt`
  const file = fs.createWriteStream(path)
  request(url).pipe(file)
  file.on('finish', function() {
    const buffer = fs.readFileSync(path)
    let str = secret.Uint8ArrayToString(buffer)
    str = secret.Encrypt(str)
    res.format ({
      'text/json': function() {
        res.send({
          type: 'geoserver',
          data: str
        });
        file.close();
      }
    });
  });
})
const server = app.listen(18081, () => {
  console.log("应用实例，访问地址为 http://localhost:18081/tile/0/0/0")
})

// 加密方法
function Encrypt(word) {
  let srcs = CryptoJS.enc.Utf8.parse(word);
  let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
  return encrypted.ciphertext.toString().toUpperCase();
}

前端展示代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>白天不懂夜的黑</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="../dist/mapbox-gl.css" rel="stylesheet" />
    <style>
        html, body, #map {
            padding: 0;
            margin: 0;
            overflow: hidden;
            height: 100vh;
        }
    </style>
</head>

<body>
<div id="map">
</div>
<script src="../dist/mapbox-gl-unminified.js"></script>
<script>
    var mapStyle = {
        "version": 8,
        "name": "Dark",
        "sources": {
            "XYZTile": {
                "type": "raster",
                "tiles": ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
                "tileSize": 256
            },
            "XYZVectorTile": {
                "type": "vector",
                "scheme": "tms",
                "tiles": [
                    "http://localhost:18081/tile/{z}/{x}/{y}"
                ],
                "metaData": { // 原始没有，新加的
                    "type": "geoserver"
                }
            }
        },
        "layers": [{
            "id": "XYZTile",
            "type": "raster",
            "source": "XYZTile",
            "minzoom": 0,
            "maxzoom": 22
        }, {
            id: 'province',
            type: 'line',
            source: 'XYZVectorTile',
            'source-layer': 'bou2_4p',
            paint: {
                'line-color': 'rgba(255,0,0,0.49)',
                'line-width': 1.5
            }
        }]
    };

    var map = new mapboxgl.Map({
        container: 'map',
        maxZoom: 18,
        minZoom: 0,
        zoom: 3,
        center: [107.01325543038672, 22.144192102953994],
        style: mapStyle,
        attributionControl: false
    });
</script>
</body>
</html>