前端使用ASE加解密(AES/CBC/NoPadding)

前端使用ASE加解密(AES/CBC/NoPadding)

前言

最新因需求变动,原有Android系统已经不满足现有的需求,需开发PC端的客户端,对应的数据加解密也不能公用同一个类库(后端服务使用的JAVA),现有架构使用的是nodejs,所以记录以下加解密的过程。

环境
  • nodejs v14.17.5
  • vue3
  • electron 13.0.0
安装加解密依赖

yarn

yarn add crypto-js

npm

npm install crypto-js --save-dev
加解密工具类

AESUtils.js

import CryptoJS from "crypto-js";
//加密
export function Encrypt(data,key,iv) {
    //编码 key
    key = CryptoJS.enc.Utf8.parse(key);
    //编码iv
    iv = CryptoJS.enc.Utf8.parse(iv);
	//编码data
    data = CryptoJS.enc.Utf8.parse(data);
    // 加密模式为CBC,补码方式为NoPadding
    let encrypted = CryptoJS.AES.encrypt(data, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.NoPadding
    });
    console.log("加密后的数据:",encrypted.toString())
    //返回base64
    return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);

}
//解密
export function Decrypt(data,key,iv) {
    //编码
    key = CryptoJS.enc.Utf8.parse(key);
    //编码
    iv = CryptoJS.enc.Utf8.parse(iv);
    //Base64编码
    const base64 = CryptoJS.enc.Base64.parse(data);
    const base64Str = CryptoJS.enc.Base64.stringify(base64);
    const decrypt = CryptoJS.AES.decrypt(base64Str, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.NoPadding
    });
    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    console.log("解密后的数据:",decryptedStr.toString())
    return decryptedStr.toString();
}

注意:如果导致解密不成功需要注意 mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.NoPadding与服务端是否一致,不一致即会造成加解密失败;

使用

本片实验环境为VUE,则引入方式入下

import { Encrypt, Decrypt} from 'utils/AESUtils.js'

调用

const key = "09dff66a91bbff58452e9090eb2cfeb5";
const iv = "87705261ed666ea3";
const data = "bfb7758c68396bbb088dced7c55b4cf7";
//加密
const encrypted = Encrypt(data,key,iv);
console.log("输出加密结果:",encrypted)
//输出加密结果:Z18AuLGua+YEJ4ahQuvAvDORNr/Yns2Dh1vO96ZCQH8=
//解密
const decrypted = Decrypt(decrypted,key,iv)
console.log("输出解密结果:",decrypted)
总结

以上即使前端AES加解密的过程,不要问我为什么知道mode与pad需要注意,你懂的,大家如果有更好的方案欢迎讨论,本人Java程序员一个,不要太严厉。

参考

AES Encrypt using CryptoJS

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值