前端AES加密

·  阅读 54

前端在做一些表单提交需要对数据或者敏感信息加密的场景下(比如登录),都需要做加密的处理. AES是一种比较常用的采用对称加密算法高级加密标准的加密方式

下面介绍下使用的两种AES加密模式 ECB模式&CBC模式 在前端项目的使用(ps:vue项目)

首先需要引入js加密算法类库 crypto-js

npm install crypto-js --save
复制代码

CBC模式

需要与后端保持一致的key密钥进行加密,vi则为密钥偏移量(EBC模式则不需要),mode为CBC模式进行计算.以下是具体的解密及加密方法

const CryptoJS = require('crypto-js');  //引用AES源码js   
//解密方法
export function Decrypt(word) {
    const key = CryptoJS.enc.Utf8.parse("abcd1234abcd1234");  //十六位十六进制数作为密钥
    const iv = CryptoJS.enc.Utf8.parse('ABCD1234ABCD1234');   //十六位十六进制数作为密钥偏移量
    let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
    let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
}

//加密方法
export function Encrypt(word) {
    const key = CryptoJS.enc.Utf8.parse("abcd1234abcd1234");  //十六位十六进制数作为密钥
    const iv = CryptoJS.enc.Utf8.parse('ABCD1234ABCD1234');   //十六位十六进制数作为密钥偏移量
    let srcs = CryptoJS.enc.Utf8.parse(word);
    let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    return encrypted.ciphertext.toString().toUpperCase();
}

复制代码

ECB模式

EBC模式下mode为EBC,vi则不需要

const CryptoJS = require("crypto-js"); //引用AES源码js
//  加密方法
export function Encrypt(word) {
  let key = CryptoJS.enc.Utf8.parse("abcd1234abcd1234");  //同样需要十六位数作为密钥
  let srcs = CryptoJS.enc.Utf8.parse(word);
  let encrypted = CryptoJS.AES.encrypt(srcs, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7,
  });
  return encrypted.toString();
}

//  解密方法
export function Decrypt(word) {
  let key = CryptoJS.enc.Utf8.parse("abcd1234abcd1234");
  let decrypt = CryptoJS.AES.decrypt(word, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7,
  });
  return CryptoJS.enc.Utf8.stringify(decrypt).toString();
}

复制代码

以上是AES加密两种模式的例子,在需要的地方进行按需引入即可使用.

另外对于AES加密的核心原理及其他的加密方式,感兴趣的都可以做深入的研究~

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改