除mTLS握手外，浏览器与客户端证书/密钥是否存在其他交互？关于网页证书/密钥操作可行性的技术问询

Great question—let's break this down into the two scenarios you asked about, since mTLS client certificate handling has some specific browser API behaviors to cover:

1. Can web pages detect the selected client certificate and read its fields via JavaScript? #

Yes, modern browsers provide APIs that let JavaScript access public fields of the client certificate used in an mTLS handshake, but this requires explicit user permission first. You absolutely can build something like your <h1> Hello {x509CommonName}</h1> example.

Here's a simplified code snippet that demonstrates this:

async function displayClientCertCommonName() {
  try {
    // Request access to the client certificate from the system/NSS store
    const credential = await navigator.credentials.get({
      type: "certificate",
      certificate: {
        types: ["x509"],
        store: "platform" // Use "NSS" for Firefox specifically
      }
    });

    if (credential) {
      // Parse the raw certificate into an X509Certificate object
      const cert = new X509Certificate(credential.raw);
      // Extract the Common Name (CN) from the certificate subject
      const commonName = cert.subject
        .split(",")
        .find(part => part.trim().startsWith("CN="))
        ?.split("=")[1];

      // Update the page with the CN
      if (commonName) {
        document.querySelector("h1").textContent = `Hello ${commonName}`;
      }
    }
  } catch (error) {
    console.error("Failed to access client certificate:", error);
  }
}

// Trigger the function (e.g., on a button click)
document.getElementById("get-cert-btn").addEventListener("click", displayClientCertCommonName);

Important notes:

• The browser will prompt the user to grant permission before allowing access to the certificate.
• Only public fields (subject, issuer, validity dates, etc.) are accessible—the private key is never exposed to JavaScript.
• This works directly with the local certificate store (system or NSS) and doesn't require the server to send the certificate back to the client.

2. Can web pages request the user to sign data with their client certificate's private key? #

Yes, this is also possible via the Web Crypto API, with the same critical security guardrails: user permission is required, and the private key remains locked in the browser/system's secure storage (JavaScript never gets direct access to it).

This has practical uses, like secondary authentication checks or document signing without retriggering an mTLS handshake. Here's a quick example:

async function signDataWithClientCert() {
  try {
    // Request access to the certificate (with permission to use its key for signing)
    const credential = await navigator.credentials.get({
      type: "certificate",
      certificate: {
        types: ["x509"],
        store: "platform",
        permission: "read" // Grants access to use the key for signing/verifying
      }
    });

    if (credential) {
      // Import the certificate's public key metadata (the private key stays in secure storage)
      const cryptoKey = await crypto.subtle.importKey(
        "spki",
        credential.raw,
        { name: "RSASSA-PKCS1-v1_5", hash: "SHA-256" },
        false,
        ["sign"]
      );

      // Data to sign (e.g., a session token or document hash)
      const dataToSign = new TextEncoder().encode("Authenticate this request");
      // Perform the signature operation (handled internally by the secure storage)
      const signature = await crypto.subtle.sign(
        "RSASSA-PKCS1-v1_5",
        cryptoKey,
        dataToSign
      );

      // Send the signature to your server for verification
      console.log("Generated signature:", Array.from(new Uint8Array(signature)));
    }
  } catch (error) {
    console.error("Failed to sign data:", error);
  }
}

Key details:

• The browser will show a permission prompt explicitly asking the user if they allow the site to use their certificate's private key for signing.
• The signature is generated entirely within the browser's secure context—JavaScript only receives the final signature value, not the private key.
• This is a client-side operation; no server-side certificate回传 is involved.

内容的提问来源于stack exchange，提问作者Liam Kelly