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 相关文章推荐
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
jQuery实现视频展示效果
May 30 jQuery
实例详解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
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
PHP基础知识介绍
2013/09/17 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
Jquery中dialog属性小记
2010/09/03 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
使用Python来开发微信功能
2018/06/13 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
python SVD压缩图像的实现代码
2019/11/05 Python
Python读取csv文件实例解析
2019/12/30 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
个人投资计划书
2014/05/01 职场文书
村党建工作汇报材料
2014/11/02 职场文书
2014年采购工作总结
2014/11/20 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis