纯前端无法实现可靠签到打卡，因需防伪造、验时效、留凭证；仅用getcurrentposition()易被篡改坐标、缓存旧值或伪造时间，须前后端协同校验精度、时间差、设备指纹及地理围栏。
浏览器里直接用 navigator.geolocation 获取位置是可行的，但“签到打卡”这个需求本质不是纯前端能闭环的事——它必须防伪造、验时效、留凭证，否则用户随便改个坐标就能打卡成功。
为什么不能只靠 getCurrentPosition() 就算完
很多人一上来就调用 navigator.geolocation.getCurrentPosition() 拿经纬度，再发给后端存起来。这在测试环境看着没问题，上线后立刻暴露问题：
- 用户手动开启飞行模式再关掉，
Geolocation可能返回缓存旧坐标（尤其 Android WebView） - Chrome 120+ 对非 HTTPS 页面默认禁用
geolocation，HTTP 站点直接拒绝请求 - 用户用模拟器、Frida 注入或浏览器插件（如 Location Guard）轻松伪造坐标
-
accuracy字段常为 0 或极大值（比如 5000 米），你根本不知道这位置准不准
怎么加一层基础防伪（不依赖后端改造）
至少做三件事，让普通用户无法随手绕过：
- 检查
position.coords.accuracy，超过 30 米直接提示“定位精度不足，请到开阔地重试” - 调用时传
{ enableHighAccuracy: true, timeout: 8000, maximumAge: 0 }，禁用缓存、强制实时定位 - 同时获取
position.timestamp和客户端Date.now()，两者差值若 > 5 秒，说明时间被篡改或系统异常 - 额外读一次
navigator.connection.effectiveType和screen.width，和位置一起发给后端——不是用来验证，而是作为设备指纹辅助判断异常行为
示例片段：
navigator.geolocation.getCurrentPosition(
(pos) => {
if (pos.coords.accuracy > 30) {
alert("定位不准，请重试");
return;
}
const drift = Math.abs(pos.timestamp - Date.now());
if (drift > 5000) {
alert("设备时间异常，无法打卡");
return;
}
// 此时才允许提交
},
(err) => console.error(err.code, err.message),
{ enableHighAccuracy: true, timeout: 8000, maximumAge: 0 }
);
后端必须校验的三个硬指标
前端传来的坐标再“干净”，后端也得自己拦一道：
- 查该用户今天是否已打卡（按
user_id + DATE(created_at)唯一约束） - 用 PostGIS 或简易距离公式（如 Haversine）算该坐标离预设打卡点（比如公司地址）是否 ≤ 100 米；别信前端传的
distance - 检查请求头
User-Agent是否含MicroMessenger或QQ，如果是，且Sec-Fetch-Site为none，大概率是微信内嵌浏览器静默授权失败导致的伪造请求，直接拒掉
真要可靠，就得放弃纯 Web 方案
如果这是考勤系统、涉及绩效或法律效力，HTML 页面注定做不到可信签到。iOS/Android 原生 App 能调用更底层的定位 API（如 iOS 的 CLLocationManager 启用 allowBackgroundLocationUpdates），还能检测越狱/root、模拟器特征、GPS 卫星数等维度。Web 端最多做到“比随便填强一点”，别把它当生产级方案用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
