devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【加解密】前后端接口交互使用AES加解密_前后端加解密

作者：小小林熬夜学编程 | 2024-05-18 17:49:40

赞

踩

前后端加解密

【开发背景】

接口数据加解密是前后端分离开发非常常见的应用场景。

前端：vue3+typescript+vite

后端：SpringBoot

【前端代码】

1. 安装crypto-js

npm install crypto-js

2. src/utils下新建secret.ts

  1. import CryptoJS from 'crypto-js'
  2.  
  3. export interface CrypotoType {
  4.   encrypt: any
  5.   decrypt: any
  6. }
  7.  
  8. // 默认的 KEY 与 iv 如果没有给
  9. const KEY = CryptoJS.enc.Utf8.parse('yourkeycodexxxx')
  10. const IV = CryptoJS.enc.Utf8.parse('yourivcodexxxx')
  11.  
  12. /**
  13.  * AES加密 ：字符串 key iv  返回base64
  14.  */
  15. export function Encrypt(word: any, keyStr?: any, ivStr?: any) {
  16.   let key = KEY
  17.   let iv = IV
  18.   if (keyStr) {
  19.     key = CryptoJS.enc.Utf8.parse(keyStr)
  20.     iv = CryptoJS.enc.Utf8.parse(ivStr)
  21.   }
  22.   const srcs = CryptoJS.enc.Utf8.parse(word)
  23.   const encrypted = CryptoJS.AES.encrypt(srcs, key, {
  24.     iv: iv,
  25.     mode: CryptoJS.mode.CBC,
  26.     padding: CryptoJS.pad.ZeroPadding
  27.   })
  28.   return CryptoJS.enc.Base64.stringify(encrypted.ciphertext)
  29. }
  30.  
  31. /**
  32.  * AES 解密 ：字符串 key iv  返回base64
  33.  *
  34.  * @return {string}
  35.  */
  36. export function Decrypt(word: any, keyStr?: any, ivStr?: any) {
  37.   let key = KEY
  38.   let iv = IV
  39.  
  40.   if (keyStr) {
  41.     key = CryptoJS.enc.Utf8.parse(keyStr)
  42.     iv = CryptoJS.enc.Utf8.parse(ivStr)
  43.   }
  44.  
  45.   const base64 = CryptoJS.enc.Base64.parse(word)
  46.   const src = CryptoJS.enc.Base64.stringify(base64)
  47.  
  48.   const decrypt = CryptoJS.AES.decrypt(src, key, {
  49.     iv: iv,
  50.     mode: CryptoJS.mode.CBC,
  51.     padding: CryptoJS.pad.ZeroPadding
  52.   })
  53.  
  54.   return CryptoJS.enc.Utf8.stringify(decrypt)
  55. }

需要注意的是，在转化成字符串的过程中一定要指定编码格式为UTF-8。

3. 在request/response拦截器里进行加密解密

/src/http/index.ts

  1. // 引入AES加解密
  2. import { Encrypt, Decrypt } from '@/utils/secret.js'

(1)请求发送之前，对请求数据进行加密处理

  1. config.data = Encrypt(JSON.stringify(config.data))
  2. config.headers!['Content-Type'] = 'application/json' // 指定传送数据格式为JSON

(2)接收数据之前，对接收数据进行解密处理

res.data = JSON.parse(Decrypt(res.data))

