HTML无法执行密钥轮换，仅能安全展示后端下发的轮换提示；密钥生成、存储与轮换必须由后端完成，前端须解耦敏感数据、禁用自动填充、避免明文密钥、校验API响应完整性。
HTML里根本不能创建密钥轮换
密钥轮换（key rotation）是后端或加密库的事，HTML 作为纯标记语言，没有能力生成、存储、替换或校验密钥。你看到的所谓“HTML密钥轮换提示”，本质是前端用文本、表单或提示框「展示」轮换状态，而非执行轮换本身。
常见错误现象：TypeError: crypto.subtle is not available（在不支持 Web Crypto 的旧浏览器中调用）、误把 <input type="password"> 当成密钥管理入口、在 <script> 中硬编码密钥导致泄露。
- 密钥生成和轮换必须由可信后端服务完成，前端只接收轮换指令或新公钥
- 若需前端参与加解密（如用
SubtleCrypto），密钥必须通过importKey()安全导入，绝不能从 HTML 属性或内联脚本读取明文密钥 - 所有密钥相关操作需检查
window.crypto和crypto.subtle是否可用，并降级处理
怎么安全地在HTML页面里提示密钥即将过期
这是真实高频场景：用户登录后，前端收到后端下发的 nextRotationAt 时间戳，需要在页面上友好提醒，又不暴露敏感逻辑。
正确做法是把提示逻辑和密钥本身彻底解耦：
立即学习“前端免费学习笔记（深入）”；
- 后端返回结构类似
{ "rotationStatus": "warning", "daysLeft": 3 }，前端只渲染对应文案 - 提示区域用
<div id="key-rotation-banner">包裹，CSS 控制显隐，避免用display: none隐藏关键提示（可被审查元素绕过） - 不要在 HTML 源码里写死倒计时逻辑，全部交由 JS 根据当前时间 +
daysLeft动态计算，防止缓存或篡改
示例片段：
<div id="key-rotation-banner" class="banner--warning"> ⚠️ 加密密钥将在 <span id="days-left">3</span> 天后轮换，请确保客户端已升级 </div>
textarea里放安全建议？小心XSS和自动填充
很多团队用 <textarea> 展示“密钥轮换操作指南”或“安全配置示例”，但默认行为会埋雷。
典型问题：textarea 自动填充密码字段、被恶意脚本注入、内容被复制时混入不可见控制字符、移动端唤起键盘遮挡提示。
- 禁用自动填充：加上
autocomplete="off"和autocapitalize="none" - 禁止执行脚本：所有示例代码（如
openssl genrsa -out key.pem 2048）必须做 HTML 实体转义，不能直接 innerHTML 插入 - 限制输入（即使只读）：设
readonly并加tabindex="-1"，防止键盘聚焦后意外触发 - 如果内容含路径或命令，统一用
<code>包裹关键词，比如/etc/ssl/private/key.pem、curl -X POST /api/v1/rotate
为什么不能用HTML属性存密钥相关信息
有人试图把轮换时间、密钥ID、算法类型塞进 data- 属性，比如 <div data-key-id="k123" data-expiry="2025-06-01"> —— 这等于把钥匙挂在门把手上。
这些数据对任何能查看源码或调试工具的人都完全可见，且无法防止篡改。一旦被恶意利用，可能诱导用户执行错误操作（如向伪造接口提交旧密钥）。
- 敏感元数据必须通过 HTTPS 接口按需拉取，且响应需带
Cache-Control: no-store - 前端只保留非敏感标识（如
rotationPhase: "pending"），具体参数由后端动态决定并签名验证 - 若必须本地暂存，用
sessionStorage而非dataset，且每次使用前校验完整性（如比对HMAC-SHA256签名）
真正难的不是写几行 HTML，而是守住「前端不碰密钥」这条线——只要密钥或其派生参数出现在 HTML 字符串里，就已经输了。
