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中的排序算法代码
Feb 22 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
两个数组去重的JS代码
Dec 04 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 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
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
PHP输出XML到页面的3种方法详解
2013/06/06 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
Cpy和Python的效率对比
2015/03/20 Python
Python常用算法学习基础教程
2017/04/13 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
python实现银行实战系统
2020/02/26 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
英国日常交易网站:Wowcher
2018/09/04 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
查环查孕证明
2014/01/10 职场文书
技校毕业生个人学习的自我评价
2014/02/21 职场文书
团队精神的演讲稿
2014/05/14 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
繁星春水读书笔记
2015/06/30 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
Python 内置函数速查表一览
2021/06/02 Python
Golang获取List列表元素的四种方式
2022/04/20 Golang