前端使用 crypto-js 库 aes加解密

忿忿的泥巴坨  金牌会员 | 2024-12-6 03:46:46 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 846|帖子 846|积分 2538

前端使用crypto-js AES 加密解密

CryptoJS是一个JavaScript加密算法库，用于在客户端欣赏器中执行加密和解密操纵。它提供了一系列常见的加密算法，如AES、DES、Triple DES、Rabbit、RC4、MD5、SHA-1等等。
AES

工作原理

AES（高级加密标准）是一种对称加密算法，即加密和解密使用相同的密钥。它可以加密长度为128、192和256位的数据块，并使用128位的密钥进行加密。AES算法使用了固定的块长度和密钥长度，并且被广泛应用于许多安全协媾和标准中，例如SSL/TLS、SSH、IPSec等。
在AES加密中，明文被分成128位的块，每个块使用相同的密钥进行加密。加密过程包括以下步调：


  • 密钥扩展：将密钥扩展为加密算法所需的轮密钥。
  • 初始轮：将明文分成块，并与第一轮密钥进行异或。
  • 多轮加密：将初始轮产生的效果反复进行多轮加密，每轮使用不同的轮密钥进行加密。
  • 最终轮：在最后一轮加密中，将块进行加密，但是不再进行下一轮加密，而是直接输出密文。
   解密过程与加密过程雷同，只是将加密过程中的步调反过来。必要注意的是，解密的过程中使用的是相同的密钥和轮密钥。由于AES是一种块加密算法，因此在加密过程中，必要对数据进行填充，确保数据块大小为128位。
  AES算法的长处



  • 安全性高：AES算法是一种可靠的加密算法，它在数据传输、文件加密和网络安全等范畴有着广泛的应用。
  • 服从高：AES算法接纳对称加密算法进行加密和解密，使用相同的密钥进行加密和解密。对称加密算法比非对称加密算法更加高效，因此AES算法具有更高的服从。
  • 应用广泛：AES算法在数据传输、文件加密和网络安全等范畴有着广泛的应用。在数据传输过程中，AES算法可以对数据进行加密，掩护数据的安全性。在文件加密过程中，AES算法可以对文件进行加密，掩护文件的安全性。在网络安全范畴，AES算法可以对网络数据进行加密，掩护网络的安全性。
   github地址: https://github.com/brix/crypto-js
    cryptojs文档: https://cryptojs.gitbook.io/docs/#encoders
    在线aes加密解密工具: http://tool.chacuo.net/cryptaes
  使用JSEncrypt进行RSA加密的基本步调如下:

前端:


  • 初始化: 引入jsencrypt库并出始化JSEncrypt对象，使用encrypt.setPublicKey()方法设置公钥,公钥是随机恣意字符串 。
  • 天生私钥和偏移量: 随机天生aes的私钥key和偏移量 iv，使用encrypt.encrypt()方法对私钥key和偏移量iv进行加密得到code,并将code传给后端, 将私钥与code存入客户端。
  • 加密: 引入CryptoJS插件,使用CryptoJS.AES.encrypt()方法联合天生的私钥key和偏移量iv加密数据。
后端:


  • 初始化: 使用encrypt.setPrivateKey()方法设置私钥,私钥要与前端的公钥划一。
  • 解密code: 使用encryptor.decrypt()方法解密code得到eas的私钥key和偏移量iv。
  • 解密数据: 引入CryptoJS插件, 使用CryptoJS.AES.decrypt()方法联合key和iv解密数据。
   必要注意的是，由于JSEncrypt是在客户端上执行的，以是密钥在传输过程中可能会存在安全风险。为了确保数据的安全性，建议在客户端和服务器之间使用安全的通信协议进行数据传输，并在服务器端进行进一步的安全验证和处理。
  安装

script 标签嵌入
  1. <script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/aes.min.js"></script>
复制代码
npm 或 yarn 安装
  1. npm install crypto-js
  3. yarn add crypto-js
复制代码
CommonJS
  1. const CryptoJS = require('crypto-js');
复制代码
ES module:
  1. import CryptoJS from 'crypto-js';
