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 相关文章推荐
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
vue中appear的用法
Aug 17 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
详解如何用模块化的方式写vuejs
Dec 16 Javascript
对vue里函数的调用顺序介绍
Mar 17 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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
分享别人写的一个小型js框架
2007/08/13 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
Python深入学习之特殊方法与多范式
2014/08/31 Python
python图片验证码生成代码
2016/07/02 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
python 美化输出信息的实例
2018/10/15 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
十八届三中全会个人学习材料
2014/02/13 职场文书
企业培训简报范文
2015/07/20 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery