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 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
javascript元素动态创建实现方法
May 13 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 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安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
初识php MVC
2014/09/10 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
Python MySQLdb Linux下安装笔记
2015/05/09 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
自荐信格式
2013/12/01 职场文书
自荐书范文
2013/12/08 职场文书
海南地接欢迎词
2014/01/14 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
世界名著读书笔记
2015/06/25 职场文书