需用JavaScript加密库与文件API配合实现HTML5页面中加密文档的用户端解密:一、CryptoJS库AES-256-CBC解密;二、Web Crypto API原生AES-GCM解密;三、PDF.js动态解密渲染加密PDF;四、服务端代理解密+前端流式加载。

如果您希望在HTML5页面中嵌入加密文档并实现用户端解密交互,则需要借助JavaScript加密库与文件读取API配合完成。以下是实现此功能的多种方法:
一、使用CryptoJS库进行AES解密交互
该方法通过前端加载加密的Base64编码文档内容,利用CryptoJS在用户输入密码后执行AES-256-CBC解密,并将结果渲染为可读文本或PDF预览。加密过程需在服务端或离线工具中预先完成。
1、在HTML头部引入CryptoJS库:
2、在页面中添加一个文件输入控件和密码输入框:word" id="decryptPass">
立即学习“前端免费学习笔记(深入)”;
3、绑定change事件监听加密文件读取:使用FileReader.readAsText()读取文件内容为字符串
4、调用CryptoJS.AES.decrypt()传入Base64密文和用户输入的密码,指定CBC模式与PKCS7填充:
5、解密后使用DOM操作将明文插入
二、采用Web Crypto API原生解密方案
该方法不依赖第三方库,利用浏览器内置的Web Crypto API执行AES-GCM解密,安全性更高且支持硬件加速。要求加密文档附带IV、认证标签及密文三段式结构,密钥派生使用PBKDF2。
1、确保HTML页面通过HTTPS提供,否则Web Crypto API的某些接口将被禁用
2、使用navigator.credentials.createPasswordCredential()或prompt获取用户密码,避免明文存储
3、调用window.crypto.subtle.importKey()将密码通过PBKDF2派生为CryptoKey对象,盐值与迭代次数需与加密端一致
4、使用window.crypto.subtle.decrypt()传入GCM参数对象、密钥及包含IV+AuthTag+CipherText的ArrayBuffer
5、解密成功后,将返回的ArrayBuffer转换为Uint8Array,再根据文档类型(如application/pdf)创建Blob并生成URL供iframe或embed加载
三、嵌入加密PDF并启用PDF.js动态解密渲染
该方法专用于PDF文档,将加密PDF以Base64形式内联于data URI中,借助PDF.js Worker加载时拦截documentInit事件,在解析前注入自定义解密钩子函数。
1、将PDF文件使用AES-256加密后转为Base64字符串,并嵌入HTML作为data:application/pdf;base64,开头的长字符串
2、引入pdfjs-dist构建版及worker脚本:
3、覆盖PDFJSLib.getDocument()默认行为,传入customRenderTask选项,在task.onPassword回调中触发密码输入弹窗
4、密码确认后,调用PDFJSLib.decrypt()静态方法对Base64数据执行同步AES解密(需提前注册解密插件)
5、将解密后的Uint8Array传入PDFJSLib.getDocument()作为源数据,启动PDF.js标准渲染流程
四、服务端代理解密+前端流式加载方案
该方法规避前端完整加载大体积加密文档带来的内存压力,由服务端接收用户密码凭证后实时解密并分块传输明文流,前端使用ReadableStream与Response.body.pipeThrough()逐块处理。
1、HTML中发起fetch请求指向/api/decrypt-pdf端点,携带Authorization头或一次性token
2、服务端验证用户会话有效性后,从存储读取加密文档元数据,提取IV、密钥标识及加密块索引表
3、服务端使用对应密钥解密首个数据块,设置Transfer-Encoding: chunked响应头
4、前端使用const reader = response.body.getReader()循环调用read(),每次获取解密后的Uint8Array片段
5、将各片段累积写入BlobBuilder或直接传递给PDF.js的PDFDocumentLoadingTask.addPage()方法










