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脚本
Dec 03 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
多种方式实现js图片预览
Dec 12 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 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通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
jsonp原理及使用
2013/10/28 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
python数据结构之列表和元组的详解
2017/09/23 Python
Python之循环结构
2019/01/15 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
Python内置函数property()如何使用
2020/09/01 Python
python元组拆包实现方法
2021/02/28 Python
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
应用心理学个人求职信范文
2013/12/11 职场文书
自荐书模板
2013/12/15 职场文书
人力资源主管职责范本
2014/03/05 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
法学求职信
2014/06/22 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
财产分割协议书
2016/03/22 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python