JavaScript实现的前端AES加密解密功能【基于CryptoJS】


Posted in Javascript onAugust 28, 2018

本文实例讲述了JavaScript实现的前端AES加密解密功能。分享给大家供大家参考,具体如下:

js前端AES加密

最近由于项目需求做了一次MITM,突然即使发现使用HTTPS,也不能保证数据传输过程中的安全性。 通过中间人攻击,可以直接获取到Http协议的所有内容。 于是开始尝试做一些简单的加密,在一定程度上保证安全性。

本次采用AES加密数据,所以客户端和服务端使用的相同秘钥。(仅作为演示,正式环境推荐使用RSA)

首先准备一份明文密码和加密使用的KEY

var source = "ABCDEFG";
var aesKey = "8NONwyJtHesysWpM";

JS加密 padding和mode 需要与服务端相对应,否则无法解密

key 为字符串类型,需要处理完再使用

注:PKCS5Padding PKCS7Padding 是一样的

上段所示的 encryptedData 即为加密后的结果。

JS解密代码

encryptedData 为加密后的数据,
直接通过JS加密后的数据是一个对象,无法直接解密的, 需要转换为Base64的字符串后才可解密
服务端应当返回Base64之后的加密数据

encryptedData = encryptedData.ciphertext.toString();
var encryptedHexStr = CryptoJS.enc.Hex.parse(encryptedData);

先来看看运行结果:

 JavaScript实现的前端AES加密解密功能【基于CryptoJS】

aes.js文件可点击此处本站下载

完整测试代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com aes.js</title>
</head>
<script src="aes.js"></script>
<body>
<script>
  var key = CryptoJS.enc.Utf8.parse("8NONwyJtHesysWpM");
  var plaintText = 'ABCDEFGH'; // 明文
  var encryptedData = CryptoJS.AES.encrypt(plaintText, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  console.log("加密前:"+plaintText);
  console.log("加密后:"+encryptedData);
  encryptedData = encryptedData.ciphertext.toString();
  var encryptedHexStr = CryptoJS.enc.Hex.parse(encryptedData);
  var encryptedBase64Str = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  var decryptedData = CryptoJS.AES.decrypt(encryptedBase64Str, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  var decryptedStr = decryptedData.toString(CryptoJS.enc.Utf8);
  console.log("解密后:"+decryptedStr);
   var pwd = "PCsUFtgog9/qpqmqXsuCRQ==";
  //加密服务端返回的数据
  var decryptedData = CryptoJS.AES.decrypt(pwd, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  console.log("解密服务端返回的数据:"+decryptedStr);
</script>
</body>
</html>

代码中带入aes.js完整代码,使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,可得到上述运行结果。

Javascript 相关文章推荐
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
详解vuejs之v-for列表渲染
Jun 22 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 #Javascript
微信小程序多音频播放进度条问题
Aug 28 #Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 #Javascript
vue表单自定义校验规则介绍
Aug 28 #Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 #Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 #Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 #Javascript
You might like
destoon二次开发入门示例
2014/06/20 PHP
php构造函数的继承方法
2015/02/09 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
实例浅析js的this
2016/12/11 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
python字典快速保存于读取的方法
2018/03/23 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
自荐书格式
2013/12/01 职场文书
学习保证书范文
2014/04/30 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
关于观后感的作文
2015/06/18 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
DE1103使用报告
2022/04/05 无线电
Redis入门基础常用操作命令整理
2022/06/01 Redis
TS 类型兼容教程示例详解
2022/09/23 Javascript