开发测验应用：如何实现客户端防篡改的安全JS计时器？

首先明确：纯客户端JS计时器不可能做到完全无法篡改——用户可以通过浏览器调试工具修改代码、冻结本地时间甚至直接篡改提交的数据。但我们可以通过「客户端加固+服务器端校验」的组合方案大幅提高篡改难度，实现相对可靠的计时：

1. 服务器端基准令牌+客户端加密提交 #

• 页面加载问题时，服务器生成一个包含服务器当前时间戳、问题ID、用户ID的加密令牌，返回给客户端。
• 客户端启动本地计时器，记录开始时间；用户提交答案时，计算本地耗时，再将「耗时+加密令牌」一起发送给服务器。
• 服务器端解密令牌，取出当时的服务器时间，用当前服务器时间减去令牌中的时间得到真实时间差，再和客户端提交的耗时对比：如果偏差超过合理阈值（比如5秒，可根据网络情况调整），则判定为异常。
• 核心代码示例：

  // 客户端逻辑
  const serverToken = "服务器返回的加密令牌"; // 内含服务器时间戳等敏感信息
  const startTime = Date.now();
  
  // 用户提交答案时
  const endTime = Date.now();
  const clientDuration = endTime - startTime;
  fetch('/submit-answer', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      answer: '用户输入的答案',
      duration: clientDuration,
      token: serverToken
    })
  });
  

  服务器端解密令牌后，通过自身时间计算真实耗时范围，以此校验客户端数据的合理性。

2. 定时心跳上报（强化校验） #

• 客户端每隔固定时间（比如10秒）向服务器发送心跳包，包含当前计时进度和加密令牌。
• 服务器记录每次心跳的时间和对应的计时进度，用户提交答案时，可通过心跳记录还原真实时间线，对比客户端提交的总耗时。
• 这种方式能有效防止用户冻结本地时间或篡改最终耗时，但会增加服务器请求量，需根据业务场景调整心跳频率。

3. 代码混淆与调试干扰（辅助加固） #

• 用代码压缩混淆工具（如Terser）对计时相关JS代码进行混淆，增加用户读懂和修改代码的难度。
• 检测浏览器调试工具是否开启，若检测到则提示用户关闭或暂停计时（仅能拦截普通用户，资深开发者仍可绕过）。

总结 #

没有绝对安全的客户端计时方案，必须结合服务器端的权威时间校验才能实现可靠的计时逻辑。核心思路是：以服务器时间为基准，客户端计时仅作参考，最终由服务器验证数据的合理性。

内容的提问来源于stack exchange，提问作者Nisarg Jani