完整代码

  1. /** 封装axios **/
  2. import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
  3. import { Toast } from 'vant'
  4. // 引入AES加解密
  5. import { Encrypt, Decrypt } from '@/utils/secret.js'
  6.  
  7. // axios配置
  8. const config = {
  9.   // baseURL: '/server-address/', // 发布地址
  10.   baseURL: 'http://localhost:8080/', // 本地测试地址
  11.   timeout: 5000 // request timeout
  12. }
  13.  
  14. // 定义返回值类型
  15. export interface Result<T = any> {
  16.   code: number,
  17.   msg: string,
  18.   data: T
  19. }
  20.  
  21. // axios封装
  22. class Http {
  23.   // 定义一个axios的实例
  24.   private instance: AxiosInstance
  25.  
  26.   // 构造函数：初始化
  27.   constructor(config: AxiosRequestConfig) {
  28.     // 创建axios实例
  29.     this.instance = axios.create(config)
  30.     // 配置拦截器
  31.     this.interceptors()
  32.   }
  33.  
  34.   // 拦截器：处理请求发送和请求返回的数据
  35.   private interceptors() {
  36.  
  37.     // 请求发送之前的处理
  38.     this.instance.interceptors.request.use((config: AxiosRequestConfig) => {
  39.       console.log(config.data)
  40.       /** 数据加密 json -> string -> encrypt **/
  41.       config.data = Encrypt(JSON.stringify(config.data))
  42.       // 修改headers的Content-Type
  43.       config.headers!['Content-Type'] = 'application/json'
  44.       /** 在请求头部添加token **/
  45.       // let token = ''; // 从cookies/sessionStorage里获取
  46.       // if(token){
  47.       //   // 添加token到头部
  48.       //   config.headers!['token'] = token
  49.       // }
  50.       return config
  51.     }, error => {
  52.       error.data = {}
  53.       error.data.msg = '服务器异常，请联系管理员！'
  54.       return error
  55.     })
  56.  
  57.     // 请求返回数据的处理
  58.     this.instance.interceptors.response.use((response: AxiosResponse) => {
  59.       const { data } = response
  60.       // 数据不解密
  61.       const res = data
  62.       // 数据整体解密 decrypt -> string -> JSON
  63.       // const res = JSON.parse(Decrypt(data))
  64.       // 数据res.data部分解密
  65.       if(res.data!==null){
  66.         res.data = JSON.parse(Decrypt(res.data))
  67.       }
  68.       console.log(res) // res: { code: 200, data: null, msg: '请求成功' }
  69.  
  70.       if (res.code !== 200) {
  71.         Toast({
  72.           message: res.msg || '服务器出错！',
  73.           type: 'fail',
  74.           duration: 5 * 1000
  75.         })
  76.         return Promise.reject(new Error(res.msg || '服务器出错！'))
  77.       } else {
  78.         return res
  79.       }
  80.     }, error => {
  81.       console.log('进入错误')
  82.       error.data = {}
  83.       if (error && error.response) {
  84.         switch (error.response.status) {
  85.           case 400:
  86.             error.data.msg = '错误请求'
  87.             break
  88.           case 500:
  89.             error.data.msg = '服务器内部错误'
  90.             break
  91.           case 404:
  92.             error.data.msg = '请求未找到'
  93.             break
  94.           default:
  95.             error.data.msg = `连接错误${error.response.status}`
  96.             break
  97.         }
  98.         Toast({
  99.           message: error.data.msg || '服务器连接出错！',
  100.           type: 'fail',
  101.           duration: 5 * 1000
  102.         })
  103.       } else {
  104.         error.data.msg = '连接到服务器失败！'
  105.         Toast({
  106.           message: error.data.msg,
  107.           type: 'fail',
  108.           duration: 5 * 1000
  109.         })
  110.       }
  111.       return Promise.reject(error)
  112.     })
  113.   }
  114.  
  115.   /** RestFul api封装 **/
  116.   // Get请求：注意这里params被解构了，后端获取参数的时候直接取字段名
  117.   get<T = Result>(url: string, params?: object): Promise<T> {
  118.     return this.instance.get(url, { params })
  119.   }
  120.  
  121.   // Post请求
  122.   post<T = Result>(url: string, data?: object): Promise<T> {
  123.     return this.instance.post(url, data)
  124.   }
  125.  
  126.   // Put请求
  127.   put<T = Result>(url: string, data?: object): Promise<T> {
  128.     return this.instance.put(url, data)
  129.   }
  130.  
  131.   // DELETE请求
  132.   delete<T = Result>(url: string): Promise<T> {
  133.     return this.instance.delete(url)
  134.   }
  135. }
  136. export default new Http(config)

【后端代码】

后端采用自定义注解的方式进行加解密。

