input type="hidden"用于传递服务端已确认、不可编辑但必须提交的上下文值，如数据库主键、CSRF token、多步骤表单状态等；删掉会导致后端报错或逻辑错误，且其值可被前端篡改，绝不能用于存储敏感数据。
input type="hidden 不是用来藏敏感数据的，而是用来传服务端已确认、不可编辑但必须提交的上下文值——比如数据库主键、CSRF token、多步骤表单的中间状态。删掉它，后端大概率收不到关键字段，直接报错或更新错记录。
什么时候非用 input type="hidden 不可
不是“想隐藏就用”，而是后端逻辑强依赖某个值，且该值不能由用户输入、也不该被用户看见或修改：
- 编辑页面提交时必须带
id：页面加载时查出id=105，提交表单若没这个字段，后端根本不知道要改哪条记录 - 多步骤表单跨页传参：form2.php 需要把
$_POST["userId"]交给 form3.php，不用 hidden 就得重查数据库或强绑 session - CSRF token 校验：每个 POST 表单都得附带一个一次性 token，用户不能输、不能改、但必须随请求发出，
input type="hidden"是标准承载方式 - 区分多个提交按钮：同一表单里有「保存」「保存并退出」「草稿」三个按钮，靠
onclick="document.querySelector('input[name=action]').value='exit'"动态写入 hidden 字段，后端按action值分流处理
name 和 value 哪个更容易出问题
name 错了，后端压根收不到；value 错了，后端收到的是脏数据——两者都致命，但 name 更常被忽略。
-
name拼错：前端写name="prod_id"，后端却读$_POST["productId"]→ 返回undefined或空字符串 -
name缺失：只写<input type="hidden" value="123">→ 浏览器不提交该字段（HTML 规范要求 name 存在才参与序列化） -
value静态写死：比如value="123"，但实际需要从 URL 参数或 API 异步取值 → 提交时是过期或错误的 ID -
value被覆盖：页面里不小心写了两个name="token"，浏览器只提交最后一个，后端校验失败
JS 动态赋值时最常踩的坑
DOM 没就绪、选错元素、异步没等完——这些都会导致提交时 value 为空。
立即学习“前端免费学习笔记（深入）”；
- 脚本放在
里就执行document.getElementById("token")→ 找不到元素，报错或静默失败 - 用
getElementsByName("csrf")得到 NodeList，直接链式调用.value→ 报TypeError，应改用querySelector('input[name="csrf"]') - CSRF token 从接口异步获取，但用户秒点提交按钮 → JS 还没把值写进 hidden 字段，提交的就是空
- 把
name当作 DOM ID 用：document.getElementById("user_id")找不到，其实该用querySelector('input[name="user_id"]')
为什么不能把价格、角色、权限塞进 hidden 字段
因为用户打开 DevTools，两秒就能找到并改掉 value——它只是“视觉隐藏”，不是“逻辑隔离”。
-
<input type="hidden" name="price" value="99.9">→ 攻击者改成0.1直接提交 -
<input type="hidden" name="role" value="user">→ 篡改为"admin"绕过前端权限判断 - 真正该做的：只传不可伪造的标识（如数据库自增主键、JWT 中已签名的 ID），所有敏感判断和校验必须在服务器端重做
- 别信任何前端传来的“权限字段”“金额字段”“开关状态”，后端必须查库、验签名、比对 session
真实项目里最容易被忽略的，是以为只要页面上有这个 input 元素，后端就一定能拿到值——其实只要 name 缺失、拼错、或 JS 更新逻辑被绕过（比如禁用 JS、快速点击、缓存旧页面），值就丢了或错了。
