如何使用WebCrypto导入X.509证书作为验证密钥？

问题详情 #

给定Microsoft生成的用于验证JWT的公开证书：

MIIDBTCCAe2gAwIBAgIQH4FlYNA+UJlF0G3vy9ZrhTANBgkqhkiG9w0BAQsFADAtMSswKQYDVQQDEyJhY2NvdW50cy5hY2Nlc3Njb250cm9sLndpbmRvd3MubmV0MB4XDTIyMDUyMjIwMDI0OVoXDTI3MDUyMjIwMDI0OVowLTErMCkGA1UEAxMiYWNjb3VudHMuYWNjZXNzY29udHJvbC53aW5kb3dzLm5ldDCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEBAMBDDCbY/cjEHfEEulZ5ud/CuRjdT6/yN9fy1JffjgmLvvfw6w7zxo1YkCvZDogowX8qqAC/qQXnJ/fl12kvguMWU59WUcPvhhC2m7qNLvlOq90yo+NsRQxD/v0eUaThrIaAveZayolObXroZ+HwTN130dhgdHVTHKczd4ePtDjLwSv/2a/bZEAlPys102zQo8gO8m7W6/NzRfZNyo6U8jsmNkvqrxW2PgKKjIS/UafK9hwY/767K+kV+hnokscY2xMwxQNlSHEim0h72zQRHltioy15M+kBti4ys+V7GC6epL//pPZT0Acv1ewouGZIQDfuo9UtSnKufGi26dMAzSkCAwEAAaMhMB8wHQYDVR0OBBYEFLFr+sjUQ+IdzGh3eaDkzue2qkTZMA0GCSqGSIb3DQEBCwUAA4IBAQCiVN2A6ErzBinGYafC7vFv5u1QD6nbvY32A8KycJwKWy1sa83CbLFbFi92SGkKyPZqMzVyQcF5aaRZpkPGqjhzM+iEfsR2RIf+/noZBlR/esINfBhk4oBruj7SY+kPjYzV03NeY0cfO4JEf6kXpCqRCgp9VDRM44GD8mUV/ooN+XZVFIWs5Gai8FGZX9H8ZSgkIKbxMbVOhisMqNhhp5U3fT7VPsl94rilJ8gKXP/KBbpldrfmOAdVDgUC+MHw3sSXSt+VnorB4DU4mUQLcMriQmbXdQc8d1HUZYZEkcKaSgbygHLtByOJF44XUsBotsTfZ4i/zVjnYcjgUQmwmAWD

尝试使用WebCrypto导入证书作为验证密钥，代码如下：

// Extracted from WebCrypto examples
function stringToArrayBuffer(string) {
  const buf = new ArrayBuffer(string.length);
  const bufView = new Uint8Array(buf);
  for (let i = 0, strLen = string.length; i < strLen; i++) {
    bufView[i] = string.charCodeAt(i);
  }
  return buf;
}

const key = await crypto.subtle.importKey(
  "spki",
  stringToArrayBuffer(atob(the_certificate_without_headers)),
  {
    name: "RSASSA-PKCS1-v1_5",
    hash: "SHA-256",
  },
  true,
  ["verify"],
);

执行后出现错误：

DOMException: unexpected ASN.1 DER tag: expected OBJECT IDENTIFIER, got CONTEXT-SPECIFIC [0] (constructed) at DER byte 8

错误原因 #

你传入的是完整的X.509证书，但crypto.subtle.importKey的"spki"格式要求的是SubjectPublicKeyInfo（仅公钥的DER编码结构），而非包含签名、有效期、颁发者等额外信息的完整证书。ASN.1结构不匹配导致了解析错误。

解决方案 #

使用浏览器原生的X509Certificate API解析证书，直接提取可用的公钥CryptoKey对象：

完整代码示例 #

// 将Base64编码转换为ArrayBuffer
function base64ToArrayBuffer(base64) {
  const binaryString = atob(base64);
  const bytes = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes.buffer;
}

