真正的权限控制必须由后端完成，前端HTML仅作展示；敏感数据不可渲染到源码中，二次验证需每次操作前实时调用后端接口校验，禁止依赖前端标记、隐藏样式或本地存储状态。
HTML里没法直接控制“敏感数据查看权限”
浏览器端的 HTML 本身不提供权限校验能力，class="sensitive" 或 data-need-auth="true" 这类标记只是前端提示，删掉标签、禁用 JS、甚至直接看源码就能绕过。真正的权限必须由后端在返回 HTML 前就过滤字段，或通过 API 动态加载时做鉴权。
“需二次验证”提示该用什么方式触发
这个提示不是 HTML 能渲染出来的状态，而是用户操作（比如点击按钮）后，前端调用后端接口判断是否需要二次验证，再决定是否弹窗或跳转。常见错误是把提示写死在 HTML 里，结果用户没点就看到“请二次验证”，或者点了却没反应。
- 正确做法：给敏感操作按钮加
data-action="view-payroll"，点击后发请求到/api/v1/verify?op=view-payroll - 后端返回
{ "required": true, "method": "totp" }，前端才显示 TOTP 输入框 - 如果后端返回
"required": false，直接走后续流程，不暴露任何验证 UI
用 CSS 隐藏敏感内容有严重风险
display: none 或 visibility: hidden 不等于安全——DOM 仍在页面里，开发者工具一查全出来。更隐蔽的写法如 opacity: 0; pointer-events: none; 同样无效。
- 真正安全的做法：后端不渲染敏感字段，HTML 源码里压根没有
<span class="salary">¥28,000</span> - 如果必须前端控制展示（比如灰度阶段），至少配合 CSP 和 SRI，但依然不能替代服务端鉴权
- Chrome DevTools 的 Elements 面板能瞬间展开所有节点，别信“用户看不到”的假设
二次验证状态怎么和 HTML 元素联动
最稳妥的方式是让后端在初始 HTML 中注入一个不可篡改的状态标识，比如通过 <meta name="auth-state" content="verified"> 或内联 JSON，但要注意这个值只能反映“当前会话是否已通过二次验证”，不能用来授权具体数据。
立即学习“前端免费学习笔记（深入）”；
- 推荐结构：
<meta name="auth-context" content='{"scope":"payroll","ts":1715823490,"sig":"a1b2c3..."}'>，签名由后端生成，前端只校验时效性，不校验权限 - 避免用
localStorage存 “isVerified:true” —— 用户可手动修改 - 每次敏感操作前，仍需向后端发起实时校验请求，不能依赖本地缓存的状态
