前端 crypto-js aes 加解密

背景

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

网上关于 AES 对称加密的算法介绍看上一篇!

具体实现

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

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

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

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

    const CryptoJS = require('crypto-js');  //引用AES源码jsconst 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

Encrypt

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

结语

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247552.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

对排序算法的研究

算法是什么?、 算法(Algorithm) 代表着用系统的方法描述解决问题的策略机制,可以通过一定规范的 输入,在有限时间内获得所需要的 输出。 一个算法的好坏是通过 时间复杂度 与 空间复杂度 来衡量的。 简单来说&#xff…

js实用算法

判断文本是否为回文 定义:如果将一个文本翻转过来,能和原文本完全相等,那么就可以称之为“回文”。 方法一(字符串、数组内置方法)123456789101112131415/** 判断文字是否为回文* param {string|number} val 需要判断的…

stylus

stylus格式 指将css中{} ;去掉即可

随笔记录(2019.7.10)

1、ISO/OSI 网络七层参考模型 物理层 数据链路层 网络层 传输层 会话层 表示层 应用层 2、 TCP/IP 网络四层模型和五层模型 四层模型: 网络接口层 网络层 传输层 应用层 五层模型: 物理层 数据链路层 网络层 传输层 应用层 3、 协议簇 (1&a…

转发:Ajax动态画EChart图表

本人由于项目需要,在状态变化的时候需要动态绘制对应数据的EChart图表,并且不刷新整个网页。 所以就用Ajax动态画EChart图表,下面是开发过程中遇到的一些坑的总结。 流程:页面首次加载时展示一幅原始的图形,若后台数据…

如果硬盘不显示可以这么处理

http://www.zhuangjiba.com/soft/9574.html转载于:https://www.cnblogs.com/braveheart007/p/11167311.html

Highcharts的饼图大小的控制

在Highcharts中,饼图的大小是Highcharts自动计算并进行绘制。饼图的大小受数据标签大小、数据标签到切片的距离影响。当数据标签内容较多,并且距离切片较远时,饼图就会被压缩的很小。解决这个问题,有以下几种方法:&…

转:谷歌离线地图基础

一.需要文件 gapi3文件夹&#xff1a;存放接口等tilemap文件夹&#xff1a;存放图片gapi.js文件maptool.js文件 二.html配置 <script type"text/javascript" src"gapi.js"></script> <script type"text/javascript" src"map…

HTTP Header 详解

搜集资料 HTTP&#xff08;HyperTextTransferProtocol&#xff09;即超文本传输协议&#xff0c;目前网页传输的的通用协议。HTTP协议采用了请求/响应模型&#xff0c;浏览器或其他客户端发出请求&#xff0c;服务器给与响应。就整个网络资源传输而言&#xff0c;包括message-h…

Windows CE 6.0中断处理过程(转载)

这里我们主要讨论的是CE的中断建立和中断相应的大概流程以及所涉及的代码位置。这里所讲述的&#xff0c;是针对ARM平台的。在CE的中断处理里面&#xff0c;有一部分工作是CE Kernel完成的&#xff0c;有一部分工作是要由OEM完成的。 Kernel代码工作 ExVector.s&#xff1a;中断…

document.createDocumentFragment 以及创建节点速度比较

document.createDocumentFragment document.createDocumentFragment()方法创建一个新空白的DocumentFragment对象。 DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段&#xff0c;将元素附加到文档片段&#xff0c;然后将文档片段附加到DOM树。…

Javascript重温OOP之原型与原型链

prototype原型对象 每个函数都有一个默认的prototype属性&#xff0c;其实际上还是一个对象&#xff0c;如果被用在继承中&#xff0c;姑且叫做原型对象。 在构造函数中的prototype中定义的属性和方法&#xff0c;会被创建的对象所继承下来。举个栗子&#xff1a; function F()…

webpack超详细配置

在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目; 流程 webpack安装 Step 1: 首先安装Node.js, 可以去Node.js官网下载.Step2: 在Git或者cmd中输入下面这段代码, 通过全局…

小白十分钟-推荐导航栏

大腿绕道&#xff0c;给小白学习用&#xff0c;上代码 <div class"list"><div class"infor"><ul class"left"><li><a href"">限时特价</a></li><li><a href"">热门推…

Underscore.js常用方法介绍

Underscore.js是一个很精干的库&#xff0c;压缩后只有4KB。它提供了几十种函数式编程的方法&#xff0c;弥补了标准库的不足&#xff0c;大大方便了JavaScript的编程。MVC框架Backbone.js就将这个库作为自己的工具库。除了可以在浏览器环境使用&#xff0c;Underscore.js还可以…

掌握ES6/ES2015核心内容

ECMAScript 6&#xff08;以下简称ES6&#xff09;是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的&#xff0c;所以又称ECMAScript 2015。 也就是说&#xff0c;ES6就是ES2015。 虽然目前并不是所有浏览器都能兼容ES6全部特性&#xff0c;但越来越多的程序员…

express-generator——Express应用生成器贼快!

通过应用生成器工具 express 可以快速创建一个应用的骨架。 通过如下命令安装&#xff1a; $ npm install express-generator -g-h 选项可以列出所有可用的命令行选项&#xff1a; $ express -hUsage: express [options] [dir]Options:-h, --help output usage inform…

转:canvas--放大镜效果

<!DOCTYPE html><html><head><meta charset"UTF-8"><title>鼠标事件</title></head><body><canvas id"canvas"></canvas><canvas id"offCanvas" style" display: none;&qu…

MON

早上5点,咪咪牛就醒了,开始跳到我边上,用白毛毛把我弄醒,在我身上走来走去,把她按住抚摸也不能让她停止.....只能拎起来扔到边上了 ;)看起来还的确是很调皮的猫咪呢昨天晚上就开始不太怕我了,走到我的椅子边上喵喵叫,直到把她放在身上,才慢慢睡觉,满可爱的早上出门叫车,一车正停…

CSS做个Switch开关

Switch开关&#xff1a;根据需求可知&#xff0c;Switch开关只有两种选择&#xff0c;true或false。所以我们想到HTML的checkbox控件&#xff0c;用它来做。  <input id"switch" type"checkbox" class"switch" />但是在浏览器中&#xf…