// 从Base64证书中提取公钥
async function extractPublicKeyFromCert(certBase64) {
  const certBuffer = base64ToArrayBuffer(certBase64);
  // 解析X.509证书
  const cert = new X509Certificate(certBuffer);
  // cert.publicKey直接返回符合要求的CryptoKey对象
  return cert.publicKey;
}

// 使用示例
const microsoftCert = "MIIDBTCCAe2gAwIBAgIQH4FlYNA+UJlF0G3vy9ZrhTANBgkqhkiG9w0BAQsFADAtMSswKQYDVQQDEyJhY2NvdW50cy5hY2Nlc3Njb250cm9sLndpbmRvd3MubmV0MB4XDTIyMDUyMjIwMDI0OVoXDTI3MDUyMjIwMDI0OVowLTErMCkGA1UEAxMiYWNjb3VudHMuYWNjZXNzY29udHJvbC53aW5kb3dzLm5ldDCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEBAMBDDCbY/cjEHfEEulZ5ud/CuRjdT6/yN9fy1JffjgmLvvfw6w7zxo1YkCvZDogowX8qqAC/qQXnJ/fl12kvguMWU59WUcPvhhC2m7qNLvlOq90yo+NsRQxD/v0eUaThrIaAveZayolObXroZ+HwTN130dhgdHVTHKczd4ePtDjLwSv/2a/bZEAlPys102zQo8gO8m7W6/NzRfZNyo6U8jsmNkvqrxW2PgKKjIS/UafK9hwY/767K+kV+hnokscY2xMwxQNlSHEim0h72zQRHltioy15M+kBti4ys+V7GC6epL//pPZT0Acv1ewouGZIQDfuo9UtSnKufGi26dMAzSkCAwEAAaMhMB8wHQYDVR0OBBYEFLFr+sjUQ+IdzGh3eaDkzue2qkTZMA0GCSqGSIb3DQEBCwUAA4IBAQCiVN2A6ErzBinGYafC7vFv5u1QD6nbvY32A8KycJwKWy1sa83CbLFbFi92SGkKyPZqMzVyQcF5aaRZpkPGqjhzM+iEfsR2RIf+/noZBlR/esINfBhk4oBruj7SY+kPjYzV03NeY0cfO4JEf6kXpCqRCgp9VDRM44GD8mUV/ooN+XZVFIWs5Gai8FGZX9H8ZSgkIKbxMbVOhisMqNhhp5U3fT7VPsl94rilJ8gKXP/KBbpldrfmOAdVDgUC+MHw3sSXSt+VnorB4DU4mUQLcMriQmbXdQc8d1HUZYZEkcKaSgbygHLtByOJF44XUsBotsTfZ4i/zVjnYcjgUQmwmAWD";
const verifyKey = await extractPublicKeyFromCert(microsoftCert);

// 验证JWT示例（假设已有JWT的签名和 payload）
async function verifyJwt(jwt, publicKey) {
  const [header, payload, signature] = jwt.split('.');
  const encoded = `${header}.${payload}`;
  const encoder = new TextEncoder();
  const data = encoder.encode(encoded);
  const signatureBuffer = base64ToArrayBuffer(signature.replace(/-/g, '+').replace(/_/g, '/'));
  
  return crypto.subtle.verify(
    "RSASSA-PKCS1-v1_5",
    publicKey,
    signatureBuffer,
    data
  );
}

说明 #

1. X509Certificate是浏览器原生API，支持解析X.509证书并直接返回公钥的CryptoKey对象，无需手动处理ASN.1结构。
2. 提取的CryptoKey默认已配置好符合RSASSA-PKCS1-v1_5 + SHA-256的验证参数，可直接用于JWT签名验证。
3. 若需兼容不支持X509Certificate的环境，需手动解析证书的ASN.1结构提取SubjectPublicKeyInfo部分，但该过程较为繁琐，建议优先使用原生API。

内容的提问来源于stack exchange，提问作者Steven Guerrero