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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
js的with语句使用方法
Sep 21 Javascript
js打开新窗口方法整理
Feb 17 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
js面向对象编程总结
Feb 16 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
js 闭包深入理解与实例分析
Mar 19 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
php 图像函数大举例(非原创)
2009/06/20 PHP
php上传文件的增强函数
2010/07/21 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
js实现秒表计时器
2019/12/16 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
Python错误处理操作示例
2018/07/18 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
日本小田急百货官网:Odakyu
2018/07/19 全球购物
创业计划书中要认真思考的问题
2013/12/28 职场文书
测控技术与仪器个人求职信范文
2013/12/30 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
战马观后感
2015/06/08 职场文书
医院保洁员管理制度
2015/08/05 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书