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 表格工具集
Apr 25 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
jQuery中trigger()方法用法实例
2015/01/19 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
小程序云开发实战小结
2018/10/25 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
python命令行工具Click快速掌握
2019/07/04 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Python threading的使用方法解析
2019/08/28 Python
详解Python IO口多路复用
2020/06/17 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
自我介绍演讲稿
2014/01/15 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
车辆转让协议书
2014/04/15 职场文书
购房委托书范本
2014/09/18 职场文书
政风行风评议心得体会
2014/10/21 职场文书
保险公司增员口号
2015/12/25 职场文书
Python机器学习之基础概述
2021/05/19 Python
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python