安全项状态总览需用JavaScript结合后端API动态渲染，禁止HTML硬编码；各状态须绑定数据字段、防XSS、路由契约对齐、样式隔离，确保颜色/文案/操作三者一致可信。
怎么用 HTML + 前端逻辑展示安全项状态总览
纯 HTML 无法动态判断「密码是否过期」「MFA 是否启用」这类安全状态——它只是结构容器。真正能驱动状态渲染的，是 JavaScript 结合后端 API 返回的数据。所以首页核心不是写多少 <div>，而是怎么把 <code>isPasswordExpired、mfaStatus 这些字段接进来、映射成视觉反馈。
- 别在 HTML 里硬编码「已启用」「未启用」文字，状态必须来自数据，否则一刷新就失真
- 每个安全项（如登录保护、设备管理）建议用独立
<section></section>包裹，方便后续用 JS 单独更新某一块，避免整页重绘 - 图标状态别只靠 CSS 类名（如
status--ok），要和数据字段严格绑定，比如class="status {{ mfaStatus === 'enabled' ? 'status--ok' : 'status--warn' }}"
为什么不能直接用 innerHTML 渲染安全状态列表
用户的安全配置可能含敏感字段（如最后登录 IP、最近异常时间），如果后端返回的是未脱敏 JSON，又用 innerHTML 直接插入，就可能触发 XSS——特别是当某些字段被用户可控（比如昵称、设备备注）且服务端没过滤时。
- 改用
textContent设置文字内容，或setAttribute('data-value', ...)存数据，再由 CSS/JS 控制显示 - 所有从 API 拿到的状态值，在插入 DOM 前必须过一遍
DOMPurify.sanitize()（如果真要插 HTML 片段） - 状态文案尽量走前端字典映射，而不是后端直给 HTML 片段，例如后端返回
"mfa_status": "disabled"，前端查表转成「需启用双重验证」
常见错误：安全状态卡片点击无响应或跳转错页面
很多团队把「修改密码」按钮的 href 写成 /reset 这种静态路径，但实际路由受权限控制——普通用户点进去 403，管理员却该去 /admin/password-policy。链接失效本质是前后端路由契约没对齐。
- 所有操作入口（按钮、链接）的 URL 必须由后端在首页 HTML 中通过
data-action属性注入，例如<button data-action="/api/v1/users/me/password/change"></button> - 禁用
<a href="javascript:void(0)"></a>写法，既不利于 SEO，也干扰屏幕阅读器对安全操作的识别 - 如果某项当前不可操作（如「关闭短信验证」因策略锁定），不要隐藏按钮，而应保留并加
disabled+title说明原因，比如title="组织策略禁止关闭"
CSS 怎么避免安全状态样式被意外覆盖
安全状态的颜色（红/黄/绿）常被全局 CSS 里的 !important 或低优先级选择器冲掉，导致「高危」显示成绿色，这种视觉误导比没样式更危险。
- 状态色定义用明确作用域的类，如
.security-status--critical，不用泛义的.error - 关键状态色必须写在组件级 CSS 文件里，且用
[class*="security-status"]这类属性选择器加固，防被外层样式穿透 - 在浏览器 DevTools 里检查元素时，如果看到状态色来自
user-agent stylesheet或reset.css，说明你的样式没生效，得加权重或换选择器
安全状态不是装饰，是用户做决策的依据。颜色、文案、可操作性，三者只要一个脱节，整个「总览」就失去意义。最麻烦的不是写不出来，而是写出来之后没人敢信它显示的是真的。
