vue、uniapp 使用crypto-js库进行AES加密

'# vue、uniapp 使用crypto-js库进行AES加密

一、背景与问题

在现代Web和小程序开发中，数据加密是保障用户隐私和数据安全的重要手段。随着《数据安全法》《个人信息保护法》等法规的实施，对敏感数据的加密处理已成为基本要求。

在Vue和UniApp项目中，开发者常需要处理用户密码、支付信息、身份证号等敏感数据。传统的明文传输方式存在重大安全隐患，而AES加密算法因其对称加密特性、加密强度高、计算效率高等优势，成为首选方案。

但实际开发中常遇到以下问题：

1. 如何在不同平台（H5/小程序）保持加密一致性
2. 如何处理加密后的数据存储和传输
3. 如何避免常见的安全漏洞（如IV重复、填充错误）
4. 如何在性能敏感的场景下优化加密效率

二、基本原理

AES（Advanced Encryption Standard）是一种对称加密算法，其核心原理是通过多轮的代换-置换操作（Substitution-Permutation Network）实现数据加密。其关键特性包括：

1. 分组加密：以固定长度的块（128位）进行加密，支持128/192/256位密钥
2. 工作模式：包括ECB、CBC、CFB、OFB等，其中CBC模式需要初始化向量（IV）
3. 填充机制：PKCS7、ZeroPadding等，确保数据长度符合分组要求
4. 密钥管理：密钥需要保密存储，通常通过密钥派生算法（如PBKDF2）生成

在Vue/UniApp中使用crypto-js库时，需要特别注意：

• 浏览器环境与小程序环境的差异（如微信小程序不支持WebCryptoAPI）
• 模块加载方式（通过CDN或npm安装）
• 加密参数的统一性（IV、密钥、填充方式）

三、环境准备

1. 项目初始化

# 创建Vue3项目
npm create vue@latest
# 创建UniApp项目
npm create uni-app@latest

2. 安装crypto-js库

# Vue项目
npm install crypto-js

# UniApp项目（注意小程序支持）
npm install crypto-js

3. 配置文件

在main.js中引入：

import CryptoJS from 'crypto-js'
global.crypto = CryptoJS

四、核心实现

1. 基础加密函数

function aesEncrypt(data, key, iv, mode = 'CBC') {
  const keyBytes = CryptoJS.enc.Utf8.parse(key)
  const ivBytes = CryptoJS.enc.Utf8.parse(iv)
  
  const encrypted = CryptoJS.algo[mode].createEncryptor(
    keyBytes, { iv: ivBytes, padding: CryptoJS.pad.Pkcs7 }
  ).finalize(CryptoJS.enc.Utf8.parse(data))
  
  return encrypted.toString()
}

关键点解析：

• 使用Pkcs7填充方式符合标准，避免ZeroPadding的兼容性问题
• IV向量长度必须与密钥长度一致（16字节）
• CBC模式需要正确传递IV参数

2. 解密函数

function aesDecrypt(encrypted, key, iv, mode = 'CBC') {
  const keyBytes = CryptoJS.enc.Utf8.parse(key)
  const ivBytes = CryptoJS.enc.Utf8.parse(iv)
  
  const decrypted = CryptoJS.algo[mode].createDecryptor(
    keyBytes, { iv: ivBytes, padding: CryptoJS.pad.Pkcs7 }
  ).finalize(CryptoJS.enc.Base64.parse(encrypted))
  
  return decrypted.toString(CryptoJS.enc.Utf8)
}

注意：

• 加密结果通常使用Base64编码，解密时需要先转换
• 使用相同的模式和填充方式是解密成功的前提

3. 密钥管理方案

// 密钥派生（PBKDF2）
function deriveKey(password, salt, iterations = 100000) {
  return CryptoJS.PBKDF2(password, salt, {
    keySize: 256/32,
    iterations: iterations,
    hasher: CryptoJS.algo.SHA256
  }).toString()
}

五、完整案例

1. 登录功能实现

前端代码（Vue3）：

<template>
  <view class="container">
    <input v-model="username" placeholder="用户名" />
    <input type="password" v-model="password" placeholder="密码" />
    <button @click="login">登录</button>
  </view>
</template>

<script>
import { aesEncrypt, aesDecrypt } from '@/utils/crypto'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async login() {
      const encryptedPass = aesEncrypt(this.password, '1234567890123456', '1234567890123456', 'CBC')
      
      const res = await uni.request({
        url: 'https://your-api.com/login',
        method: 'POST',
        data: {
          username: this.username,
          encryptedPassword: encryptedPass
        }
      })
      
      if (res.data.success) {
        uni.showToast({ title: '登录成功' })
      } else {
        uni.showToast({ title: '登录失败', icon: 'none' })
      }
    }
  }
}
</script>

