前端使用crypto-js库aes加解密详细代码示例_Javascript

前言

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

安装

script 标签嵌入

<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/aes.min.js"></script>

npm 或 yarn 安装

npm install crypto-js

yarn add crypto-js

commonjs

const cryptojs = require('crypto-js');

es module:

import cryptojs from 'crypto-js';

封装加密和解密

import cryptojs from 'crypto-js'

 // ------------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(); //加密完成后，转换成字符串
 }
 
 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)
 };
 // base64
 const base64 = {
   en: (data) => cryptojs.enc.base64.stringify(cryptojs.enc.utf8.parse(data)),
   de: (data) => cryptojs.enc.base64.parse(data).tostring(cryptojs.enc.utf8)
 };
 // sha256
 const sha256 = (data) => {
   return cryptojs.sha256(data).tostring();
 };
 // md5
 const md5 = (data) => {
 return cryptojs.md5(data).tostring();
 };
 
 export { aes, md5, sha256, base64 };

使用 jsencrypt 生成密钥

jsencrypt是基于javascript的rsa加密库，允许在浏览器端使用rsa算法进行加密和解密操作。它提供了容易使用的api，简化了在客户端上进行加密的过程。

jsencrypt支持以下操作:

生成密钥对: 可以使用jsencrypt生成rsa密钥对，包括公钥和私钥。
加密: 使用公钥加密数据，确保只有拥有私钥的服务器才能解密。
解密: 使用私钥解密被公钥加密过的数据。
密钥格式: jsencrypt支持多种密钥格式，包括pem格式（基于base64编码）。

使用jsencrypt进行rsa加密的基本步骤如下：

引入jsencrypt库: 在html页面中引入jsencrypt库的脚本文件。
创建jsencrypt对象: 使用jsencrypt构造函数创建一个新的jsencrypt对象。
生成密钥对: 封装getkey()方法生成rsa密钥对，并将生成的私钥加密后传给后端。
加密数据: 使用encrypt.encrypt(plaintext)方法，将明文数据进行加密。
解密数据: 在服务器端使用私钥进行解密，获取原始数据。

需要注意的是，由于jsencrypt是在客户端上执行的，所以密钥在传输过程中可能会存在安全风险。为了确保数据的安全性，建议在客户端和服务器之间使用安全的通信协议进行数据传输，并在服务器端进行进一步的安全验证和处理。

import jsencrypt from 'jsencrypt'
const encrypt = new jsencrypt();
let publickey = 'migfma0gcsqgsib3dqebaquaa4gnadcbiqkbgqcecdcnfrs7dirbvzlhrevuzambafy2dymioxbk606ury4rvr8iglguhnyw2/gq99pyr8lgtqpeooapantw1xwevyi74mdxs4udl8j4ozr1es7hvgob0gwkwobdu9cm/1idwgyousmijxkyaepg6kslngbjdpyzrs11byeuz8/rlqidaqab';
encrypt.setpublickey('-----begin public key-----' + publickey + '-----end public key-----')

const random = (length) => {
  var str = math.random().tostring(36).substr(2);
  if (str.length>=length) {
    return str.substr(0, length);
  }
  str += random(length-str.length);
  return str;
}

export const rsaencode = (src)=>{
  let data = encrypt.encrypt(src); // 加密
  return data
};

export const getkey = ()=>{
  let key = { key: random(16), iv: random(16) }; // 生成密钥
  let code = rsaencode(key.key + ',' + key.iv) // 给密钥加密,在将加密后的密钥传给后端
  window.codearr = window.codearr || {}
  codearr[code] = key
  return {
    key, code
  }
};

export const getaeskey = (aes)=>{
  let key = json.parse(json.stringify(codearr[aes]))
  delete codearr[aes]
  return key
};



window.getkey = getkey
window.rsaencode = rsaencode

publickey 可以通过发请求后端返回,也可以自己定义,要求前后端一致

封装 axios 拦截器进行加密解密

/**
 *
 * http配置
 *
 */
// 引入axios以及element ui中的loading和message组件
import { aes } from "@/util/encrypt.js";
import { getkey, getaeskey } from "@/config/key.js";
import axios from "axios";
import store from "../store";
import router from "../router/router";
import { loading, message } from "element-ui";
import { getsessstore, setsessstore } from "@/util/store";


// 超时时间
if (store.online) axios.defaults.timeout = 20000;
else axios.defaults.timeout = 0;
//跨域请求，允许保存cookie
axios.defaults.withcredentials = true;

// 统一加解密
const unify = {
  // 统一加密方法
  en(data, key) {
    // 1.aes加密
    let aesstr = aes.en(json.stringify(data), key);
    return aesstr;
  },
  // 统一解密
  de(aesstr, key) {
    // 1.aes解密
    let datastr = aes.de(aesstr, key);
    // 3.转json对象
    let data = json.parse(datastr);
    return data;
  },
};

