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 相关文章推荐
javascript parseInt 函数分析(转)
Mar 21 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 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 CKEditor 上传图片实现代码
2009/11/06 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
jquery 获取json数据实现代码
2009/04/27 Javascript
JS 表单验证大全
2011/11/23 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
javascript的几种写法总结
2016/09/30 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
python合并文本文件示例
2014/02/07 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
android面试问题与答案
2016/12/27 面试题
销售口号大全
2014/06/11 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书