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

5次阅读

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

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

元素在现代 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 APISubtleCrypto 协同工作

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

这是当前唯一标准、跨浏览器(Chrome 37+、Firefox 34+、Edge 12+、Safari 16.4+)、可编程的密钥生成方式。私钥可导出为 JWKPKCS#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 格式。

立即学习 前端免费学习笔记(深入)”;

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

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

text=ZqhQzanResources