1. pom.xml引入相关jar包

  1. <!-- AES 密码解密 -->
  2. <dependency>
  3.     <groupId>org.bouncycastle</groupId>
  4.     <artifactId>bcprov-jdk15on</artifactId>
  5.     <version>1.60</version>
  6. </dependency>
  7. <!-- Base64依赖 -->
  8. <dependency>
  9.     <groupId>commons-codec</groupId>
  10.     <artifactId>commons-codec</artifactId>
  11.     <version>1.15</version>
  12. </dependency>

2. package.annotation新建2个注解Encrypt和Decrypt

  1. package com.finance.pettycharge.annotation;
  2.  
  3. import java.lang.annotation.ElementType;
  4. import java.lang.annotation.Retention;
  5. import java.lang.annotation.RetentionPolicy;
  6. import java.lang.annotation.Target;
  7.  
  8. /** 自定义解密方法：可以放在方法上，也可以放在参数上单独解密 **/
  9. @Retention(RetentionPolicy.RUNTIME)
  10. @Target({ElementType.METHOD, ElementType.PARAMETER})
  11. public @interface Decrypt {
  12. }
  1. package com.finance.pettycharge.annotation;
  2.  
  3. import java.lang.annotation.ElementType;
  4. import java.lang.annotation.Retention;
  5. import java.lang.annotation.RetentionPolicy;
  6. import java.lang.annotation.Target;
  7.  
  8. /** 自定义加密方法，仅能放在方法上 **/
  9. @Retention(RetentionPolicy.RUNTIME)
  10. @Target(ElementType.METHOD)
  11. public @interface Encrypt {
  12. }

3. package.utils下新建工具类SecretUtils.java

  1. package com.package.utils;
  2.  
  3. import org.apache.commons.codec.binary.Base64;
  4.  
  5. import javax.crypto.Cipher;
  6. import javax.crypto.spec.IvParameterSpec;
  7. import javax.crypto.spec.SecretKeySpec;
  8. import java.nio.charset.Charset;
  9. import java.nio.charset.StandardCharsets;
  10.  
  11. /**
  12.  * @author YSK
  13.  * @date 2020/8/24 13:13
  14.  */
  15. public  class SecretUtils {
  16.     /***
  17.      * key和iv值可以随机生成
  18.      */
  19.     private static String KEY = "yourkeycodexxxx";
  20.  
  21.     private static String IV = "yourivcodexxxx";
  22.  
  23.     /***
  24.      * 加密
  25.      * @param  data 要加密的数据
  26.      * @return encrypt
  27.      */
  28.     public static String encrypt(String data){
  29.         return encrypt(data, KEY, IV);
  30.     }
  31.  
  32.     /***
  33.      * param data 需要解密的数据
  34.      * 调用desEncrypt（）方法
  35.      */
  36.     public static String desEncrypt(String data){
  37.         return desEncrypt(data, KEY, IV);
  38.     }
  39.  
  40.     /**
  41.      * 加密方法
  42.      * @param data  要加密的数据
  43.      * @param key 加密key
  44.      * @param iv 加密iv
  45.      * @return 加密的结果
  47.      */
  48.     private static String encrypt(String data, String key, String iv){
  49.         try {
  50.             //"算法/模式/补码方式"NoPadding PkcsPadding
  51.             Cipher cipher = Cipher.getInstance("AES/CBC/NoPadding");
  52.             int blockSize = cipher.getBlockSize();
  53.  
  54.             byte[] dataBytes = data.getBytes(StandardCharsets.UTF_8);
  55.             int plaintextLength = dataBytes.length;
  56.             if (plaintextLength % blockSize != 0) {
  57.                 plaintextLength = plaintextLength + (blockSize - (plaintextLength % blockSize));
  58.             }
  59.  
  60.             byte[] plaintext = new byte[plaintextLength];
  61.             System.arraycopy(dataBytes, 0, plaintext, 0, dataBytes.length);
  62.  
  63.             SecretKeySpec keyspec = new SecretKeySpec(key.getBytes(StandardCharsets.UTF_8), "AES");
  64.             IvParameterSpec ivspec = new IvParameterSpec(iv.getBytes(StandardCharsets.UTF_8));
  65.  
  66.             cipher.init(Cipher.ENCRYPT_MODE, keyspec, ivspec);
  67.             byte[] encrypted = cipher.doFinal(plaintext);
  68.  
  69.             return new Base64().encodeToString(encrypted);
  70.  
  71.         } catch (Exception e) {
  72.             e.printStackTrace();
  73.             return null;
  74.         }
  75.     }
  76.  
  77.     /**
  78.      * 解密方法
  79.      * @param data 要解密的数据
  80.      * @param key  解密key
  81.      * @param iv 解密iv
  82.      * @return 解密的结果
  83.      */
  84.     private static String desEncrypt(String data, String key, String iv){
  85.         try {
  86.             byte[] encrypted1 = new Base64().decode(data);
  87.  
  88.             Cipher cipher = Cipher.getInstance("AES/CBC/NoPadding");
  89.             SecretKeySpec keySpec = new SecretKeySpec(key.getBytes(StandardCharsets.UTF_8), "AES");
  90.             IvParameterSpec ivSpec = new IvParameterSpec(iv.getBytes(StandardCharsets.UTF_8));
  91.             cipher.init(Cipher.DECRYPT_MODE, keySpec, ivSpec);
  92.             byte[] original = cipher.doFinal(encrypted1);
  93.             return new String(original, StandardCharsets.UTF_8).trim();
  94.         } catch (Exception e) {
  95.             e.printStackTrace();
  96.             return null;
  97.         }
  98.     }
  99. }
  100.

