前端加密思考（AES+RSA）

前言

在数据传输过程当中，可能存在数据被窃取的安全隐患（主要http）。 对于安全需求较高的项目而言，加密是保证数据安全的最直接的方式。

• 加密是指将明文经过加密算法和加密密钥转为密文
• 解密是指将密文经过解密算法和解密密钥转为明文

分类

常见加密方式分为如下两类：

• 对称加密：采用对称密码编码技术，加/解密使用相同密钥进行，效率较高。
• 非对称加密：基于密钥交换协议，拥有公开密钥和私有密钥，使用公钥加密后需使用对应私钥才能进行解密。

Tips：

MD五、SHA256等通常称为数据摘要算法（采用哈希算法），即将数据块映射为定长的摘要信息，过程是单向的（没法反推原数据），通常用于数据验签（校验数据是否完整或校验数据是否被篡改）。

• 常见对称加密有AES、DES、3DES等，这里选用AES实现。
• 常见非对称加密有RSA、ECC等，这里选用RSA实现。

构思

以中后台管理项目为例：

• 对于简单项目（如单一管理员项目等），能够简单使用md5/SHA256等哈希算法实现对密码的保存（即数据库存储用户输入密码的摘要信息），并传递提交参数的哈希算法后的信息摘要（防止信息中途被篡改）。
• 通常项目，先后端经过协商好的密钥（或统一约定公私钥），使用AES或RSA对提交数据（或关键数据）进行加密，后台接收后解密后得到数据。

需完善点：

• AES密钥或RSA私钥、密钥如何传递给先后端
• 密钥什么时候更新
• 若使用RSA加密方式，对于大量数据加、解密操做较浪费性能和时间

设想： 鉴于AES较高的性能及RSA公私钥方式的易用性，可否结合这二者的优势实现对数据安全的保障？

如下是构思的业务流程：

• RSA公、私钥在每次服务器接收到预登陆请求时生成，预登陆成功后将RSA公钥传递给前端
• AES密钥在正式登陆时由前端生成，经过服务器返回的RSA公钥进行加密，并使用AES密钥对密码等重要信息进行加密，统一传给服务器
• 服务器使用RSA密钥解密便可得到AES密钥，使用该AES密钥解密前端提交内容，若验证成功登陆，则存储该AES密钥直至Session过时（退出、重复登陆、长时间无操做等）
• 成功登陆后，前端也保存该AES密钥。在后续请求中，前端使用AES密钥加密重要数据提交给服务器便可

实现

这里结合Vue实现 Tip:

• 这里仅展现实现思路，具体预登陆/登陆验证方式可根据实际需求进行修改
• axios请求、拦截器等封装思路，后续会单独介绍
• RSA依赖包：node-rsa 填充模式：pkcs1
• AES依赖包：crypto-js 填充模式：pkcs7 采用cbc模式（密钥16位 128字节）

预登陆

// 预登陆 获取后台公钥
preLogin (formName) {
  // 校验 预登陆表单（此处为element-ui，其余ui框架相似）
  this.$refs[formName].validate(async (valid) => {
    if (valid) {
      const res = await adminPreLogin({
        name: this.form.username, // 用户名
        verifyCode: this.form.verificationCode, // 验证码（经过get请求+tag参数获取验证码图片）
        tag: this.uuid // 获取验证码时的tag(可以使用uuid或时间戳+随机数等方式生成)
      })
      if (res.data.res === 0) {
        // 正式登陆 传入后台返回的公钥及后台生成这次预登陆的preSessionId
        // 正式登陆后，后台可根据此preSessionId查找对应的RSA私钥进行解密
        // 同一时间内可能存在多人同时登陆帐号（引入preSessionId解决）
        this.login(res.data.publicKey, res.data.preSessionId)
      } else {
        // 预登陆失败，则刷新验证码，重置验证码输入框
        this.uuid = uuidv4()
        this.$set(this.form, 'verificationCode', '')
      }
    }
  })
}
复制代码

正式登陆

async login (publicKey, preSessionId) {
  // 随机生成 构成key iv的字符串（这里都采用AES密钥长度16位）
  let keyString = randomGenerate(16) // 这里使用工具类随机生成（详细实现见下文）
  let ivString = randomGenerate(16)
  // 生成AES 密钥和向量
  let key = CryptoJS.enc.Utf8.parse(keyString) // AES密钥
  let iv = CryptoJS.enc.Utf8.parse(ivString) // AES向量
  // RSA公钥加密
  let pubKey = new NodeRSA(publicKey)
  pubKey.setOptions({ encryptionScheme: 'pkcs1' }) // 设置填充方式，前、后端保持统一便可
  // 这里拆分出
  let pwd = CryptoJS.AES.encrypt(
    this.form.password, // 加密原文
    key, // AES密钥
    {
      iv: iv, // AES向量
      mode: CryptoJS.mode.CBC, // 指定CBC模式
      padding: CryptoJS.pad.Pkcs7 // 指定pkcs7填充模式
    })
  // 发送正式登陆请求
  const res = await adminLogin({
    name: this.form.username,
    password: pwd,
    authKey: pubKey.encrypt(keyString, 'base64'), // 加密后base64编码
    authIv: pubKey.encrypt(ivString, 'base64'),
    preSessionId: preSessionId // 预登陆返回的preSessionId
  })
  if (res.data.res === 0) {
    // 验证成功后，可存储AES密钥和向量，后续请求关键信息使用AES加密后上传便可
    sessionStorage.setItem('aesKey', keyString)
    sessionStorage.setItem('aesIv', ivString)
    this.$router.push({ name: 'xxx-home' }) // 进入管理主页面
    // 还能够存储token、session等信息，并提示用户登陆成功 这里不作展现
  } else {
    // 正式登陆失败，则刷新验证码，重置验证码输入框
    this.uuid = uuidv4()
    this.$set(this.form, 'verificationCode', '')
  }
}
复制代码

附：简单生成随机字符串工具类

// 生成随机字符串
function randomGenerate (length) {
  const chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E',
    'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
  if (!Number.isInteger(length) || length <= 0) { // 合法性校验
    console.error('请检查输入随机字符串长度是否为正整数！')
    return 'Error'
  }
  let randomString = ''
  for (let i = 0; i < length; i++) {
    randomString += chars[Math.floor(Math.random() * chars.length)]
  }
  return randomString
}

export { randomGenerate }
复制代码

总结

理解AES + RSA的结合加密思路后，实现方式可根据具体状况修改。 结合两种加密方式使用，能够知足大多数的使用场景，发挥出各自的优势。

————加密定义及分类摘自百度百科

欢迎你们积极讨论，共同进步。 个人简书