HTML5不提供地图服务，所谓“调用地图”实为JS调用第三方地图SDK的Web API；地址被篡改源于前端传参不可信，必须由后端用服务端密钥调用地图API二次校验地址合法性。
HTML5 本身不提供地图服务，所谓“HTML5调用地图”实际是通过 JavaScript 调用第三方地图 SDK（如高德、百度、腾讯地图）的 Web API。地址被恶意篡改的问题，本质是前端传参不可信——你把地址字符串直接拼进 geocoder 或 marker 创建逻辑里，攻击者只要打开开发者工具改一下 DOM 或 JS 变量就能伪造位置。
为什么前端拼接地址必然不安全
所有客户端代码（包括 HTML、JS、URL 参数）都可被用户任意修改。比如你写：map.setCenter({ address: document.getElementById('addr').value })，攻击者只需在控制台执行 document.getElementById('addr').value = '中南海' 就能触发错误定位。
- 浏览器无权限校验地址真实性，连“是否存在该街道”都做不到
- 地图 SDK 的
geocode接口只做解析，不验证语义合理性（例如“火星朝阳区酒仙桥路1号”也能返回坐标） - 若后端完全信任前端传来的经纬度或地址，可能造成业务数据污染（如虚假打卡、伪造配送地址）
必须由后端完成地址合法性校验
真正有效的防护不是堵前端，而是让前端只提交原始输入，由后端调用地图服务商的逆地理编码或结构化地址解析接口做二次核验。
- 前端提交用户填写的地址文本（如
addr_input），不自行调用geocoder - 后端收到请求后，用服务端密钥调用高德
/v3/geocode/geo或百度/geocoding/v3/接口 - 检查返回的
status === 0、count > 0，且location坐标落在合理行政区域内（如限定某市，就比对province和city字段） - 若校验失败，返回明确错误（如
{ code: 400, msg: "地址无法识别，请输入中文标准地址" }），前端仅展示提示，不渲染地图
前端能做的有限但关键防护
前端不能替代后端校验，但可以减少无效请求、提升体验并增加篡改成本：
立即学习“前端免费学习笔记（深入）”；
- 禁用用户直接输入坐标：移除
lat/lng手动输入框，只保留地址搜索框 + 地图点击选点（点击获取的lnglat仍需后端校验） - 使用地图 SDK 的
AMap.Autocomplete或BMap.Autocomplete组件，强制用户从下拉建议中选择，避免自由输入乱码地址 - 提交前简单过滤：用正则剔除明显异常字符（如
/[{}[\]]/g），防止 XSS 影响页面，但这对地址真实性无作用 - 所有地图操作绑定到用户主动行为（如点击搜索按钮），而非监听
input实时触发地理编码
最常被忽略的一点：很多团队以为「前端加了防调试」或「混淆了 JS」就能防篡改，其实毫无意义——地址参数最终还是以明文形式发往后端 API，只要抓包改请求体就行。真正的防线只有一条：后端不信任任何前端传来的地理信息，每一次坐标落地都必须经过权威地图接口的实时解析与行政归属校验。
