HTML表单Token验证原理与实现

• 后端渲染页面时，把 Token（比如从 session 或 JWT 中取）填进 <input type="hidden" name="csrf_token" value="xxx">
• Token 必须每次请求都刷新（至少在登录、敏感操作前），不能长期复用
• 别用 localStorage 或 cookie 自动带的值来替代表单字段——浏览器不会自动提交它们到 的 POST body 里

后端怎么校验表单里的 Token

收到 POST 请求后，先读 csrf_token 字段值，再和当前用户会话中存储的 Token 比对。不一致就立刻拒绝，返回 403 Forbidden。

• 比对必须是恒定时间的（如用 hmac.compare_digest()），防止时序攻击
• 校验失败时，不要透露“Token 过期”还是“Token 不存在”，统一返回模糊错误
• 如果用了框架（如 Django、Flask-WTF、Spring Security），优先走内置机制，别自己拼逻辑——CSRF_TOKEN 名字、存储位置、过期策略都可能有隐式约定

Ajax 提交表单时 Token 怎么传

XMLHttpRequest 或 fetch() 不会自动带上表单里的隐藏字段，得手动提取并附在请求体或 header 里。

• 从 DOM 里取值：document.querySelector('input[name="csrf_token"]').value
• POST JSON 时，把 Token 放进 body：{ "data": "...", "csrf_token": "xxx" }
• 或者放 header：headers: { 'X-CSRF-Token': token }（后端需对应读 header）
• 注意：如果后端同时支持表单提交和 Ajax，Token 存储方式要一致（比如都从 session 取），否则容易出现“表单能过、Ajax 失败”

为什么 Token 验证总失败

90% 是因为生命周期没对齐，而不是代码写错。

• 页面加载时生成的 Token，被用户开多个标签页反复刷新，旧页面的 Token 还在表单里，但服务端已更新——导致“明明刚打开的页面却报错”
• 后端用了分布式 session 但没共享 Token 存储（比如 Redis 没配对），A 机器生成，B 机器校验，查不到
• 前端用了 PWA 或 Service Worker 缓存了旧 HTML，表单里还是上一轮的 Token
• 表单 action 地址写成绝对路径但跨域了，浏览器发起预检请求（OPTIONS），而预检不带表单数据，后端没做放行，整个请求卡住

Token 校验本身很简单，难的是让前后端对“这个 Token 什么时候有效、在哪儿找、谁负责刷新”有一致预期。细节松动一点，整个防护就形同虚设。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML表单Token验证原理与实现》文章吧，也可关注golang学习网公众号了解相关技术文章。