复制代码
封装加密和解密

  1. // 创建key.js文件
  3. import JSEncrypt from 'jsencrypt'
  4. const encrypt = new JSEncrypt();
  5. let publicKey = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCeCDcnFrS7DIRbvZLHreVUzaMbAFy2DYmioxBK606urY4rVR8IgLgUhnyw2/GQ99pyr8lGtqPeOoapantw1XwEVyi74MDxs4UDL8j4OZR1Es7HVGOB0GwKWobdU9cm/1iDwGyouSmijxKyAePg6KsLNgbjDPYZRS11bYEuZ8/RLQIDAQAB';
  6. // 设置公钥
  7. encrypt.setPublicKey('-----BEGIN PUBLIC KEY-----' + publicKey + '-----END PUBLIC KEY-----')
  9. const random = (length) => {
  10.   var str = Math.random().toString(36).substr(2);
  11.   if (str.length >= length) {
  12.     return str.substr(0, length);
  13.   }
  14.   str += random(length - str.length);
  15.   return str;
  16. }
  18. export const rsaEncode = (src) => {
  19.   // 加密数据
  20.   let data = encrypt.encrypt(src);
  21.   return data
  22. };
  24. export const getKey = () => {
  25. // 生成私钥和偏移量
  26.   let key = { key: random(16), iv: random(16) };
  27.   // 对私钥和偏移量加密
  28.   let code = rsaEncode(key.key + ',' + key.iv);
  29.   window.codeArr = window.codeArr || {};
  30.   // 存入客户端
  31.   codeArr[code] = key;
  32.   return {
  33.     key, code
  34.   }
  35. };
  37. export const getAesKey = (aes) => {
  38.   console.log('aes: ', aes);
  39.   let key = JSON.parse(JSON.stringify(codeArr[aes]));
  40.   // 从客户端获取到 key
  41.   delete codeArr[aes];
  42.   return key
  43. };
  44. window.getKey = getKey
  45. window.rsaEncode = rsaEncode
复制代码
  1. // 创建 encrypt.js 文件import CryptoJS from 'crypto-js';
  2. // ------------AES 加密-------------function getAesString(data, key, iv) {//加密  let keys = CryptoJS.enc.Utf8.parse(key)  let vis = CryptoJS.enc.Utf8.parse(iv)  let encrypt = CryptoJS.AES.encrypt(data, keys, {    iv: vis, //iv偏移量 CBC需加偏移量    mode: CryptoJS.mode.CBC, //CBC模式    // mode: CryptoJS.mode.ECB, //ECB模式    padding: CryptoJS.pad.Pkcs7 //padding处理  });  // debugger  return encrypt.toString(); //加密完成后，转换成字符串}// ------------AES 解密-------------function getDAesString(encrypted, key, iv) { // 解密  var key  = CryptoJS.enc.Utf8.parse(key);  var iv   = CryptoJS.enc.Utf8.parse(iv);  var decrypted =CryptoJS.AES.decrypt(encrypted,key,{    iv:iv,    mode:CryptoJS.mode.CBC,    padding:CryptoJS.pad.Pkcs7  });  return decrypted.toString(CryptoJS.enc.Utf8);}// AES 对称秘钥加密const aes = {  en: (data, key) => getAesString(data, key.key, key.iv),  de: (data, key) => getDAesString(data, key.key, key.iv)};export { aes };
