crypto-js前端实现加密学习日志(—项目实践)

1、由于项目需要，对文件进行加密，然后上传至阿里oss。出于后端带宽压力，在前端进行加密。由于加密过程比较耗时，容易阻塞主进程，所以决定使用worker来进行。

废话不多说，直接上代码。

2、首先是utils.ts，主要是封装一些加密、解密、通用工具类。

import CryptoJs, {WordArray, AES} from 'crypto-js';
/**
 * 加密函数使用的CryptoJs的AES/CBC/pkcs7进行加密
 * @param {*} key 加密用的秘钥，由于项目中的key使用了base64编码，所以需要解码
 * @param {*} content 要加密的内容，CryptoJs接收WordArray | string
 * @returns res返回值为加密后的WordArray, 大端序。
 */ 
export const encode = (key: string, content: string | WordArray) => {
  const encodeKey = CryptoJs.enc.Base64.parse(key)
  const ivWords = [...encodeKey.words].splice(0, 4)
  const iv = CryptoJs.lib.WordArray.create(ivWords)
  const res = AES.encrypt(content, encodeKey, {
    iv: iv,
    mode: CryptoJs.mode.CBC,
    padding: CryptoJs.pad.Pkcs7
  }).ciphertext
  return res
}

/**
 * 
 * @param {*} array 要初始化为WordArray的typedArray
 * @returns res返回值为WordArray(Crypto使用的WordArray)
 */
export type typedArray = String | ArrayBuffer | Int32Array | Uint32Array | Int16Array | Uint16Array
        | Int8Array | Uint8ClampedArray | Uint8Array | Float32Array | Float64Array
export const createWordArray = (array: typedArray) => {
  return CryptoJs.lib.WordArray.create(array)
}

/**
 * @param {*} array 要解密的WordArray
 * @returns res返回值为CipherParams(CryptoJS解密用的)
 */
 export const formatCipher = (array: WordArray) => {
   return CryptoJs.lib.CipherParams.create({ciphertext: array})
 }

 /**
  * 解密函数
  * @param {*} key //解密时候用的key
  * @param {*} content // 要解密的内容(CryptoJS接收string | WordArray)
  * @returns res // 解密后的文件内容，通过base64编码
  */
 export const decode = (key: string, content: string | WordArray) => {
  const decodeKey = CryptoJs.enc.Base64.parse(key)
  const ivWords = [...decodeKey.words].splice(0, 4)
  const iv = CryptoJs.lib.WordArray.create(ivWords)
  var res = AES.decrypt(content, decodeKey, {
    iv: iv,
    mode: CryptoJs.mode.CBC,
    padding: CryptoJs.pad.Pkcs7
  }).toString(CryptoJs.enc.Base64)
  return res
 }
/**
 * WordArray 转化为DataView
 * @param wordArray 
 * @returns DataView
 */
 export const wAToB = (wordArray: WordArray) => {
  const buffer = new ArrayBuffer(wordArray.sigBytes)
  let resView = new DataView(buffer)
  for(let i = 0; i < wordArray.words.length; i++) {
    resView.setInt32(i * 4, wordArray.words[i])
  }
  return resView
}

2.encode.worker.ts这是加密的worker线程，

import {encode, createWordArray, wAToB} from '../utils/utils';
const enWorker: Worker = self as any;
enWorker.onmessage =  function(e) {
  const {file, tokenInfo} = e.data
  const reader = new FileReader();
  reader.onload = function() {
    const { key, fileName } = tokenInfo;
    let content = reader.result;
    content = createWordArray(content);
    content = encode(key, content);
    const res = wAToB(content)
    const resFile = new File([res], fileName, {type: file.type})
    enWorker.postMessage({content: resFile, done: true})
  }
  reader.readAsArrayBuffer(file)
}

export default null as any

3、decode.worker.ts解密的worker线程

import {decode, formatCipher, createWordArray} from '../utils/utils';
const deWorker: Worker = self as any;
deWorker.onmessage = function(e) {
  const {file, key, type} = e.data
  let content = createWordArray(file)
  content = formatCipher(content)
  const res = decode(key, content)
  const resStr = `data:${type};base64,${res}`
  deWorker.postMessage({content: resStr, done: true})
}
export default null as any

4、创建index.tsx。把worker.ts引入，然后实例化。

import React, {useState} from 'react';
import './index.css';
import EncodeWorker from '../workers/encode.worker';
import DecodeWorker from '../workers/decode.worker';

function EncodePage() {
  
  const [fileList, setFileList] = useState([])

  const changeFile = (files: FileList) => {
    console.log(files)
    const file = files[0]
    if(!file) {
      return
    }
    if(file.size > 1024*1024*50) {
      return alert('文件太大')
    }
    changeFileList({
      id: `-${file.lastModified}`,
      name: file.name,
      content: null
    })
    encodeFile(file)
  }

  const changeFileList = (file) => {
    const ind = fileList.findIndex(
      item =>
        item.id === file.id
    )
    if(ind === -1) {
      fileList.push(file)
    } else {
      fileList.splice(ind, 1, file)
    }
    setFileList([...fileList])
  }
  // 加密
  const encodeFile = (file: File) => {
    const encodeWorker = new EncodeWorker();
    encodeWorker.postMessage({file, tokenInfo: {fileName: file.name, key: 'axyIIVwxqRnPnqc9RDRzXg=='}})
    encodeWorker.onmessage = function(e) {
      let {content, done} = e.data;
      if(done){
        encodeWorker.terminate()
        changeFileList({
          id: `-${file.lastModified}`,
          name: file.name,
          content: content
        })
        console.log('end-encode', new Date().getTime())
      }
    }
  }
  //解密
  const decodeFile = (file: String | ArrayBuffer, name: String, type: String) => {
    const decodeWorker = new DecodeWorker();
    decodeWorker.postMessage({file, key: 'axyIIVwxqRnPnqc9RDRzXg==', type})
    decodeWorker.onmessage = function(e) {
      let {content, done} = e.data;
      if(done){
        decodeWorker.terminate()
        console.log('end-decode', new Date().getTime())
        downloadFile(content, name)
      } else {
        console.log(content)
      }
    }
  }

  const downloadFile = (url, name) => {
    let a = document.createElement('a')
    a.href = `${url}`
    a.target = "__blank"
    a.download = name || ""
    a.click()
  }

  const downEncodeFile = (file) => {
    // console.log(file)
    const reader = new FileReader()
    reader.onload = function() {
      // console.log(reader.result)
      downloadFile(reader.result, file.name)
    }
    reader.readAsDataURL(file)
  }

  const downDecodeFile = (file) => {
    const reader = new FileReader()
    reader.onload = function() {
      decodeFile(reader.result, file.name, file.type)
    }
    reader.readAsArrayBuffer(file)
  }

  return (
    <div className="upload-file">
      <div className="file-btn">
        <span>选择文件</span>
        <input type="file" onChange={(e) => changeFile(e.target.files)} />
      </div>
      <div className="file-list">
        {
          fileList.map((v) => {
            return (
              <div key={v.id} className="file-item">
                {v.name}
                （{v.content?'加密完成':'加密中...'}）
                <span onClick={() => downEncodeFile(v.content)} className="download-btn">下载加密文件</span>
                <span onClick={() => downDecodeFile(v.content)} className="decode-btn">下载解密文件</span>
              </div>
            )
          })
        }
      </div>
    </div>
  )
}

export default EncodePage

5、在线测试demo请移动我的github站。