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 MD4
Dec 20 Javascript
javascript取消文本选定的实现代码
Nov 14 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
jquery中each循环的简单回滚操作
May 05 jQuery
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
JS中的一些常用的函数式编程术语
Jun 15 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
Vue简单实现原理详解
May 07 Javascript
使用原生javascript开发计算器实例代码
Feb 21 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实现短域名互转
2013/07/05 PHP
php获取淘宝分类id示例
2014/01/16 PHP
php银联网页支付实现方法
2015/03/04 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
为数据添加append,remove功能
2006/10/03 Javascript
使用prototype.js进行异步操作
2007/02/07 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
python连接mysql并提交mysql事务示例
2014/03/05 Python
Python入门篇之函数
2014/10/20 Python
详解重置Django migration的常见方式
2019/02/15 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
Python 定义只读属性的实现方式
2020/03/05 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
比利时香水网上商店:NOTINO
2018/03/28 全球购物
计算机应用毕业生自荐信
2013/10/23 职场文书
党员自我评价分享
2013/12/13 职场文书
应聘自荐信
2013/12/14 职场文书
计算机专业优秀大学生自我总结
2014/01/21 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
二审答辩状格式
2015/05/22 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android