• 前端 crypto-js AES 加解密



    前言

    提示:这里可以添加本文要记录的大概内容:

    背景
    前段时间公司做项目,该项目涉及到的敏感数据比较多,经过的一波讨论之后,决定前后端进行接口加密处理,采用的是 AES + BASE64 算法加密~

    网上关于 AES 对称加密的算法介绍挺多的,对这一块还不是特别理解的小伙伴可自行百度,这里我推荐一篇AES加密算法的详细介绍与实现,讲的还是蛮详细的~


    提示:以下是本篇文章正文内容,下面案例可供参考

    一、crypto-js是什么?

    crypto-js 是一个纯 javascript 写的加密算法类库 ,可以非常方便地在 javascript 进行 MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列,进行 AES、DES、Rabbit、RC4、Triple DES 加解密,我们可以采用 npm install crypto-js --save 进行下载安装,也可以直接去 GitHub下载源码~

    二、使用步骤

    1. 安装crypto-js

    npm install crypto-js 
    yarn add crypto-js 
    
    • 1
    • 2

    2. 具体实现

    这里我以 Vue 作为例子,其他的也就大同小异了~

    定义两个方法 ,分别是用于加密和解密,这里我将它放在了 utils 文件夹下,命名为 secret.js ,其具体代码如下:

        const CryptoJS = require('crypto-js');  //引用AES源码js
        
        const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");  //十六位十六进制数作为密钥
        const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412');   //十六位十六进制数作为密钥偏移量
        
        //解密方法
        function Decrypt(word) {
            let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
            let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
            let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
            let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
            return decryptedStr.toString();
        }
        
        //加密方法
        function Encrypt(word) {
            let srcs = CryptoJS.enc.Utf8.parse(word);
            let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
            return encrypted.ciphertext.toString().toUpperCase();
        }
        
        export default {
            Decrypt ,
            Encrypt
        }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • key 是密钥 ,iv 是密钥偏移量,这个一般是接口返回的,为了方便,我们这里就直接在这里定义了。

    • 值得注意的是密钥的长度,由于对称解密使用的算法是 AES-128-CBC算法,数据采用 PKCS#7 填充 , 因此这里的 key 需要为16位!

    • 接着我们定义了 解密方法Decrypt 和 加密方法 Encrypt ,最后通过 export default 将其暴露出去,方便在需要的时候进行引入~

    3. 示例

    加密操作:

    假设我们现在要给后端发送一段文字,暂且定义为 This is a clear text , 在发送之前我们需要对其进行加密操作,这时候我们可以调用上面介绍的 Encrypt 方法,通过加密后我们可以得到密文为:4ACEA01505ADAF9FB59A03B22FC1EF1B244AE28DDACFDFAEFA7E263655C44357

    在这里插入图片描述

    解密操作:

    假设我们请求后端接口,后端返回了我们一堆如下的字符串 BBFE62335C28821AD2F4043B715BB0C3E45734908254666526DCFD86A605F3AF , 这让我很蒙蔽啊,这时候就要调用 Decrypt 方法,
    通过解密我们可以拿到后端返回的信息其实是:{“name”:“Chris”,“sex”:“male”}
    在这里插入图片描述

  • 相关阅读:
    【vue】如何打开别人编译后的vue项目
    视频监控/视频汇聚/安防视频监控平台EasyCVR配置集群后有一台显示离线是什么原因?
    面试系列 - Java内存泄漏问题排查
    通过zookeeper浅谈一致性算法
    软考-软件设计师 - 第12章 软件系统分析与设计【附补充常考知识点】
    深度学习在岩土工程应用及PFC离散元数值模拟应用
    防抖 节流
    Nodejs -- Express 自定义中间件并进行封装
    关于对象数组的一些方法总结
    蓝桥杯回文日期C语言
  • 原文地址:https://blog.csdn.net/qq_45585640/article/details/126171739