前端 Vue 请求数据使用 3DES 加密/解密

一、目的

最近工作中，前端联调后端接口请求的数据是 JSON 格式的明文，考虑到安全问题，与后端同事沟通协调后，规定前端采用 3DES 对请求数据加密，后端接收到请求后再用 3DES 进行解密。

二、效果图

三、具体实现

1、3DES 参数

有加密模式、填充方式、偏移量、密码、字符集、输出格式参数，这些值的选定都是前后端沟通好后统一的，这样加密解密得到的内容才能一致。

2、前端项目通过 npm 安装

npm install crypto-js --save

3、封装加密解密函数，写入文件 3DES.js 。这里示例用 utf8 字符集、 CBC 加密模式、Pkcs7 的填充方式、base64 的编码格式输出。

import cryptoJs from 'crypto-js';// 3DES 加密
export const encryptByDES = (dataStr, key, iv) => {const keyHex = cryptoJs.enc.Utf8.parse(key);const encrypted = cryptoJs.TripleDES.encrypt(dataStr, keyHex, {mode: cryptoJs.mode.CBC, // CBC模式padding: cryptoJs.pad.Pkcs7, // pkcs7padding 填充方式iv: cryptoJs.enc.Utf8.parse(iv) // 设置偏移量（若 ECB 模式则删除该行）});// return encrypted.ciphertext.toString(); // 返回 hex 编码格式return encrypted.toString(); // 返回 base64 编码格式
}// 3DES 解密
export const decryptByDES = (ciphertext, key, iv) => {const keyHex = cryptoJs.enc.Utf8.parse(key);const decrypted = cryptoJs.TripleDES.decrypt({// ciphertext: cryptoJs.enc.Hex.parse(ciphertext) // hex 编码解密ciphertext: cryptoJs.enc.Base64.parse(ciphertext) // base64 编码解密}, keyHex, {mode: cryptoJs.mode.CBC, // CBC模式padding: cryptoJs.pad.Pkcs7, // pkcs7padding 填充方式iv: cryptoJs.enc.Utf8.parse(iv) // 设置偏移量（若 ECB 模式则删除该行）});return decrypted.toString(cryptoJs.enc.Utf8); // 返回 base64 编码格式
}

4、在需要调用的文件引入加密解密函数并调用，规定密码和偏移量。

import { encryptByDES, decryptByDES } from '@/utils/3DES';const _key = 'abcdefg1234567812345678!';  // 密码
const _iv = '20210724';  // 偏移量// 某处调用（通常要结合 axios/ajax 将加密后的结果去发送请求），data 为发送请求的 JSON 格式数据console.log('加密前的请求数据', data);let str1 = encryptByDES(JSON.stringify(data), _key, _iv);  // 把 JSON 格式数据转成字符串格式console.log('加密后的请求数据', str1);console.log('解密后的请求数据', decryptByDES(str1, _key, _iv));  // 测试解密后的数据是否和加密前数据一致

这是我本人在工作学习中做的一些总结，同时也分享出来给需要的小伙伴哈 ~ 供参考学习，有什么建议也欢迎评论留言，转载请注明出处哈，感谢支持！

前端 Vue 请求数据使用 3DES 加密/解密相关推荐

探讨NET Core数据进行3DES加密或解密弱密钥问题
[导读]之前写过一篇<探讨.NET Core数据进行3DES加密和解密问题>,最近看到有人提出弱密钥问题,换个强密钥不就完了吗,猜测可能是与第三方对接导致很无奈不能更换密钥,所以产生本文解 ...
java之php、Android、JAVA、C# 3DES加密解密
异常如下 1.javax.crypto.BadPaddingException: Given final block not properly padded 1)要确认下是否加密和解密都是使用相同的填 ...
Java中3DES加密解密示例
在java中调用sun公司提供的3DES加密解密算法时,需要使用到$JAVA_HOME/jre/lib/目录下如下的4个jar包: jce.jar security/US_export_policy. ...
Java实现3DES加密解密（DESede/ECB/PKCS5Padding使用）
一.简介 3DES(又叫Triple DES)是三重数据加密算法(TDEA,Triple Data Encryption Algorithm)块密码的通称. 它相当于是对每个数据块应用三次DES加密算 ...
iOS 3DES加密解密(一行代码搞定)
3DES(或称为Triple DES)是三重数据加密算法(TDEA,Triple Data Encryption Algorithm)块密码的通称.它相当于是对每个数据块应用三次DES加密算法.由于计 ...
一行代码实现IOS 3DES加密解密
3DES(或称为Triple DES)是三重数据加密算法(TDEA,Triple Data Encryption Algorithm)块密码的通称.它相当于是对每个数据块应用三次DES加密算法.由于计 ...
简进祥==iOS 3DES加密解密
3DES(或称为Triple DES)是三重数据加密算法(TDEA,Triple Data Encryption Algorithm)块密码的通称.它相当于是对每个数据块应用三次DES加密算法.由于计 ...
PB DES、3DES加密解密(简单便捷)
PB DES\3DES加密解密通过VDN的uo_vdncore组件快速简单实现PB的DES.3DES.AES.RSA.Base64.Hex.SHA.MD5.HMac等类型的加密解密,本章我们主要讲解 ...
java 3des_如何用Java进行3DES加密解密 java实现3des加密解密教程
3des,全称为3DESede或TripleDES,中文解释为是三重数据加密,用户可以通过通过对DES算法进行改进,针对每个数据块进行三次DES加密,下面小编为你带来java实现3des加密解密教程! ...

前端 Vue 请求数据使用 3DES 加密/解密

一、目的

二、效果图

三、具体实现

前端 Vue 请求数据使用 3DES 加密/解密相关推荐

最新文章

热门文章