在html表单中添加csrf Token需后端动态注入隐藏字段，每次请求刷新，ajax提交时需手动获取并传入body或header，后端校验须恒定时间比对且统一错误提示。
怎么在 HTML 表单里加 CSRF Token
直接在 <form></form> 里塞一个隐藏字段，值从后端动态注入。不是前端自己生成，也不是写死，否则毫无防护意义。
- 后端渲染页面时，把 Token（比如从 session 或 JWT 中取）填进
<input type="hidden" name="csrf_token" value="xxx"> - Token 必须每次请求都刷新（至少在登录、敏感操作前），不能长期复用
- 别用
localStorage或cookie自动带的值来替代表单字段——浏览器不会自动提交它们到<form></form>的 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 什么时候有效、在哪儿找、谁负责刷新”有一致预期。细节松动一点，整个防护就形同虚设。