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 相关文章推荐
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
javascript打印输出json实例
Nov 11 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
JavaScript 九种跨域方式实现原理
Feb 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
2006/12/23 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
简单实例处理url特殊符号&处理(2种方法)
2013/04/02 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
python实现多人聊天室
2020/03/31 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
什么是Assembly(程序集)
2014/09/14 面试题
《去年的树》教学反思
2014/04/11 职场文书
个人股份合作协议书
2014/10/24 职场文书
房产公证书格式
2015/01/26 职场文书
人事主管岗位职责
2015/02/04 职场文书
云冈石窟导游词
2015/02/04 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android