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或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
Angular2自定义分页组件
Apr 19 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
Jquery练习之表单验证实现代码
2010/12/14 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
Python删除空文件和空文件夹的方法
2015/07/14 Python
python enumerate函数的使用方法总结
2017/11/15 Python
儿童编程python入门
2018/05/08 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
Servlet的生命周期
2013/08/25 面试题
优秀教师先进事迹
2014/01/22 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
家长通知书家长评语
2014/04/17 职场文书
房屋所有权证明
2014/10/20 职场文书
2015年党建工作总结
2015/03/30 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
2016国培研修心得体会
2016/01/08 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技