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 indexOf函数使用说明
Jul 03 Javascript
js操作textarea 常用方法总结
Dec 03 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
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
Adodb的十个实例(清晰版)
2006/12/31 PHP
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
Javascript 继承机制实例
2009/08/12 Javascript
js 分栏效果实现代码
2009/08/29 Javascript
javascript定义函数的方法
2010/12/06 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
python用什么编辑器进行项目开发
2020/06/17 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
计算机系毕业生推荐信
2013/11/06 职场文书
上学迟到的检讨书
2014/01/11 职场文书
逃课上网检讨书
2014/02/20 职场文书
世界环境日活动总结
2015/02/11 职场文书