复制代码
  publicKey 可以通过发哀求后端返回,也可以自己界说,要求前后端划一
  封装 axios 拦截器进行加密解密

  1. /**
  2. *
  3. * http配置
  4. *
  5. */
  6. // 引入axios以及element ui中的loading和message组件
  7. import { aes } from "@/util/encrypt.js";
  8. import { getKey, getAesKey } from "@/config/key.js";
  9. import axios from "axios";
  10. import store from "../store";
  11. import router from "../router/router";
  12. import { Loading, Message } from "element-ui";
  13. import { getSessStore, setSessStore } from "@/util/store";
  16. // 超时时间
  17. if (store.online) axios.defaults.timeout = 20000;
  18. else axios.defaults.timeout = 0;
  19. //跨域请求，允许保存cookie
  20. axios.defaults.withCredentials = true;
  22. // 统一加解密
  23. const Unify = {
  24.   // 统一加密方法
  25.   en(data, key) {
  26.     // 1.aes加密
  27.     let aesStr = aes.en(JSON.stringify(data), key);
  28.     return aesStr;
  29.   },
  30.   // 统一解密
  31.   de(aesStr, key) {
  32.     // 1.aes解密
  33.     let dataStr = aes.de(aesStr, key);
  34.     // 3.转json对象
  35.     let data = JSON.parse(dataStr);
  36.     return data;
  37.   },
  38. };
  40. let loadinginstace;
  41. let cfg, msg;
  42. msg = "服务器君开小差了，请稍后再试";
  43. function ens(data) {
  44.   // debugger
  45.   let src = [...data];
  46.   src = JSON.stringify(src);
  47.   let dataJm = aes.en(src);
  48.   return dataJm;
  49. }
  50. function des(data) {
  51.   // debugger
  52.   let src = [...data];
  53.   let dataJm = aes.de(src);
  54.   dataJm = JSON.parse(dataJm);
  55.   return dataJm;
  56. }
  57. const cancelToken = axios.CancelToken
  58. const source = cancelToken.source()
  59. //HTTPrequest拦截
  60. axios.interceptors.request.use(
  61.   function (config) {
  62.     console.log(config.data, "加密前入参---");
  63.     config.cancelToken = source.token; // 全局添加cancelToken
  64.     loadinginstace = Loading.service({
  65.       fullscreen: true,
  66.     });
  67.     if (store.getters.token) {
  68.       let info = getSessStore("token");
  69.       // console.log("info", info);
  70.       config.headers["Authorization"] = "Bearer " + info; // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
  71.     }
  72.     const contenttype = config.headers.common["Accept"];
  73.     let types = contenttype.includes("application/json");
  74.     let key = getKey(); // 获取密钥
  75.     config.headers["aes"] = key.code; // 将 aes 的 code 设置到请求头,传给后端解密
  76.     config.headers["name"] = "send";
  77.     if (types) {
  78.       if (config.method == "post" || config.method == "put") {
  79.         if (config.data) {
  80.           config.headers["crypto"] = true;
  81.           config.headers["content-type"] = "application/json";
  82.           let data = {
  83.             body: config.data,
  84.           };
  85.           let dataJm = Unify.en(data, key.key); // 加密 post 请求参数
  86.           config.data = dataJm;
  87.         }
  88.       }
  89.     }
  90.     return config;
  91.   },
  92.   (error) => {
  93.     return Promise.reject(error);
  94.   }
  95. );
  97. //HTTPresponse拦截
  98. axios.interceptors.response.use(
  99.   (response) => {
  100.     loadinginstace.close();
  101.     let res = response.data || {};
  102.     if (response.headers["date"]) {
  103.       store.commit("setServiceTime", response.headers.date);
  104.     }
  105.     if (res.crypto) {
  106.       try {
  107.         let key = getAesKey(response.headers.aes); // 拿到加密后的key
  108.         if (!key) {
  109.           message("获取密钥异常", "error");
  110.           return Promise.reject(res);
  111.         }
  112.         // debugger
  113.         res = Unify.de(res.body, key); // 解密数据
  114.         response.data = res;
  115.       } catch (err) {
  116.         message("系统异常：" + err.message, "error");
  117.         return Promise.reject(err);
  118.       }
  119.     }
  120.     // debugger
  121.     if (res.code === 1) {
  122.       message(res.msg, "error");
  123.       return Promise.reject(res);
  124.     }
  125.     console.log(response, "解密后response");
  126.     return response;
  127.   },
  128.   (error) => {
  129.     console.log("错误信息", error);
  130.     loadinginstace.close();
  131.     const res = error.response || {};
  132.     if (res.status === 478 || res.status === 403 || res.status === 401) {
  133.       let resMsg = res.data.msg ? res.data.msg : res.data.data
  134.       if (res.status === 403) {
  135.         message('服务授权失败，请联系管理添加权限！', "error");
  136.       } else {
  137.         message(resMsg, "error");
  138.       }
  139.       let flg = res.data.msg.includes('当前登录状态已失效')
  140.       if (res.status === 478 && flg) {
  141.         //token失效
  142.         source.cancel('登录信息已过期'); // 取消其他正在进行的请求
  143.         store.dispatch("FedLogOut").then(() => {
  144.           router.push("/login"); ///test
  145.         });
  146.       }
  147.     } else if (res.status === 400) {
  148.       message(res.data.error_description, "error");
  149.     } else if (res.status === 202) {
  150.       //三方未绑定
  151.       this.$router.push({
  152.         path: "/",
  153.       });
  154.     } else if (res.status === 503 || res.status === 504) {
  155.       //服务异常
  156.       message(res.data, "error");
  157.     } else if (
  158.       (res.status === 401 && res.statusText == "Unauthorized") ||
  159.       res.data.error == "invalid_token" ||
  160.       res.data.error == "unauthorized"
  161.     ) {
  162.       //token失效
  163.       store.dispatch("FedLogOut").then(() => {
  164.         router.push("/login"); ///test
  165.       });
  166.     } else {
  167.       message(res.data.message, "error");
  168.     }
  169.     return Promise.reject(error);
  170.   }
  171. );
  172. export function message(text, type) {
  173.   let t = text ? text : "服务或网络异常！"
  174.   Message({
  175.     message: t,
  176.     type: type,
  177.     duration: 30 * 1000,
  178.     center: true,
  179.     showClose: true
  180.   });
  181. }
  182. export default axios;
复制代码
总结

加密: 使用 JSEncrypt 天生私钥 key 和偏移量 iv 并将密钥 key 和 iv 加密得到 code, 使用 CryptoJS.AES.encrypt() 和 key 加密哀求数据,将 加密后的 code 设置在哀求头,后端获取加密后 code 进行解密得到私钥 key ,再对哀求数据解密得到原始数据
解密: 前端获取响应头的key,从window得到私钥 key, 使用 CryptoJS.AES.decrypt() 方法对响应数据进行解密,得到原始数据

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

忿忿的泥巴坨

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表