input type="hidden" 和 display: none 均无法保护敏感数据，因其值仍可被用户通过 DevTools 查看或修改；敏感信息必须由后端生成并校验，前端仅传递不可篡改令牌。
不能靠前端隐藏来保护敏感元素——input type="hidden 不是保险柜，display: none 也不是锁。所有出现在 HTML 或 JS 中的敏感值，用户两秒就能在 DevTools 里改掉或看到。
为什么 input type="hidden" 不该放敏感数据
input type="hidden" 只是不渲染，但 value 明文写在 HTML 源码里，右键「查看页面源代码」或 Network → Form Data 标签页直接可见。常见误用包括：
- 把
user_role设为"admin"—— 攻击者改成"superadmin"就能越权 - 塞
price="99.99"—— 改成"0.01"提交后资损 - 传
api_key或session_token—— 等于公开分发密钥
真正该做的：这些字段由后端生成（如 JWT、HMAC 签名字符串），前端只回传不可篡改的令牌；后端收到后必须重新查库校验权限和有效性。
display: none 的表单字段仍会提交，但会干扰验证
用 style="display: none" 包裹 input type="text"，字段依然参与表单序列化、内置验证（比如 required）、甚至自动填充。典型现象：
立即学习“前端免费学习笔记（深入）”；
- 表单报错
Constraint validation: Input field is required，但你根本看不到那个字段 - 密码管理器把
display: none的input[type="password"]当作有效目标，自动填入账号 - iOS Safari 对
display: none的input[type="file"]降级处理，accept属性失效
修复方式很简单：别这么干。真要隐藏且提交，就用 input type="hidden"；要保留验证逻辑又不想显示，改用 visibility: hidden + pointer-events: none + tabindex="-1"，但前提是它确实不敏感。
name 属性写错或漏写，后端根本收不到
浏览器只认 name 属性决定提交键名，id 或 class 无关。常见错误：
-
<input type="hidden" value="123">—— 缺name，字段压根不提交 -
<input type="hidden" name="userId" value="123">—— 后端期望user_id，PHP/Flask 读不到 -
<input type="Hide" name="token">—— 浏览器不认识type="Hide"，降级为 text，可能意外显示
检查方法：打开开发者工具 → Network → 点击提交请求 → 切到 Form Data 标签页，确认字段是否出现、键名是否匹配、值是否非空。
JS 动态赋值必须在 submit 前完成，且不能覆盖服务端关键值
用 JS 写 document.querySelector('input[name="timestamp"]').value = Date.now() 没问题，但容易踩坑：
- 脚本放在
<head>里，DOM 还没加载，querySelector返回null - 多个同名
name的input，querySelector只改第一个，其余被忽略 - 用户手速快，点提交时 JS 还没执行完，后端收到空值或旧值
稳妥做法：绑定到 form.addEventListener('submit', ...) 开头；或用 DOMContentLoaded 确保 DOM 就绪后再赋值；框架项目（Vue/React）走响应式绑定，别直接操作 DOM value。
最常被忽略的一点：哪怕用了 input type="hidden"，只要它在 <form> 外面、加了 disabled、或者 name 拼错，后端就收不到——不是“看起来没显示=能提交”，而是“语义正确+位置正确+属性完整=才提交”。
