当前位置：首页 > 文章列表 > 文章 > 前端 > HTML5AES加密方法全解析

HTML5AES加密方法全解析

2026-03-04 10:17:42 0浏览收藏

本文深入解析了在HTML5环境中实现AES字符串加密的实用方案，明确指出HTML5本身不支持AES加密，必须依赖Web Crypto API（推荐AES-GCM模式）或CryptoJS等JavaScript库；重点强调Web Crypto API作为现代浏览器原生加密接口的安全优势——支持密钥派生、自动认证、防篡改，但需HTTPS环境且要求严谨的密钥管理、随机IV生成与统一编解码；同时提供可直接运行的完整AES-GCM加解密示例代码，并对比分析CryptoJS的兼容性与安全隐患，最后警示常见落地陷阱，帮助开发者避开“看似加密实则裸奔”的风险，真正构建安全、可靠、可复现的前端加密流程。

HTML5怎样用AES算法加密字符串_HTML5AES字符串加密操作法【心得】

HTML5 本身不内置 AES 加密能力，必须借助 JavaScript 加密库（如 CryptoJS 或原生 Web Crypto API）来实现字符串的 AES 加密。直接用纯 HTML5 标签或属性无法完成加密操作。

AES 加密推荐方案：使用 Web Crypto API（现代、安全、无需第三方库）

Web Crypto API 是浏览器原生支持的加密接口，支持 AES-GCM（推荐）、AES-CBC 等模式，无需引入外部脚本，且密钥管理更安全。

仅支持 HTTPS 环境（本地 file:// 或 HTTP 页面会报错）
密钥需通过 crypto.subtle.generateKey() 或 importKey() 创建/导入，不能明文传入字符串密钥
推荐使用 AES-GCM 模式：自动提供加密+认证，防止篡改
加密后输出为 ArrayBuffer，通常需转为 Base64 或 Hex 方便传输

简易 AES-GCM 加密/解密示例（可直接运行）

以下代码在 HTTPS 页面中可直接使用（例如部署在 localhost 或托管平台）：

// 加密函数
async function encrypt(text, password) {
  const enc = new TextEncoder();
  const data = enc.encode(text);
  const pwBytes = enc.encode(password);
  const salt = crypto.getRandomValues(new Uint8Array(16));
  
  // 从密码派生密钥（PBKDF2）
  const keyMaterial = await crypto.subtle.importKey(
    'raw', pwBytes, {name: 'PBKDF2'}, false, ['deriveKey']
  );
  const key = await crypto.subtle.deriveKey(
    {name: 'PBKDF2', salt, iterations: 100000, hash: 'SHA-256'},
    keyMaterial, {name: 'AES-GCM', length: 256}, false, ['encrypt', 'decrypt']
  );

  const iv = crypto.getRandomValues(new Uint8Array(12));
  const encrypted = await crypto.subtle.encrypt(
    {name: 'AES-GCM', iv}, key, data
  );

  // 合并 salt + iv + ciphertext（Base64 输出）
  const fullBuff = new Uint8Array(salt.length + iv.length + encrypted.byteLength);
  fullBuff.set(salt, 0);
  fullBuff.set(iv, salt.length);
  fullBuff.set(new Uint8Array(encrypted), salt.length + iv.length);
  return btoa(String.fromCharCode(...fullBuff));
}

// 解密函数（对应上面加密逻辑）
async function decrypt(b64Str, password) {
  const enc = new TextEncoder();
  const pwBytes = enc.encode(password);
  const rawData = new Uint8Array(atob(b64Str).split('').map(c => c.charCodeAt(0)));
  
  const salt = rawData.slice(0, 16);
  const iv = rawData.slice(16, 28);
  const ciphertext = rawData.slice(28);

  const keyMaterial = await crypto.subtle.importKey(
    'raw', pwBytes, {name: 'PBKDF2'}, false, ['deriveKey']
  );
  const key = await crypto.subtle.deriveKey(
    {name: 'PBKDF2', salt, iterations: 100000, hash: 'SHA-256'},
    keyMaterial, {name: 'AES-GCM', length: 256}, false, ['encrypt', 'decrypt']
  );

  const decrypted = await crypto.subtle.decrypt(
    {name: 'AES-GCM', iv}, key, ciphertext
  );
  return new TextDecoder().decode(decrypted);
}