Vue和Java使用AES加密传输

embedded/2025/2/6 7:06:45/

背景:Vue对参数进行加密,对响应进行解密。Java对参数进行解密,对响应进行解密。不拦截文件上传类请求、GET请求。

【1】前端配置

安装crypto

npm install crypto-js

编写加解密工具类encrypt.js

import CryptoJS from 'crypto-js'const KEY = CryptoJS.enc.Utf8.parse('0123456789123456')
const IV = CryptoJS.enc.Utf8.parse('0123456789123456')// 加密函数
export function encryptData(data) {const encrypted = CryptoJS.AES.encrypt(data,KEY,{iv: IV,mode: CryptoJS.mode.CBC,padding: CryptoJS.pad.Pkcs7// padding: CryptoJS.pad.Pkcs7})return encrypted.toString()
}// 解密函数
export function decryptData(data) {const decrypted = CryptoJS.AES.decrypt(data,KEY,{iv: IV,mode: CryptoJS.mode.CBC,// padding: CryptoJS.pad.NoPaddingpadding: CryptoJS.pad.Pkcs7})return CryptoJS.enc.Utf8.stringify(decrypted)
}

axios对请求和响应进行处理

对请求进行参数加密:

// 对非文件上传/下载请求的参数进行加密
if (!request.url.includes('file')) {if (request.method.toLowerCase() === 'post' || request.method.toLowerCase() === 'put') {let reqParams = {}reqParams.params=encryptData(request.data)request.data = Qs.stringify(reqParams)}
}

对响应进行参数解密:

let checkData=response.data
// 去除换行符
// checkData=checkData.replace(/(\r\n|\n|\r)/gm, '')
//去除空格
// checkData = checkData.replace(/\s/g,'')
let resData = decryptData(checkData)
// SyntaxError: Unexpected non-whitespace character after JSON at position 283 (line 1 column 284)
resData=resData.replace(/[^\x20-\x7E\u4E00-\u9FFF]+/g, "");
response.data = JSON.parse(resData.trim());

【2】后端配置

AesUtil 加解密工具类

public class AesUtil {/**** key和iv值可以随机生成*/private static final String KEY = "0123456789123456";private static final String IV = "0123456789123456";/**** 加密* @param  data 要加密的数据* @return encrypt*/public static String encrypt(String data){return encrypt(data, KEY, IV);}/**** param data 需要解密的数据* 调用desEncrypt()方法*/public static String desEncrypt(String data){return desEncrypt(data, KEY, IV);}/*** 加密方法* @param data  要加密的数据* @param key 加密key* @param iv 加密iv* @return 加密的结果*/private static String encrypt(String data, String key, String iv){try {//"算法/模式/补码方式"NoPadding PkcsPaddingCipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
//            Cipher cipher = Cipher.getInstance("AES/CBC/NoPadding");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");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 要解密的数据* @param key  解密key* @param iv 解密iv* @return 解密的结果*/private static String desEncrypt(String data, String key, String iv){try {byte[] encrypted1 = new Base64().decode(data);Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
//            Cipher cipher = Cipher.getInstance("AES/CBC/NoPadding");SecretKeySpec keySpec = new SecretKeySpec(key.getBytes(), "AES");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;}}
}

使用过滤器对请求进行解密、响应进行加密,参考博文:修改Request与Response中的内容


http://www.ppmy.cn/embedded/159961.html

相关文章

vim-plug的自动安装与基本使用介绍

vim-plug介绍 Vim-plug 是一个轻量级的 Vim 插件管理器,它允许你轻松地管理 Vim 插件的安装、更新和卸载。相较于其他插件管理器,vim-plug 的优点是简单易用,速度较快,而且支持懒加载插件(即按需加载) 自动…

3.【BUUCTF】XSS-Lab1

进入题目页面如下 好好好&#xff0c;提示点击图片&#xff0c;点进去页面如下&#xff0c;且url中有传参&#xff0c;有注入点 发现题目给出了源码 查看得到本题的源码 分析一下代码 <!DOCTYPE html><!--STATUS OK--> <!-- 声明文档类型为 HTML5&#xff0c;告…

基于 docker 的mysql 5.7 主主集群搭建

创建挂载目录和配置文件 主节点1 mkdir -p /mysql_master_1/mysql/log mkdir -p /mysql_master_1/mysql/data mkdir -p /mysql_master_1/mysql/conf vim /mysql_master_1/mysql/conf/my.cnf[mysqld] datadir/var/lib/mysql #MySQL 数据库文件存放路径 server_id 1 #指定数据…

React组件中的列表渲染与分隔符处理技巧

React组件中的列表渲染与分隔符处理技巧 摘要问题背景解决方案分析方案一&#xff1a;数组拼接法方案二&#xff1a;Fragment组件方案三&#xff1a;动态生成key 关键技术点1. key的使用原则2. Fragment组件3. 性能优化 实战演练挑战1&#xff1a;动态分隔符样式挑战2&#xff…

SQL中的三值逻辑和NULL

在SQL中&#xff0c;三值逻辑是一个重要概念&#xff0c;它的存在主要是由于 NULL 值的引入。NULL 代表未知值&#xff0c;它既不是空字符串&#xff0c;也不是数字 0&#xff0c;而是一个特殊的标记&#xff0c;表示数据缺失或不可用。 目录 SQL的三值逻辑 NULL的特性 NULL…

【单层神经网络】softmax回归的从零开始实现(图像分类)

softmax回归 该回归分析为后续的多层感知机做铺垫 基本概念 softmax回归用于离散模型预测&#xff08;分类问题&#xff0c;含标签&#xff09; softmax运算本质上是对网络的多个输出进行了归一化&#xff0c;使结果有一个统一的判断标准&#xff0c;不必纠结为什么要这么算…

Java NIO详解

一、NIO简介 NIO 中的 N 可以理解为 Non-blocking&#xff0c;不单纯是 New&#xff0c;是解决高并发、I/O高性能的有效方式。 Java NIO 是Java1.4之后推出来的一套IO接口&#xff0c;NIO提供了一种完全不同的操作方式&#xff0c; NIO支持面向缓冲区的、基于通道的IO操作。 …

unity学习26:用Input接口去监测: 鼠标,键盘,虚拟轴,虚拟按键

目录 1 用Input接口去监测&#xff1a;鼠标&#xff0c;键盘&#xff0c;虚拟轴&#xff0c;虚拟按键 2 鼠标 MouseButton 事件 2.1 鼠标的基本操作 2.2 测试代码 2.3 测试情况 3 键盘Key事件 3.1 键盘的枚举方式 3.2 测试代码同上 3.3 测试代码同上 3.4 测试结果 4…