在现代Firefox/Chrome/Edge浏览器中实现PDF数字签名的技术求助

我完全理解你现在的困境——要抛弃IE11+Acrobat的老旧方案，在非Node环境的AngularJS应用里，实现兼容Chrome/Firefox/Edge的PDF表单数字签名，还要对接智能卡的PKCS#11证书，确实走了不少弯路。结合你调研的几个库，我给你梳理下具体的落地方向和实操步骤：

一、PKCS#11智能卡访问：优先选 hwcrypto.js 或 pkcs11.js #

这两个库是前端对接智能卡最靠谱的选择，区别在于适配场景：

1. hwcrypto.js：开箱即用，适配主流平台 #

这个库封装了不同操作系统的原生加密接口（Windows CAPI、macOS Keychain、Linux PKCS#11），不需要额外安装插件，Chrome/Firefox/Edge都支持。它的核心优势是不需要手动指定智能卡驱动路径，会自动检测系统内的PKCS#11设备。

• 实操步骤：
  • 直接通过<script>标签引入到AngularJS项目的index.html中
  • 调用hwcrypto.getCertificate({})获取智能卡中的证书（会触发浏览器的权限弹窗，引导用户授权）
  • 调用hwcrypto.sign(cert, digest, algorithm)完成设备内签名（私钥永远不会离开智能卡，符合安全要求）

2. pkcs11.js：更灵活，适配小众智能卡 #

如果hwcrypto.js无法识别你的智能卡（比如某些小众厂商的设备），可以用这个库。它基于WebAssembly实现了完整的PKCS#11接口，需要手动指定智能卡的驱动文件路径：

• 实操注意：
  • 引入库的Wasm文件和JS封装层，AngularJS里直接用<script>加载即可
  • 初始化时调用new PKCS11().load(driverPath)加载驱动（Windows是.dll，Linux是.so，macOS是.dylib）
  • 通过findObjects()方法遍历智能卡内的证书和私钥对象（注意私钥对象只能用于签名，不能导出）

二、PDF签名核心：用 PKI.js 处理签名结构与PDF嵌入 #

你调研的PKI.js是前端处理PDF数字签名的核心，它能构造符合PKCS#7/CMS标准的签名结构，并嵌入到PDF的AcroForm表单域中。关键是要把PKCS#11获取的签名结果和证书结合起来：

核心流程： #

1. 提取PDF待签数据：用PKI.js的PDFSigner类加载原始PDF字节流，指定要签名的表单域名称（比如"Signature1"）
2. 计算待签哈希：调用getSignedAttributesDigest(algorithm)获取要签名的哈希值（推荐用SHA-256）
3. 智能卡签名：把哈希值传给hwcrypto.js或pkcs11.js的签名接口，得到设备内生成的签名值
4. 嵌入签名到PDF：用PKI.js把证书、签名值嵌入到PDF的签名域中，生成带签名的PDF字节流

代码片段示例（AngularJS控制器中）： #

angular.module('pdfSignApp').controller('SignController', function($scope, $q) {
  // 假设pdfBytes是从后端或文件上传获取的原始PDF字节数组
  $scope.initiateSign = function(pdfBytes) {
    // 1. 获取智能卡证书
    hwcrypto.getCertificate({})
      .then(function(cert) {
        // 2. 用PKI.js构造待签哈希
        const pdfSigner = new pkijs.PDFSigner();
        pdfSigner.setPDFBytes(pdfBytes);
        pdfSigner.setSignatureFieldName("Signature1"); // 对应PDF中的签名域
        return $q.all([pdfSigner.getSignedAttributesDigest('SHA-256'), cert]);
      })
      .then(function([digest, cert]) {
        // 3. 调用智能卡签名哈希
        return hwcrypto.sign(cert, digest, 'SHA-256')
          .then(function(signature) {
            return { digest, cert, signature };
          });
      })
      .then(function(data) {
        // 4. 完成PDF签名并导出
        const pdfSigner = new pkijs.PDFSigner();
        pdfSigner.setPDFBytes(pdfBytes);
        pdfSigner.setSignatureFieldName("Signature1");
        pdfSigner.setCertificate(data.cert);
        pdfSigner.setSignatureValue(data.signature);
        
        return pdfSigner.sign();
      })
      .then(function(signedPdfBytes) {
        // 处理签名后的PDF：比如下载或预览
        const blob = new Blob([signedPdfBytes], { type: 'application/pdf' });
        const downloadLink = document.createElement('a');
        downloadLink.href = URL.createObjectURL(blob);
        downloadLink.download = 'signed-form.pdf';
        downloadLink.click();
      })
      .catch(function(err) {
        console.error('签名失败:', err);
        alert('签名失败，请检查智能卡是否插入、驱动是否安装，或浏览器权限是否允许');
      });
  };
});

三、AngularJS环境的关键注意事项 #

1. 异步操作封装：所有PKCS#11和PDF签名操作都是异步的，要用AngularJS的$q或原生Promise封装，避免回调嵌套
2. 库的引入方式：因为是非Node环境，所有库都要通过<script>标签直接引入，不能用ES6 import或CommonJS require
3. 浏览器权限：Chrome/Firefox第一次调用智能卡接口时会弹出权限请求，要引导用户点击允许；Edge需要在设置中开启“允许网站访问硬件安全密钥”
4. 表单域兼容性：确保原始PDF中存在指定名称的签名域（可以用Acrobat提前创建），否则PKI.js无法嵌入签名

四、踩坑避坑指南 #

• 不要尝试导出私钥：智能卡的私钥是不可导出的，所有签名必须在设备内完成，任何要求导出私钥的方案都是不安全且不可行的
• 哈希算法统一：从PDF待签哈希到智能卡签名，全程用同一个哈希算法（推荐SHA-256，避免SHA-1被浏览器禁用）
• 驱动测试：提前测试主流智能卡厂商的驱动（比如YubiKey、Gemalto），确保hwcrypto.js或pkcs11.js能正常识别
• PDF版本兼容：确保原始PDF是AcroForm格式（不是XFA），PKI.js对XFA表单的支持有限

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