HTML5如何通过keygen元素取密钥对数据_HTML5密钥取法【剖判】

元素已被完全废弃，因依赖过时架构、安全模型陈旧、不支持现代算法且无法与Web Crypto协同；应改用 crypto.subtle.generateKey() 手动生成密钥对。

元素在现代 HTML5 中已**被废弃且完全不可用**，所有主流浏览器（Chrome 99+、Firefox 104+、Edge 105+、Safari 16.4+）均已移除支持。试图用它生成密钥对，会直接静默失败或报错 Unknown element 'keygen'。

为什么 不再可用

该元素依赖过时的 Netscape 插件架构和 PKCS#11 接口，安全模型陈旧，无法适配 WebCrypto API 和现代证书流程。W3C 在 HTML5.2 草案中正式将其标记为“obsolete”，WHATWG HTML 标准也早已删除其定义。

• 没有 JavaScript API 可读取生成的私钥（私钥始终留在浏览器内部，不暴露给 JS）
• 仅支持 RSA，不支持 ECDSA、Ed25519 等现代算法
• 证书签发依赖外部 CA 页面跳转，流程断裂且不可控
• 无法与 Web Crypto API 或 SubtleCrypto 协同工作

替代方案：用 crypto.subtle.generateKey() 手动生成密钥对

这是当前唯一标准、跨浏览器（Chrome 37+、Firefox 34+、Edge 12+、Safari 16.4+）、可编程的密钥生成方式。私钥可导出为 JWK 或 PKCS#8 格式，公钥可导出为 SPKI。

async function generateRSAKeyPair() {
  const keyPair = await crypto.subtle.generateKey(
    { name: "RSA-OAEP", modulusLength: 2048, publicExponent: new Uint8Array([1, 0, 1]), hash: "SHA-256" },
    true,
    ["encrypt", "decrypt"]
  );

  const publicKey = await crypto.subtle.exportKey("spki", keyPair.publicKey);
  const privateKey = await crypto.subtle.exportKey("pkcs8", keyPair.privateKey);

  return { publicKey, privateKey };
}

• 必须在 https:// 或 localhost 上运行（http:// 非本地域会抛 SecurityError）
• generateKey() 不返回 PEM 字符串，需自行 base64 编码 + 添加头尾（如 -----BEGIN PUBLIC KEY-----）
• 若需签名而非加密，应选 "RSASSA-PKCS1-v1_5" 或 "ECDSA"，并调整 usages 为 ["sign", "verify"]

服务端如何接收并使用前端生成的密钥

前端导出的 publicKey（SPKI）和 privateKey（PKCS#8）是二进制 ArrayBuffer，需转为 base64 后通过 JSON 提交。服务端不能直接用 OpenSSL 命令解析裸 ArrayBuffer —— 必须先还原为 DER 格式。

Open Voice OS

OpenVoiceOS是一个社区驱动的开源语音AI平台

下载

立即学习“前端免费学习笔记（深入）”；

• 前端发送前：用 arrayBufferToBase64(publicKey)（自定义函数）转换
• 后端接收后：base64 解码 → 得到 DER 字节 → 写入临时文件 → 用 openssl rsa -pubin -inform DER -in pub.der -text -noout 验证
• 私钥务必通过 HTTPS 加密传输，且服务端收到后立即销毁内存副本，禁止落盘明文存储
• 若需证书，应由服务端调用 CA API（如 ACME）签发，而非依赖浏览器内置流程

真正麻烦的不是生成密钥，而是后续的密钥生命周期管理：私钥如何安全导出、传输、存储、使用、销毁。浏览器不会帮你做这些， 的消失恰恰是因为它假装能做、实则什么都没做。