4. package.utils下新建DecryptRequest.java

  1. package com.package.utils;
  2.  
  3. import com.finance.pettycharge.annotation.Decrypt;
  4. import org.springframework.core.MethodParameter;
  5. import org.springframework.http.HttpHeaders;
  6. import org.springframework.http.HttpInputMessage;
  7. import org.springframework.http.converter.HttpMessageConverter;
  8. import org.springframework.web.bind.annotation.ControllerAdvice;
  9. import org.springframework.web.servlet.mvc.method.annotation.RequestBodyAdviceAdapter;
  10.  
  11. import java.io.ByteArrayInputStream;
  12. import java.io.IOException;
  13. import java.io.InputStream;
  14. import java.lang.reflect.Type;
  15. import java.nio.charset.StandardCharsets;
  16.  
  17. /** 解密请求数据 **/
  18. @ControllerAdvice
  19. public class DecryptRequest extends RequestBodyAdviceAdapter {
  20.  
  21.     /**
  22.      * 该方法用于判断当前请求，是否要执行beforeBodyRead方法
  23.      *
  24.      * @param methodParameter handler方法的参数对象
  25.      * @param targetType      handler方法的参数类型
  26.      * @param converterType   将会使用到的Http消息转换器类类型
  27.      * @return 返回true则会执行beforeBodyRead
  28.      */
  29.     @Override
  30.     public boolean supports(MethodParameter methodParameter, Type targetType, Class<? extends HttpMessageConverter<?>> converterType) {
  31.         return methodParameter.hasMethodAnnotation(Decrypt.class) || methodParameter.hasParameterAnnotation(Decrypt.class);
  32.     }
  33.  
  34.     @Override
  35.     public HttpInputMessage beforeBodyRead(HttpInputMessage inputMessage, MethodParameter parameter, Type targetType, Class<? extends HttpMessageConverter<?>> converterType) throws IOException {
  36.         byte[] body = new byte[inputMessage.getBody().available()];
  37.         inputMessage.getBody().read(body);
  38.         try {
  39.             String str = new String(body);
  40.             String newStr = SecretUtils.desEncrypt(str); // 解密加密串
  41.             // str->inputstream
  42.             /** 注意编码格式一定要指定UTF-8 不然会出现前后端解密错误 **/
  43.             InputStream newInputStream = new ByteArrayInputStream(newStr.getBytes(StandardCharsets.UTF_8));
  44.             return new HttpInputMessage() {
  45.                 @Override
  46.                 public InputStream getBody() throws IOException {
  47.                     return newInputStream; // 返回解密串
  48.                 }
  49.  
  50.                 @Override
  51.                 public HttpHeaders getHeaders() {
  52.                     return inputMessage.getHeaders();
  53.                 }
  54.             };
  55.         }catch (Exception e){
  56.             e.printStackTrace();
  57.         }
  58.         return super.beforeBodyRead(inputMessage, parameter, targetType, converterType);
  59.     }
  60. }

