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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
javascript中的数据类型检测方法详解
Aug 07 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和ACCESS写聊天室(二)
2006/10/09 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
python 实现UTC时间加减的方法
2018/12/31 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
一套PHP的笔试题
2013/05/31 面试题
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
大学生毕业自我鉴定范文
2013/09/19 职场文书
皮肤科医师岗位职责
2013/12/04 职场文书
银行实习的自我鉴定
2013/12/10 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
小学一年级评语大全
2014/04/22 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