HTML安全中心首页搭建教程

• 别在 HTML 里硬编码「已启用」「未启用」文字，状态必须来自数据，否则一刷新就失真
• 每个安全项（如登录保护、设备管理）建议用独立
  包裹，方便后续用 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 属性注入，例如
• 禁用 写法，既不利于 SEO，也干扰屏幕阅读器对安全操作的识别
• 如果某项当前不可操作（如「关闭短信验证」因策略锁定），不要隐藏按钮，而应保留并加 disabled + title 说明原因，比如 title="组织策略禁止关闭"

CSS 怎么避免安全状态样式被意外覆盖