5. package.utils下新建EncryptResponse.java

  1. package com.package.utils;
  2.  
  3. import com.alibaba.fastjson2.JSON;
  4. import com.finance.pettycharge.annotation.Encrypt;
  5. import com.finance.pettycharge.viewobject.ResultVO;
  6. import org.springframework.core.MethodParameter;
  7. import org.springframework.http.MediaType;
  8. import org.springframework.http.converter.HttpMessageConverter;
  9. import org.springframework.http.server.ServerHttpRequest;
  10. import org.springframework.http.server.ServerHttpResponse;
  11. import org.springframework.web.bind.annotation.ControllerAdvice;
  12. import org.springframework.web.servlet.mvc.method.annotation.ResponseBodyAdvice;
  13.  
  14. /** 加密返回数据 **/
  15. @ControllerAdvice
  16. public class EncryptResponse implements ResponseBodyAdvice<ResultVO> {
  17.     @Override
  18.     public boolean supports(MethodParameter returnType, Class<? extends HttpMessageConverter<?>> converterType) {
  19.         return returnType.hasMethodAnnotation(Encrypt.class);
  20.     }
  21.  
  22.     @Override
  23.     public ResultVO beforeBodyWrite(ResultVO body, MethodParameter returnType, MediaType selectedContentType, Class<? extends HttpMessageConverter<?>> selectedConverterType, ServerHttpRequest request, ServerHttpResponse response) {
  24.         try{
  25. //            if(body.getMsg()!=null){
  26. //                body.setMsg(SecretUtils.encrypt(body.getMsg()));
  27. //            }
  28.             if(body.getData()!=null){ // 加密传输数据，注意先转JSON再转String格式
  29.                 body.setData(SecretUtils.encrypt(JSON.toJSONString(body.getData())));
  30.             }
  31.         }catch (Exception e){
  32.             e.printStackTrace();
  33.         }
  34.         return body;
  35.     }
  36. }

6.在controller里对需要使用的方法或者参数加上@Encrypt或者@Decrypt注解即可

  1. // 查询
  2. @GetMapping("/list")
  3. @Encrypt
  4. public ResultVO projectList(@RequestHeader(name = "user") String userId, String queryType) {
  5.     try {
  6.             List<Project> list = projectService.getProjectList(userId, queryType);
  7.             return ResultVOUtil.success("查询projectList列表成功！", list);
  8.         } catch (Exception e) {
  9.             return ResultVOUtil.error(e.getMessage());
  10.         }
  11. }
  1. // 更新项目状态
  2. @PutMapping("/updatestatus")
  3. @Decrypt
  4. public ResultVO updateStatus(@RequestBody JSONObject data) {
  5.     if (projectService.updateProjectStatus(data.getInteger("id"), data.getString("type")) == 1) {
  6.         return ResultVOUtil.success("项目状态修改成功！", null);
  7.       }
  8.         return ResultVOUtil.error("项目状态修改失败");
  9.  }

【小结】

请注意前后端加解密一定要统一指定对应的编码格式，这里全部指定成了UTF-8。

初版本没有指定编码格式，本地测试没有任何问题，发布到服务器后出现了很多bug，排查原因都是由于编码格式不一致导致的。

只要涉及到字符串转换的、字节流的全部要指定编码格式，请务必注意这一点。

遇到的bug

前端报错=> Error: Malformed UTF-8 data

后端报错=> JSON parse error: Invalid UTF-8 middle 0xc2

参考资料：SpringBoot接口加密与解密_魅Lemon的博客-CSDN博客_springboot 接口加密

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/589293
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号