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是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
微信小程序倒计时功能实现代码
Nov 09 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
mysql+php分页类(已测)
2008/03/31 PHP
php获取网页内容方法总结
2008/12/04 PHP
PHP 网页过期时间的控制代码
2009/06/29 PHP
php提高网站效率的技巧
2015/09/29 PHP
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
python编码最佳实践之总结
2016/02/14 Python
深入解析Python中函数的参数与作用域
2016/03/20 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
python获取代理IP的实例分享
2018/05/07 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
python移位运算的实现
2019/07/15 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
python 基于opencv实现图像增强
2020/12/23 Python
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
家长对孩子评语
2014/01/30 职场文书
年度考核自我鉴定
2014/03/19 职场文书
设备售后服务承诺书
2014/05/30 职场文书
团日活动总结模板
2014/06/25 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
旷工辞退通知书
2015/04/17 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
python实现高效的遗传算法
2021/04/07 Python
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
详解CSS故障艺术
2021/05/25 HTML / CSS