防重放token必须由后端动态生成并绑定用户session，含签名与时效性，前端需在submit事件第一时间同步更新hidden input的value，且服务端须原子性校验并消费token。
hidden input 的 value 必须由后端动态生成，不能前端算
防重放 Token 要起作用，value 不能是固定字符串、不能是 Math.random()、也不能用客户端时间戳拼接——这些都可被复现或预测。真正有效的 Token 必须带服务端签名和时效性，比如用 HMAC-SHA256 签名的 session ID + 时间戳 + 随机盐，再 Base64 编码。
常见错误现象：value="abc123" 或 value="${token}" 却没在每次页面渲染时刷新 token；用户刷新页面后仍提交旧值，后端校验失败。
- 服务端渲染表单 HTML 前，必须生成新 Token 并存入当前用户的
session（如 Java 的HttpSession、Python Flask 的session、PHP 的$_SESSION） - Token 字符串直接写进
<input type="hidden" name="submit_token" value="xxx">的value属性里 - 禁止对含该字段的 HTML 做任何缓存（包括 Nginx、CDN、浏览器
Cache-Control），否则可能返回过期 Token
submit_token 提交后必须一次性消费
后端收到请求时，不能只比对 Token 是否存在，而要原子性地验证 + 清除（或标记为已使用）。否则两次相同请求可能都通过校验。
典型错误：只查 session.get("submit_token") == request.form.get("submit_token")，但没删掉 session 里的值——第二次请求照样能过。
- 推荐做法：用
session.pop("submit_token", None)（Python）或session.removeAttribute("submit_token")（Java）这类“取即删”操作 - 如果用 Redis 存 Token，用
GETDEL或DEL配合GET实现原子读取+删除 - 校验失败（Token 为空、不匹配、已失效）必须返回明确错误，且不执行业务逻辑
前端禁用按钮 + hidden 字段同步必须在 submit 事件开头做
很多人把 JS 更新 value 放在 change 或 click 里，结果用户快速连点或绕过交互直接提交，value 还是空或旧值。
正确时机只有一个：表单 submit 事件触发的第一时间，且要在默认行为发生前。
- 写法示例：
form.addEventListener('submit', e => {<br> const tokenInput = form.querySelector('input[name="submit_token"]');<br> if (tokenInput) tokenInput.value = document.getElementById('token_value').textContent;<br>}); - 不要用
document.getElementById().value = ...，优先用form.querySelector('[name="submit_token"]')，避免跨表单污染 - 禁用按钮代码必须和 Token 同步写在同一
submit回调里，顺序无所谓，但不能异步延迟
name 属性写错、type 拼错、value 没赋值，Token 就等于没传
浏览器根本不关心你“想”传什么，只认实际 DOM 结构。三个硬性条件缺一不可：type="hidden"（大小写敏感）、name 属性存在且前后端一致、value 属性有值（哪怕空字符串）。
错误现场：</input type="Hide"> 渲染成可见文本框；<input type="hidden" value="xxx"> 因缺 name 根本不提交；value 是 JS 动态赋的但 DOM 加载晚于脚本执行，提交时仍是空。
-
name必须和后端接收键名完全一致（如 PHP 读$_POST['submit_token']，那前端就得写name="submit_token"） -
type只接受字面量"hidden"，"HIDDEN"、"hide"、"text"都会降级显示 -
value属性必须显式写出，<input type="hidden" name="t">不会提交该字段，哪怕 JS 后续设了.value
name="order_submit_token" 和 name="comment_submit_token" 分开管理。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
