react项目与后端进行AES加解密交互

react项目后端数据加密，前端解密

在做react项目的时候涉及到了加解密，因为在安全检测的时候检测出一个接口返回的数据暴漏了IP，容易被攻击，所以后端要将返回的数据加密，前端再进行解密。

首选了RSA，前后端没有解通，换了只有AES的加解密，然而也是坎坎坷坷。

首先众所周知，前后端加解密交互要保证前后端的密钥key相同，如果是CBC模式，必须要有iv(偏移量)，补位方式也要相同(padding:Pkcs7或Pkcs5等)。

前端代码

在react项目中使用AES安装crypto-js

npm install crypto-js  //命令行安装，也可以采用引入cdn方式

//在react代码中使用
import CryptoJS from 'crypto-js'; //引入
//设置key，iv等
let key = '516a8712yf4c336e'; // 固定约束  后面还可以拼接上当日日期的16进制
let iv = CryptoJS.enc.Hex.parse("30313233343536376521414243444546") // 固定约束
// 获取当前日期 转换成16进制
let t1 = strToHexCharCode(moment().format('YYYYMMDD'))
let key1 = key + t1
key1 = CryptoJS.enc.Hex.parse(key1); //生成一个新的key带有当日日期16进制，加上开始约定的key
// 解密
const deCodeStr = (str, key, iv) => {
    let dec = CryptoJS.AES.decrypt(CryptoJS.format.Hex.parse(str), key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    })
    let re = CryptoJS.enc.Utf8.stringify(dec)
    return re
}

前端设置的key与iv要与后端一致，可以通过调用接口来获取后端设置的key和iv，也可以和后端商量好各自直接写好key与iv，不通过接口传递。

后端代码（简略版，从后端那偷来的代码）

	/**
	 * 偏移量字符串必须是16位 当模式是CBC的时候必须设置偏移量
	 */
	private static String iv = "urhse56789ABCDEF";
	/**
	 * 默认的密钥key
	 */
	private static String defaultKey = "Uhx#_L92";
	/**
	 * 加密方式
	 */
	private static String Algorithm = "AES";
	/**
	 * 算法/模式/补码方式
	 */
	private static String AlgorithmProvider = "AES/CBC/PKCS5Padding";
	//后端封装好的方法
	/**
	 * 将byte转换为16进制字符串
	 *
	 * @param src
	 * @return
	 */
	public static String byteToHexString(byte[] src) {
		StringBuilder sb = new StringBuilder();
		for (int i = 0; i < src.length; i++) {
			int v = src[i] & 0xff;
			String hv = Integer.toHexString(v);
			if (hv.length() < 2) {
				sb.append("0");
			}
			sb.append(hv);
		}
		return sb.toString();
	}
	//应该是对iv的值进行了数据转换
	public static IvParameterSpec getIv() throws UnsupportedEncodingException {
		IvParameterSpec ivParameterSpec = new IvParameterSpec(iv.getBytes(StandardCharsets.UTF_8));
		return ivParameterSpec;
	}

后端的代码后面还对key值也进行了进制转换，具体代码不贴了，应该百度一大堆。
前端也对key值和iv值进行了转换 CryptoJS.enc.Hex.parse，转换后的16进制或者其他格式要与后端一致。

差不多就这样吧，因为加班搞了好久，所以记录一下。