三分钟撸完前后端crypto-js加解密,你学废了吗?
文章目录
- 前言
- 一、AES概念
- 二、前端加密
- 1.安装依赖库
- 2.实现AES加密算法
- 3.前端演示效果
- 三、后端加密
- 1.加密工具类
- 2.加密测试
- 四、Security实现密码加解密
- 1、前台加密
- 1、后台解密
- 总结
前言
去年公司做了一个教育项目,该项目涉及到的敏感数据比较多,都是政府单位的人员保密数据,最终决定前后端进行接口加密处理,采用的是 AES + BASE64 算法加密,本篇文章我们再来复盘一下,不过之前公司的加密方式比这个复杂,不过整体思路设计上面和这个大同小异。
一、AES概念
高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法(微信小程序加密传输就是用这个加密算法的)。
相比于其他加密,AES加密似乎模式很多,包括ECB、CBC等等,本篇文章使用的是CBC模式,每个模式又包括IV参数和Padding参数,并且不同语言对AES加密的库设计有区别,这就导致了在不同的语言上面编写代码的难度。所以在我们设计AES加密的时候,应该注意一下几点:
- 加密秘钥长度,秘钥,IV值,加密模式,PADDING方式(一般为:PKCS5, PKCS7, NOPADDING)
- AES加密解密的秘钥有一对,一个是IV一个是KEY,并且他们的长度都有严格要求(十六位十六进制数)
二、前端加密
这里我们前后端统一采用AES对称加密的算法来实现登录密码和账号的加密。
对称加密算法:加密和解密用到的密钥是相同的,这种加密方式加密速度非常快,适合经常发送数据的场合。缺点是密钥的传输比较麻烦。
非对称加密算法:加密和解密用的密钥是不同的,这种加密方式是用数学上的难解问题构造的,通常加密解密的速度比较慢,适合偶尔发送数据的场合。优点是密钥传输方便。常见的非对称加密算法为RSA、ECC和EIGamal。
实际中,一般是通过RSA加密AES的密钥,传输到接收方,接收方解密得到AES密钥,然后发送方和接收方用AES密钥来通信。
1.安装依赖库
npm install crypto-js --save-dev
2.实现AES加密算法
CBC:是一种循环模式,前一个分组的密文和当前分组的明文异或或操作后再加密,这样做的目的是增强破解难度。(不容易主动攻击,安全性好于ECB,是SSL、IPSec的标准)
const CryptoJS = require('crypto-js');
// 十六位十六进制数作为密钥(KEY必须和后台保持一致)
const key = CryptoJS.enc.Utf8.parse("CMDDTYDF&WY196KJ");
// 十六位十六进制数作为密钥偏移量
const iv = CryptoJS.enc.Utf8.parse('CMDDTYDF&WY196KJ'); //解密方法
function Decrypt(data) {let encryptedHexStr = CryptoJS.enc.Base64.parse(data);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();
}//加密方法
function Encrypt(data) {let srcs = CryptoJS.enc.Utf8.parse(data);let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
}export default {Decrypt ,Encrypt
}
3.前端演示效果
全部代码:
<template><div class="container"><el-row><el-card shadow="never"><div slot="header"><h1>AES加密测试:<el-button type="primary" size="small" @click="keyBtn">AES加密</el-button></h1><p><el-input v-model="password" placeholder="请输入新密码"></el-input></p><p><el-input v-model="key" placeholder="秘钥" readonly></el-input></p><h1>AES解密测试:<el-button type="success" size="small" @click="keyBtn1">AES解密</el-button></h1><p><el-input v-model="key1" placeholder="请输入秘钥"></el-input></p><p><el-input v-model="password1" placeholder="原密码" disabled></el-input></p></div></el-card></el-row></div>
</template><script>
export default {data() {return {password: '',key: '',password1: '',key1: ''}},methods: {keyBtn: function () {let password = this.cryptoAes.Encrypt(this.password)this.key = password},keyBtn1: function () {let key1 = this.cryptoAes.Decrypt(this.key1)this.password1 = key1}}
}
</script>
三、后端加密
1.加密工具类
/*** AES加密工具类* @author DT* @date 2021/9/4 13:10*/
public class AesEncryptUtils {/*** 使用AES-128-CBC加密模式,key需要为16位,key和iv可以相同,也可以不同!*/private static final String KEY = "CMDDTYDF&WY196KJ";private static final String IV = "CMDDTYDF&WY196KJ";/*** 算法/模式/补码方式*/private static final String CIPHER_ALGORITHM_CBC = "AES/CBC/NoPadding";private static final String AES_ENC = "AES";/*** 加密方法* @param data 要加密的数据* @return 加密的结果*/public static String encrypt(String data){try {Cipher cipher = Cipher.getInstance(CIPHER_ALGORITHM_CBC);int blockSize = cipher.getBlockSize();byte[] dataBytes = data.getBytes();int plaintextLength = dataBytes.length;if (plaintextLength % blockSize != 0) {plaintextLength = plaintextLength + (blockSize - (plaintextLength % blockSize));}byte[] plaintext = new byte[plaintextLength];System.arraycopy(dataBytes, 0, plaintext, 0, dataBytes.length);SecretKeySpec keySpec = new SecretKeySpec(KEY.getBytes(), AES_ENC);IvParameterSpec ivSpec = new IvParameterSpec(IV.getBytes());cipher.init(Cipher.ENCRYPT_MODE, keySpec, ivSpec);byte[] encrypted = cipher.doFinal(plaintext);return new Base64().encodeToString(encrypted);} catch (Exception e) {e.printStackTrace();return null;}}/*** 解密方法* @param data 解密的数据* @return 解密的结果*/public static String desEncrypt(String data) {try {byte[] encrypted1 = new Base64().decode(data);Cipher cipher = Cipher.getInstance(CIPHER_ALGORITHM_CBC);SecretKeySpec keySpec = new SecretKeySpec(KEY.getBytes(), AES_ENC);IvParameterSpec ivSpec = new IvParameterSpec(IV.getBytes());cipher.init(Cipher.DECRYPT_MODE, keySpec, ivSpec);byte[] original = cipher.doFinal(encrypted1);return new String(original).trim();} catch (Exception e) {e.printStackTrace();return null;}}
}
2.加密测试
public static void main(String[] args) {String encrypt = encrypt("123456");System.out.println("加密结果:"+encrypt);}
public static void main(String[] args) {String encrypt = desEncrypt("Ey4UI/fer5TjFituPzYEAA==");System.out.println("解密结果:"+encrypt);}
四、Security实现密码加解密
1、前台加密
1、后台解密
总结
最后文章到这里就结束了,最近小编的最新版Spring Cloud Alibaba微服务架构-Sentinel高可用防护组件篇马上也要发布了,希望大家尝鲜,并且小编之前打造过一个后台管理系统,正在代码重构当中,集成了Activiti工作流,大家可以期待一下,总之不负小伙伴们的支持,后面会越来越多的干货,并且会给大家整体理一下,作为一个新生代农民工,我们应该如何提高我们的技术,这里小编自己创建了一个交流群,感兴趣的同学可以加入,群号在博客主页能看到,大家一起畅聊,无论前端还是后端,运维,都欢迎,职业不限。
本篇文章结束了,后面我们再继续深入研究微服务其他的组件的使用以及原理剖析,创作不易,喜欢的请关注小编CSDN:https://blog.csdn.net/qq_41107231 以及掘金:https://juejin.cn/user/3940246036699848
三分钟撸完前后端crypto-js加解密,你学废了吗?相关推荐
- 学习加密(四)spring boot 使用RSA+AES混合加密,前后端传递参数加解密
学习加密(四)spring boot 使用RSA+AES混合加密,前后端传递参数加解密 技术标签: RSA AES RSA AES 混合加密 整合 前言: 为了提高安全性采用了RSA,但 ...
- 前后端RSA互相加解密、加签验签、密钥对生成(Java)
目录 一.序言 二.关于PKCS#1和PKCS#8格式密钥 1.简介 2.区别 二.关于JSEncrypt 三.关于jsrsasign 四.前端RSA加解密.加验签示例 1.相关依赖 2.crypto ...
- 【Bcrypt+AES】 Vue+Java前后端分离信息加解密详解和问题解决
文章目录 1.简单介绍Bcrypt[单向hash] 2.登录服务:使用Bcrypt加密和验证 2.1 Vue前端使用Bcrypt加密 2.2 SpringBoot后端使用Bcrypt验证密码 3.简单 ...
- Spring Boot 使用AES前后端传递参数加解密
1.创建工具类 import lombok.extern.slf4j.Slf4j; import org.apache.commons.codec.binary.Base64;import javax ...
- 学习加密(四)spring boot 使用RSA+AES混合加密,前后端传递参数加解密(方式一)
参考地址:https://blog.csdn.net/baidu_38990811/article/details/83540404
- 10086登录JS加解密充值讲解
系列文章目录 1.10086登录JS加解密 2.10086跳转Cookies存活 3.如何请求充值话费 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 系列文章目录 前言 ...
- 深入学习POST + JS加解密
<深入学习POST + JS加解密> 小肩膀post js百例高端js解密 链接:https://pan.baidu.com/s/1i9003bTe8iVjLlnMAVa0PQ 提取码:h ...
- 3分钟搞懂前后端开发的区别
上周末见了好多开发的年轻朋友,问了我一个问题:"前后端的区别和要求是什么?"分不清前后端开发的区别和要求,一种是因为前后端都了解,号称"全栈工程师",但又什么都 ...
- Base64 混淆加密+迭代次数,Base64前后端加解密不一致、Base64 js加解密结果与java加解密结果不一致,Base64中文加密乱码
Table of Contents 概述 一.js加密,java解密 1.js加密 1.中文字符串加密 2.英文等字符串加密 3.中文字符串混淆.迭代加密 4.英文等字符串混淆.迭代加密 5.JSON ...
最新文章
- 算法刷题宝典.pdf
- flask需求文件requirements.txt的创建及使用
- 网不好怎么办?TLS握手带宽直降80%,BabaSSL是怎么做到的?| 龙蜥技术
- ++实现 ipv6数据报_IPV6报文格式和IPV4有什么区别?
- 了解媒体播放控件 winform
- ZT:Delphi源程序格式书写规范
- 飞机大战项目(源代码(直接用),有效果图,素材包)
- time+dd测试硬盘读写速度
- 根据日期获取周数的计算
- 手机怎么识别图中文字?这两个方法靠谱
- SAP SD发货流程中托盘的管理
- Jquery电子签名制作_jSignature
- Elasticsearch:从写入原理谈写入优化
- 谷歌2017面经题集
- 右键菜单“新建”的修改
- Kvaser Android驱动程序已经在许多应用程序中得到了成功的应用
- Linux命令学习笔记(一)目录操作
- 中国合伙人及致青春电影名言
- semantic navigation 目标驱动的视觉语义导航(二)
- GRCh38参考数据分析流程(转)
热门文章
- mysql_install_db参数_MySQL初始化脚本mysql_install_db使用简介及选项参数
- 信息学奥赛一本通 1170:计算2的N次方 | OpenJudge NOI 1.6 12:计算2的N次方
- 信息学奥赛一本通 1133:输出亲朋字符串 | OpenJudge NOI 1.7 05
- 信息学奥赛一本通 1956:【11NOIP普及组】表达式的值 | 洛谷 P1310 [NOIP2011 普及组] 表达式的值
- OpenJudge NOI 1.5 16:买房子
- 信息学奥赛一本通 1068:与指定数字相同的数的个数 | OpenJudge NOI 1.5 12
- 信息学奥赛一本通(1182:合影效果)——归并排序
- 信息学奥赛一本通(1130:找第一个只出现一次的字符)
- 训练日志 2018.12.6
- 19 CO配置-控制-产品成本控制-产品成本计划编制-定义日期控制