JS加密插件CryptoJS实现AES加密操作示例


Posted in Javascript onAugust 16, 2018

本文实例讲述了JS加密插件CryptoJS实现AES加密操作。分享给大家供大家参考,具体如下:

最近在做一个项目,考虑到数据的安全性,我们要给数据在传输过程中加密,防止一些恶意的操作以及爬虫抓取数据。

  • 用到的库:CryptoJS 官方地址https://code.google.com/archive/p/crypto-js/

首先看看这个CryptoJS的目录结构

JS加密插件CryptoJS实现AES加密操作示例

主要是两个文件夹,components和rollups

第一个是组件,第二个是汇总。

在汇总文件夹中的文件是在组件一个或多个文件夹拼接后压缩的。

这使得汇总独立的文件夹在你的项目纳入项目文件,而无需担心它的依赖。

你可以在这里查看汇总文件和组件之间的关系:

https://code.google.com/p/crypto-js/source/browse/tags/3.1.2/builder/build.yml

首先在项目中引入对应的加密文件,我们用的是AES,同时用RequireJS来加载JS,在配置中声明路径:

require.config({
  baseUrl: "/Public/Home/Js/lib",
  paths: {
    hzbAES:'../module/hzb.AES'
  }
});

首先把加密解密封装好为一个模块

//模块初始化
var init=function () {
    key = CryptoJS.enc.Utf8.parse(CryptoJS.MD5(ym.hezubao).toString());
    iv = CryptoJS.enc.Utf8.parse(CryptoJS.MD5(key).toString().substr(0,16));
}
function encrypt(data) {
    var encrypted='';
    if(typeof(data)=='string')
    {
      encrypted = CryptoJS.AES.encrypt(data,key,{
        iv : iv,
        mode : CryptoJS.mode.CBC,
        padding : CryptoJS.pad.ZeroPadding
      });
    }else if(typeof(data)=='object'){
      data = JSON.stringify(data);
      encrypted = CryptoJS.AES.encrypt(data,key,{
        iv : iv,
        mode : CryptoJS.mode.CBC,
        padding : CryptoJS.pad.ZeroPadding
      })
    }
    return encrypted.toString();
}
/*AES解密
* param : message 密文
* return : decrypted string 明文
*/
function decrypt(message) {
    decrypted='';
    decrypted=CryptoJS.AES.decrypt(message,key,{
      iv : iv,
      mode : CryptoJS.mode.CBC,
      padding : CryptoJS.pad.ZeroPadding
    });
    return decrypted.toString(CryptoJS.enc.Utf8);
}

解释一下代码:

  • 我们加密的模式选的是CBC的,然后填充模式是填充0,这个是前后台约定的,请谨慎。加密秘钥要求是32位长字符串(通过md5加密确保32位,算法限制),iv初始化向量是16位长度的字符串。这两个东西不懂的话,看看AES加密的条件。
  • 要注意的是,在加密完成后的字符串是经过Base64加密的,也就是说,后台解密模块必须要求考虑字符编码问题,这个由项目实际来决定。可以把他先转出UTF8的然后再传递给后台。我这里后台是介绍Base64加密后的,所以就不用转码了。
  • 解密之后要转成UTF8喔,如果后台给的数据是JSON的话,要用JSON.parse()一下才能用。

在代码中调用

require(['hzbAES'], function(hzbAES){
  var jsonData={'id':2,'username':'春天的熊'};//json格式数据(加密支持json格式和字符串格式)
  $('#btn_test').click(function () {
    var encrypt=hzbAES.encrypt(jsonData);
      console.log('前台发过去的数据:'+encrypt);//已加密
    $.getJSON(UrlGenerator.url(2,'Home','Index','test'),{'data':encrypt},function (data) {
      if(!data['error'])
      {
        var decrypt=JSON.parse(hzbAES.decrypt(data['data']));
        console.log('后台发过来的数据:');//已解密
        console.log(decrypt);
      }else{
        console.log(data['error']);
      }
    })
  });
});
Javascript 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
react 路由Link配置详解
Nov 11 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 #Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 #Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 #Javascript
JS实现的RC4加密算法示例
Aug 16 #Javascript
vue2.0父子组件间传递数据的方法
Aug 16 #Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 #Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 #Javascript
You might like
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
jquery动态添加option示例
2013/12/30 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
Python subprocess库的使用详解
2018/10/26 Python
一百行python代码将图片转成字符画
2021/02/19 Python
python实现简易数码时钟
2021/02/19 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
2015年植树节活动总结
2015/02/06 职场文书
运输公司工作总结
2015/08/11 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
python实现的web监控系统
2021/04/27 Python
Python 中的 copy()和deepcopy()
2021/11/07 Python
python中的random模块和相关函数详解
2022/04/22 Python