前端 crypto-js aes 加解密

2018.04.13 11:37:21字数 891阅读 59767
https://www.jianshu.com/p/a47477e8126a

原来前端也有那么多加密 工具库

前端 crypto-js aes 加解密

背景

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

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

具体实现

其实搞懂了是怎么一回事,做起来还是挺简单的,因为库都是现成的,我们只需要会用就好啦,这里我在推荐一篇理解AES加密解密的使用方法,加深大家对 AES 算法的理解~

 

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

  • 要用 AES 算法加密,首先我们要引入 crypto-js ,crypto-js 是一个纯 javascript 写的加密算法类库 ,可以非常方便地在 javascript 进行 MD5SHA1SHA2SHA3RIPEMD-160 哈希散列,进行 AESDESRabbitRC4Triple DES 加解密,我们可以采用 npm install crypto-js --save 进行下载安装,也可以直接去 GitHub下载源码~

  • 其次我们需要定义两个方法 ,分别是用于加密和解密,这里我将它放在了 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
    }

上面的代码中的 key 是密钥 ,iv 是密钥偏移量,这个一般是接口返回的,为了方便,我们这里就直接在这里定义了。

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

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

ok,核心代码就这么多,是不是很简单啊,其实也么有你想的那么复杂哈,剩下的就是展示一下如何使用咯~

 

示例

这里我定义了一个 index.vue 用来展示数据加解密的操作~

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

 

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

 

结语

至此,你已经 get 了前端 AES 加解密的方法,是不是感觉很简单啊,用起来很简单,原理可不简单,况且这也只是其中的一种方案,关于加解密的方法还有很多,感兴趣的小伙伴们可以继续做一些深入的研究哈~

至于我呢。。

 

对了,代码已上传到 GitHub,有需要的小伙伴自行下载~

[转帖]前端 crypto-js aes 加解密的更多相关文章

  1. .net mvc 站点自带简易SSL加密传输 Word报告自动生成(例如 导出数据库结构) 微信小程序:动画(Animation) SignalR 设计理念(一) ASP.NET -- WebForm -- ViewState ASP.NET -- 一般处理程序ashx 常用到的一些js方法,记录一下 CryptoJS与C#AES加解密互转

    .net mvc 站点自带简易SSL加密传输   因项目需要,传输数据需要加密,因此有了一些经验,现简易抽出来分享! 请求:前端cryptojs用rsa/aes 或 rsa/des加密,后端.net ...

  2. cryptoJS AES 加解密简单使用

    简单记录一下,前端利用 cryptoJS 如何加解密的.主要是关于 AES 加解密. 需求描述:需要对 url 中的参数进行 AES 解密,然后再把该参数进行 MD5 加密通过接口传递. AES AE ...

  3. aes加解密前后端-后台

    一.web.xml: <filter> <filter-name>fastLoginFilter</filter-name> <filter-class> ...

  4. Java、C#双语版配套AES加解密示例

      这年头找个正经能用的东西那是真难,网上一搜索一大堆,正经能用的没几个,得,最后还是得靠自己,正巧遇上需要AES加解密的地方了,而且还是Java和C#间的相互加解密操作,这里做个备忘 这里采用的加解 ...

  5. C# RSA加解密与验签,AES加解密,以及与JAVA平台的密文加解密

    前言: RSA算法是利用公钥与密钥对数据进行加密验证的一种算法.一般是拿私钥对数据进行签名,公钥发给友商,将数据及签名一同发给友商,友商利用公钥对签名进行验证.也可以使用公钥对数据加密,然后用私钥对数 ...

  6. 收银台数据库存储AES加解密

    高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法加密和解密用到的密钥是相同的,这种加密方式加密速度非常快,适合经常发送数据的场合.缺点是密钥的传输 ...

  7. 转载:Java、C#双语版配套AES加解密示例

    转载,原文出处 http://www.cnblogs.com/lzrabbit/p/3639503.html 这年头找个正经能用的东西那是真难,网上一搜索一大堆,正经能用的没几个,得,最后还是得靠自己 ...

  8. C#与java中的AES加解密互解算法

    一.C#版AES加解密算法 public class AESCode { public string Key { get; set; } public string Encrypt(string va ...

  9. AES加解密算法在Android中的应用及Android4.2以上版本调用问题

     from://http://blog.csdn.net/xinzheng_wang/article/details/9159969 AES加解密算法在Android中的应用及Android4.2以上 ...

随机推荐

  1. 对拍——>bat

    为了凸显对拍滴重要性.就拿来当置顶啦! ——本来是那样想的 ---------------------------------------------------------------------- ...

  2. luogu P2018 消息传递

    二次联通门 : luogu P2018 消息传递 /* luogu P2018 消息传递 树形dp 原来用优先队列做了一下, T了俩点 MMP 去看正解.. 复杂度一样好不好.. 每次到达一个点,记录 ...

  3. ROS计算图级

    上一节说到一个 package 可以包含多个可执行文件(节点),可执行文件需要被运行,就要了解ROS的通信架构,也就是计算图级,例: 小萝卜机器人拥有驱动系统,感知系统,控制系统等,要让它从指定位置到 ...

  4. gcc/g++ 链接库的编译与链接

    GCC编译步骤 gcc -E t1.c -o t1.i 预处理 gcc -S t1.i -o t1.s 转成汇编语言 gcc -c t1.s -o t1.o 转成机器码 gcc t1.o -o t1. ...

  5. Python基础之给函数增加元信息

    1. 参数注解 当写好一个函数以后,想为这个函数的参数添加一些额外的信息,这样的话,其他的使用者就可以清楚的知道这个函数应该怎么使用,这个时候可以使用函数参数注解. 函数参数注解能提示程序员应该怎样正 ...

  6. Spring Cloud Gateway(七):路由谓词工厂WeightRoutePredicateFactory

    本文基于 spring cloud gateway 2.0.1 接上文 5.基于路由权重(weigth)的谓词工厂 Spring Cloud Gateway 提供了基于路由权重的断言工厂,配置时指定分 ...

  7. selenium鼠标操作

    #-*- coding:utf-8 -*- import time from selenium import webdriver from selenium.webdriver.common.acti ...

  8. 图灵学院java架构课程

    1.wps文档地址 https://docs.qq.com/doc/DRVNLUndvTmFSdEhO 2.百度网盘地址 https://pan.baidu.com/s/1uxaTzJZHKrsw_H ...

  9. docker 搭建registry

    Docke官方提供了Docker Hub网站来作为一个公开的集中仓库.然而,本地访问Docker Hub速度往往很慢,并且很多时候我们需要一个本地的私有仓库只供网内使用.Docker仓库实际上提供两方 ...

  10. 2018-2019-2 《网络对抗技术》 Exp6 信息搜集与漏洞扫描 20165222

    1.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 (1)各种搜索技巧的应用 https://www.exploit-db.com/收集各种应用软件的漏洞,如tomcat服务器 ...