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 相关文章推荐
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
js的2种继承方式详解
Mar 04 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
JS实现纵向轮播图(初级版)
Jan 18 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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
python实现多线程行情抓取工具的方法
2018/02/28 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
一名老师的自我评价
2014/02/07 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
《雨点》教学反思
2014/02/12 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
假面舞会策划方案
2014/05/29 职场文书
毕业生党员个人总结
2015/02/14 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
聘任书格式及范文
2015/09/21 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
python解析照片拍摄时间进行图片整理
2022/07/23 Python