后端代码（Node.js）：

const crypto = require('crypto')

function aesDecrypt(encrypted, key, iv) {
  const decipher = crypto.createDecipheriv('aes-256-cbc', Buffer.from(key), Buffer.from(iv))
  let decrypted = decipher.update(encrypted, 'base64', 'utf8')
  decrypted += decipher.final('utf8')
  return decrypted
}

app.post('/login', (req, res) => {
  const { username, encryptedPassword } = req.body
  const key = '1234567890123456'
  const iv = '1234567890123456'
  
  try {
    const password = aesDecrypt(encryptedPassword, key, iv)
    // 校验用户名密码逻辑
    res.json({ success: true })
  } catch (err) {
    res.status(400).json({ success: false })
  }
})

关键点说明：

• 密钥和IV需要在前后端完全一致
• 建议使用HTTPS传输加密数据
• 增加请求身份验证（如JWT）提升安全性

六、源码解析

1. crypto-js核心模块分析

crypto-js的源码结构包含多个算法模块，核心加密流程如下：

1. Key处理：将字符串转换为WordArray（CryptoJS.enc.Utf8.parse()）
2. Mode处理：根据工作模式（CBC/ECB）创建加密器
3. Padding处理：自动补足数据块（PKCS7填充）
4. 核心加密：通过多轮代换-置换操作完成加密
5. 结果输出：返回Base64字符串

2. 常见模式对比

七、进阶使用

1. 多平台兼容性处理

// 自适应加载crypto-js
function getCryptoJS() {
  if (typeof window !== 'undefined') {
    return window.CryptoJS
  } else if (typeof uni !== 'undefined') {
    return uni.requireNativePlugin('crypto-js')
  }
  throw new Error('CryptoJS not available in this environment')
}

2. 性能优化方案

// 使用Web Worker处理加密任务（H5端）
function encryptInWorker(data, key, iv) {
  return new Promise((resolve) => {
    const worker = new Worker('crypto-worker.js')
    worker.postMessage({ data, key, iv })
    worker.onmessage = (e) => {
      resolve(e.data)
      worker.terminate()
    }
  })
}

3. 密钥管理增强

// 使用HSM硬件安全模块（示例）
async function getSecureKey() {
  const keyId = 'secure_key_123'
  const key = await fetch(`https://key-management-api.com/keys/${keyId}`)
  return key.json().key
}

八、性能与工程实践

1. 性能优化策略

2. 异常处理机制

try {
  const result = aesEncrypt(data, key, iv)
  console.log('加密成功:', result)
} catch (err) {
  console.error('加密失败:', err.message)
  // 记录错误日志并提示用户
}

3. 安全增强措施

1. 使用TLS 1.2+协议传输加密数据
2. 增加请求签名验证
3. 定期更换密钥
4. 避免明文传输IV和密钥

九、常见问题与踩坑

1. 常见错误分析

错误示例：

const encrypted = CryptoJS.enc.Utf8.parse(data).toString()

问题：直接使用toString()会导致编码错误

正确做法：

const encrypted = CryptoJS.algo.AES.encrypt(
  CryptoJS.enc.Utf8.parse(data), 
  CryptoJS.enc.Utf8.parse(key)
).toString()

2. 常见陷阱

3. 安全风险预警

• 密钥泄露：使用固定密钥可能导致数据泄露
• IV重复：CBC模式下IV重复会导致信息泄露
• 填充攻击：未正确处理填充可能导致数据篡改

十、最佳实践

1. 密钥管理：

   • 使用PBKDF2派生密钥
   • 储存时使用HSM或密钥管理服务
   • 定期轮换密钥

2. 加密配置：

   • 必须使用CBC模式
   • 使用PKCS7填充
   • 随机生成IV并存储

3. 传输安全：

   • 必须使用HTTPS
   • 增加请求签名
   • 使用TLS 1.2+协议

4. 性能优化：

   • 大数据分块处理
   • 高频调用使用缓存
   • 移动端使用Web Worker

十一、总结

在Vue和UniApp开发中，使用crypto-js实现AES加密是保障数据安全的重要手段。通过深入理解AES算法原理、正确处理加密参数、合理选择工作模式，可以有效防范数据泄露风险。

实际开发中应遵循以下原则：

• 优先使用CBC模式，避免ECB的漏洞
• 严格管理密钥生命周期
• 保证加密参数的随机性和唯一性
• 在性能敏感场景采用异步处理
• 始终使用HTTPS传输加密数据

对于需要处理大量敏感数据的业务系统，建议结合国密算法（SM4）进行双重加密，同时采用硬件安全模块（HSM）提升安全等级。在开发过程中应持续关注安全漏洞公告，及时更新加密方案。