敏感数据不能靠前端隐藏保护，因html/js中明文数据可被用户瞬间查看或篡改；真正安全需后端生成签名令牌并严格校验权限、签名及上下文一致性。
不能靠前端隐藏来实现敏感数据保护——所有出现在 HTML 或 JS 中的敏感值，用户两秒就能在 DevTools 里看到或改掉。
为什么 input type="hidden" 不是安全方案
它只是不渲染，但 value 明文写在 HTML 源码里。右键「查看页面源代码」、Network → Form Data 标签页、甚至直接用 document.querySelector('input[name="price"]').value = "0.01" 都能立刻篡改。
- 把
user_role="admin"塞进 hidden 字段 → 攻击者改成"superadmin"就越权 - 传
price="99.99"→ 提交前改成"0.01"导致资损 - 放
api_key或未签名的session_token→ 等于公开分发密钥
真正该做的：这些字段必须由后端生成（如 JWT、HMAC 签名字符串），前端只回传不可篡改的令牌；后端收到后必须查库或验签，重新确认权限和有效性。
display: none 和 visibility: hidden 同样不安全
它们只是视觉隐藏，字段依然参与表单序列化、内置验证（比如 required）、自动填充，甚至会被密码管理器识别填入。
-
display: none的input[type="password"]仍可能被密码管理器填入账号 - iOS Safari 对
display: none的input[type="file"]会忽略accept属性 -
visibility: hidden的单元格在表格中虽保留布局，但内容仍在 DOM 里，DevTools 一点就开
修复方式很简单：别这么干。真要隐藏且提交，就用 input type="hidden"；要保留验证逻辑又不想显示，改用 visibility: hidden + pointer-events: none + tabindex="-1"，但前提是它确实不敏感。
后端必须校验的三个硬性条件
只要敏感逻辑依赖前端传来的任何字段，就必须满足以下全部条件，缺一不可：
- 后端从 session / JWT / 数据库中实时查出权限、价格、角色等关键状态，而不是直接信任
request.form.get("user_role") - 对所有带签名的令牌（如
order_id_sig）做 HMAC 校验，密钥绝不暴露在前端 - 提交时校验上下文一致性，例如：
action="update"必须匹配数据库中该id的当前状态，不能仅靠 hidden 字段判断
哪怕用了 HTTPS，也改变不了前端数据可被篡改的事实。加密传输只防窃听，不防伪造——真正的防线永远在服务端校验逻辑里，不在 HTML 的某个 type 属性上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
