需求背景

项目中后端要求前端请求后台接口时对请求参数进行加密处理。
因为我的需求是加密可逆,后端要求使用3DES加解密,最后返回返回base64格式
加密过得,传给后端,后端再进行解密。

什么是3DES??

3DES(即Triple DES)是DES向AES过渡的加密算法,它使用3条56位的密钥对数据进行三次加密。是DES的一个更安全的变形。原版DES容易被破解,新的3DES出现,增加了加密安全性,避免被暴力破解。它同样是对称性加密,同样涉及到加密编码方式,及填充方式。
它以DES为基本模块,通过组合分组方法设计出分组加密算法。比起最初的DES,3DES更为安全。

解决过程

  1. npm下载js包 ;Crypto里面可以把md5和3des一起做了,所以直接安装这个比较方便
npm i crypto-js
  1. 在 util.js引入新建 crypto.js 文件,对加密解密文件进行封装

message: 需要加解密的文本
key1: 加解密的秘钥
iv1: 偏移量,最短8位数,ECB模式不需要此参数


import cryptoJs from 'crypto-js';

//随机生成指定数量的16进制key
export const generatekey = (num) => {
    let library = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    let key = "";
    for (var i = 0; i < num; i++) {
        let randomPoz = Math.floor(Math.random() * library.length);
        key += library.substring(randomPoz, randomPoz + 1);
    }
    return key;
}
// DES(CBC)加密
export const encryptByCBC = function (message, key1, iv1) {
    let key = cryptoJs.enc.Utf8.parse(key1);
    let iv = cryptoJs.enc.Utf8.parse(iv1);
    let srcs = cryptoJs.enc.Utf8.parse(message);
    // 加密模式为CBC,补码方式为PKCS5Padding(也就是PKCS7)
    let encrypted = cryptoJs.TripleDES.encrypt(srcs, key, {
            iv: iv,
            mode: cryptoJs.mode.CBC,
            padding: cryptoJs.pad.Pkcs7
    });
    return cryptoJs.enc.Base64.stringify(encrypted.ciphertext);   //返回base64
}

// DES(CBC)解密
export const decryptByCBC = function (message, key1, iv1) {
    let key = cryptoJs.enc.Utf8.parse(key1);
    let iv = cryptoJs.enc.Utf8.parse(iv1);
    let base64 = cryptoJs.enc.Base64.parse(message);
    let src = cryptoJs.enc.Base64.stringify(base64);
    // 解密模式为CBC,补码方式为PKCS5Padding(也就是PKCS7)
    let decrypt = cryptoJs.TripleDES.decrypt(src, key, {
            iv: iv,
            mode: cryptoJs.mode.CBC,
            padding: cryptoJs.pad.Pkcs7
    });
    let decryptedStr = decrypt.toString(cryptoJs.enc.Utf8);
    return decryptedStr.toString();
  }


export default {
    encryptByCBC,
    decryptByCBC,
}
  1. 用的时候在相应的js文件里引入
import crypto from "@/utils/crypto.js";
var key = "xxxxxxxxx";
var iv = "xxx_xxxx";
var en_str = crypto.encryptByCBC(json_arr, key, iv);  //json_arr是要加密的内容
console.log('加密' + en_str);
var de_str = crypto.decryptByCBC(en_str, key, iv);
console.log('解密' + de_str);

需要注意的是:
加密时候需要对字符串加密,var json_arr = JSON.stringify(arr); //js对象转为JSON字符串
解密时候需要转为对象,this.de_str = JSON.parse(this.de_str); //JSON字符串转为一个对象

另外,做的过程中一开始我用的是DES加解密得cryptoJs.DES,后来在后端同事的提醒下更换成了3EDS的,唯一的区别就是这个可恶的cryptoJs.TripleDES
在这里插入图片描述

分享资料

分享一个可以自测加解密是否成功的工具网站,只需要按需求选择好,在输入待加解密的文本就好
http://tool.chacuo.net/crypt3des
在这里插入图片描述
附上做的过程中参考过不错的文章,希望也对大家有所帮助
关于 vue中使用crypto-js,进行DES 的加密解密
vue项目加密之CBC加密

Logo

前往低代码交流专区

更多推荐