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 相关文章推荐
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
实例详解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教程孙仲岳主讲
2008/01/07 PHP
PHP4与PHP5的时间格式问题
2008/02/17 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
python各层级目录下import方法代码实例
2020/01/20 Python
python连接PostgreSQL过程解析
2020/02/09 Python
Python通过Pillow实现图片对比
2020/04/29 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
师范生自我鉴定范文
2013/10/05 职场文书
工程造价自荐信
2013/10/09 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
医学求职信
2014/05/28 职场文书
python实现简单区块链结构
2021/04/25 Python