一套簡單的基於 RSA + AES 加密機制的前端解決方案

前言

因公司現有後臺管理系統項目需對部分網絡請求接口的重要數據進行加密，整合了一套簡單的基於 RSA + AES 加密機制的前端解決方案。

參考文獻：

1. crypto 廖雪峯
2. crypto-js aes 加解密
3. rsa 加解密

參考 API：

1. crypto-js
2. JSEncrypt

依賴

1. crypto-js： npm i crypto-js
2. JSEncrypt：npm i jsencrypt

加密流程

先上圖

因項目爲後臺管理系統，所以這裏會有兩種業務場景：

1. 用戶在未登錄前是沒有鑑權 token 的，需在成功登錄並獲取 token 後和 encryptKey 一併上傳後端，後端才能將 token 與 encryptKey 做綁定。
2. 用戶已登錄成功，頁面刷新後將會重新生成 aesKey ，這時候需從 cookie 中獲取 token 並和 encryptKey 上傳後端，後端重新綁定 token 和 encryptKey。

代碼

encryption.js 封裝

import CryptoJS from 'crypto-js'
import JSEncrypt from 'jsencrypt'

const encryptor = new JSEncrypt()

// 生成 AESKEY
export const aesKey = createAesKey()

export function createAesKey () {
  const expect = 16
  let str = Math.random().toString(36).substr(2)
  while (str.length < expect) {
    str += Math.random().toString(36).substr(2)
  }
  str = str.substr(0, 16)
  return str
}

/**
 * AES 加密
 * @param word 待加密字段
 * @param keyStr 加密 key
 * @returns {string} 返回加密字段
 */
export function aesEncrypt (word, keyStr) {
  keyStr = keyStr || aesKey
  console.log(keyStr)
  const key = CryptoJS.enc.Utf8.parse(keyStr)
  let srcs = ''
  switch (typeof (word)) {
    case 'string':
      srcs = CryptoJS.enc.Utf8.parse(word)
      break
    case 'object':
      srcs = CryptoJS.enc.Utf8.parse(JSON.stringify(word))
      break
    default:
      srcs = CryptoJS.enc.Utf8.parse(word.toString())
  }
  const encrypted = CryptoJS.AES.encrypt(srcs, key, {iv: key, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7})
  return encrypted.toString()
}

/**
 * AES 解密
 * @param word 待解密數據
 * @param keyStr 解密 key
 * @returns {string} 返回解密字符串
 */
export function aesDecrypt (word, keyStr) {
  keyStr = keyStr || aesKey
  const key = CryptoJS.enc.Utf8.parse(keyStr)
  const decrypt = CryptoJS.AES.decrypt(word, key, { iv: key, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 })
  return CryptoJS.enc.Utf8.stringify(decrypt).toString()
}

/**
 * RSA 設置公鑰
 * @param val 公鑰
 */
export function setPublicKey (val) {
  encryptor.setPublicKey(val)
}

/**
 * RSA 加密
 * @param data 待加密數據
 * @returns {PromiseLike<ArrayBuffer>} 返回加密字符串
 */
export function rsaEncrypt (data) {
  return encryptor.encrypt(data)
}

總結

AES 加解密涉及到的模式（如 CBC、ECB 等）、偏移量和填充等，請參考文中前言提及的文獻和 API

本文僅爲解決方案參考，請結合實際業務需求及業務場景自由發揮