前端如何最大程度保障腾讯地图的接入安全

最近一个Vue项目中，要接入腾讯地图，功能要求如下：

1.在页面中显示地图（Javascript API）

2.根据输入的关键词联想相关的地址（WebService API）。

效果如下：

本来是一个很简单的需求，结果因系统的特殊性，硬是探索了很久。

1.0阶段

以往Vue项目中，也实现过类似功能，只需在项目的public文件夹中的index.html文件加入如下代码引入腾讯地图，然后在需要的地方初始化地图，并使用地图相关功能即可。

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=YOUR_KEY"></script>

上述写法容易暴露地图key，如果未做任何限制的话，他人只要拿到上述key，就可以使用WebService API，占用我们的配额，影响我们系统的使用，造成金钱的损失。

腾讯地图提供了三种方式来避免这种情况的发生，分别是域名白名单、授权IP、签名校验。

我们之前的项目中，通过配置域名白名单的方式，来防止他人盗用地图key来使用WebService API 。

但是现在的这个项目，系统网址是ip网址，没有域名，不能通过配置域名白名单的方式来保障安全。

所以尝试了一下授权ip的方式，把系统网址对应的ip配上去，结果功能不能正常使用。

将本机ip配上去，才能正常使用。这样的授权ip方式太局限了。

2.0阶段

依然想尝试通过授权ip的方式来保障接入安全，跟后端商量了一下，看改变引用WebService API的方式，能不能成功，所以做了如下尝试：

首先，将html文件中的地图接入方式改为如下, 去掉了libraries=service，也就是去掉了服务类附加库。

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script>

然后通过后端代理的方式，在页面需要的地方单独请求功能接口，如下：

******/mapapi/ws/place/v1/suggestion?keyword=11&key=YOUR_KEY

结果还是说ip配置有问题：

最后又试了一下前端直接请求腾讯接口：

https://apis.map.qq.com/ws/place/v1/suggestion?keyword=11&key=YOUR_KEY

也是报上述错误，只是提示的ip不同而已。

3.0阶段

如果仍由前端接入腾讯的WebService API，前端还能做些什么来保障接入安全。

一番探索过后，总结如下：

1.改变地图文件加载方式：由系统初始化时加载地图文件改为异步加载

具体做法是，在html文件中不再引入地图文件，而是在需要的页面中加入如下代码，实现异步加载。

 mounted() {
    const mapScript = document.createElement('script')
    mapScript.type = 'text/javascript'
    mapScript.src = 'https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY'
    document.body.appendChild(mapScript)
    mapScript.onload = () => {
     //初始化地图
      this.initMap()
    }
  },

这样做的好处是：

1）只有进入系统的用户才有可能获知地图key（之前的方式不能登录系统的人也能获知）。

2）按需加载，不占用首屏性能

2.双保险，在腾讯后台配置签名校验。

配置完后，可在项目代码中加入如下代码实现前端签名校验，并在需要的地方进行getMapSuggestion方法调用。

import request from '@/utils/mapRequest'
import md5 from 'md5'
​
const key = YOUR_KEY
const sk = YOUR_SK
​
export function getMapSuggestion(keyword) {
  const params = {}
  params.key= key
  params.keyword = keyword
  const sig = md5(`/ws/place/v1/suggestion?key=${key}&keyword=${keyword}${sk}`)
  params.sig = sig
  return request({
    url: '/ws/place/v1/suggestion',
    method: 'get',
    params: params
  })
}
  

这样做的好处是：

要同时获知地图key和签名校验码才能盗用WebService API。

但如果是前端进行签名校验，在请求地图功能接口时，还是会暴露签名校验码。

所以，综上，在不能进行域名白名单或授权ip控制时，WebService API的接入由后端以签名校验的方式接入，这样即使在客户端暴露了地图key，签名校验码因在服务端也不容易暴露。