当前位置：首页 > java >正文

浏览器环境下AES-GCM JavaScript 加解密程序

java 2025/8/15 18:44:01

浏览器环境下AES-GCM JavaScript 加解密程序

问题背景

浏览器环境crypto-js 不支持 AES-GCM 模式。

解决思路：node-forge 可以在浏览器中使用！它是一个同时支持 Node.js 和浏览器环境的纯 JavaScript 加密库。

node-forge库

官网：https://github.com/digitalbazaar/forge
npm官网：https://www.npmjs.com/package/node-forge

node-forge 是一个用纯 JavaScript 实现的通用加密库，既可运行在浏览器，也可运行在 Node.js 环境。它覆盖了对称加密（AES-GCM 等）、公钥密码（RSA OAEP/PSS）、哈希与 HMAC、KDF（PBKDF2）、随机数生成、X.509 证书与 PKCS#12/CSR 等 PKI 工具链。对于需要“同一套代码跨 Node 与浏览器”的团队，或需要在浏览器端处理证书/PEM/DER 的场景，node-forge 是一把趁手的“多功能工具箱”。

实战完整示例代码

执行效果：
在这里插入图片描述

源码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AES-GCM 加密解密测试 (浏览器版)</title><style>body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;max-width: 800px;margin: 0 auto;padding: 20px;background-color: #f5f5f5;}.container {background: white;padding: 30px;border-radius: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);}h1 {color: #333;text-align: center;margin-bottom: 30px;}.section {margin-bottom: 25px;padding: 20px;border: 1px solid #ddd;border-radius: 5px;background-color: #fafafa;}.section h3 {margin-top: 0;color: #555;}input, textarea {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 4px;font-size: 14px;box-sizing: border-box;}textarea {height: 80px;resize: vertical;}button {background-color: #007bff;color: white;padding: 10px 20px;border: none;border-radius: 4px;cursor: pointer;font-size: 14px;margin: 5px;transition: all 0.2s ease;}button:hover {background-color: #0056b3;transform: translateY(-1px);}button.clear-btn {background-color: #6c757d;}button.clear-btn:hover {background-color: #545b62;}button.test-btn {background-color: #28a745;}button.test-btn:hover {background-color: #218838;}.result {margin-top: 15px;padding: 10px;border-radius: 4px;font-family: monospace;word-break: break-all;}.success {background-color: #d4edda;border: 1px solid #c3e6cb;color: #155724;}.error {background-color: #f8d7da;border: 1px solid #f5c6cb;color: #721c24;}.info {background-color: #d1ecf1;border: 1px solid #bee5eb;color: #0c5460;}label {display: block;margin-bottom: 5px;font-weight: bold;color: #555;}.help-icon {display: inline-block;width: 16px;height: 16px;background-color: #007bff;color: white;border-radius: 50%;text-align: center;line-height: 16px;font-size: 12px;margin-left: 5px;cursor: help;position: relative;}.help-tooltip {visibility: hidden;width: 300px;background-color: #333;color: #fff;text-align: left;border-radius: 6px;padding: 10px;position: absolute;z-index: 1;bottom: 125%;left