let loadinginstace;
let cfg, msg;
msg = "服务器君开小差了，请稍后再试";
function ens(data) {
  // debugger
  let src = [...data];
  src = json.stringify(src);
  let datajm = aes.en(src);
  return datajm;
}
function des(data) {
  // debugger
  let src = [...data];
  let datajm = aes.de(src);
  datajm = json.parse(datajm);
  return datajm;
}
const canceltoken = axios.canceltoken
const source = canceltoken.source()
//httprequest拦截
axios.interceptors.request.use(
  function (config) {
    console.log(config.data, "加密前入参---");
    config.canceltoken = source.token; // 全局添加canceltoken
    loadinginstace = loading.service({
      fullscreen: true,
    });
    if (store.getters.token) {
      let info = getsessstore("token");
      // console.log("info", info);
      config.headers["authorization"] = "bearer " + info; // 让每个请求携带token-- ['x-token']为自定义key 请根据实际情况自行修改
    }
    const contenttype = config.headers.common["accept"];
    let types = contenttype.includes("application/json");
    let key = getkey(); // 获取密钥
    config.headers["aes"] = key.code; // 将 aes 的 code 设置到请求头,传给后端解密
    config.headers["name"] = "send";
    if (types) {
      if (config.method == "post" || config.method == "put") {
        if (config.data) {
          config.headers["crypto"] = true;
          config.headers["content-type"] = "application/json";
          let data = {
            body: config.data,
          };
          let datajm = unify.en(data, key.key); // 加密 post 请求参数
          config.data = datajm;
        }
      }
    }
    return config;
  },
  (error) => {
    return promise.reject(error);
  }
);

//httpresponse拦截
axios.interceptors.response.use(
  (response) => {
    loadinginstace.close();
    let res = response.data || {};
    if (response.headers["date"]) {
      store.commit("setservicetime", response.headers.date);
    }
    if (res.crypto) {
      try {
        let key = getaeskey(response.headers.aes); /// 拿到公钥加密字符串
        if (!key) {
          message("获取密钥异常", "error");
          return promise.reject(res);
        }
        // debugger
        res = unify.de(res.body, key);
        response.data = res;
      } catch (err) {
        message("系统异常：" + err.message, "error");
        return promise.reject(err);
      }
    }
    // debugger
    if (res.code === 1) {
      message(res.msg, "error");
      return promise.reject(res);
    }
    console.log(response, "解密后response");
    return response;
  },
  (error) => {
    console.log("错误信息", error);
    loadinginstace.close();
    const res = error.response || {};
    if (res.status === 478 || res.status === 403 || res.status === 401) {
      let resmsg = res.data.msg ? res.data.msg : res.data.data
      if (res.status === 403) {
        message('服务授权失败，请联系管理添加权限！', "error");
      } else {
        message(resmsg, "error");
      }
      let flg = res.data.msg.includes('当前登录状态已失效')
      if (res.status === 478 && flg) {
        //token失效
        source.cancel('登录信息已过期'); // 取消其他正在进行的请求
        store.dispatch("fedlogout").then(() => {
          router.push("/login"); ///test
        });
      }
    } else if (res.status === 400) {
      message(res.data.error_description, "error");
    } else if (res.status === 202) {
      //三方未绑定
      this.$router.push({
        path: "/",
      });
    } else if (res.status === 503 || res.status === 504) {
      //服务异常
      message(res.data, "error");
    } else if (
      (res.status === 401 && res.statustext == "unauthorized") ||
      res.data.error == "invalid_token" ||
      res.data.error == "unauthorized"
    ) {
      //token失效
      store.dispatch("fedlogout").then(() => {
        router.push("/login"); ///test
      });
    } else {
      message(res.data.message, "error");
    }
    return promise.reject(error);
  }
);
export function message(text, type) {
  let t = text ? text : "服务或网络异常！"
  message({
    message: t,
    type: type,
    duration: 30 * 1000,
    center: true,
    showclose: true
  });
}
export default axios;

总结

加密: 使用 jsencrypt 生成私钥 key 并将密钥 key 加密得到 code, 使用 cryptojs.aes.encrypt() 和 key 加密请求数据,将加密后的 code 设置在请求头,后端获取加密后 code 进行解密得到私钥 key ,再对请求数据解密得到原始数据

解密: 前端获取响应头的key,通过解密 jsencrypt 解密得到私钥 key, 使用 cryptojs.aes.decrypt() 方法对响应数据进行解密,得到原始数据

到此这篇关于前端使用crypto-js库aes加解密的文章就介绍到这了,更多相关前端crypto-js库aes加解密内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！