1. 概述

1.1 说明

crypto-js(GitHub)是谷歌开发的一个纯JavaScript的加密算法类库,可以非常方便的在前端进行其所支持的加解密操作。目前crypto-js已支持的算法有:MD5,SHA-1,SHA-256,AES,Rabbit,MARC4,HMAC,HMAC-MD5,HMAC-SHA1,HMAC-SHA256,PBKDF2。常用的加密方式有MD5和AES,使用时可以引用总文件,也可以单独引用某一文件。

1.2 使用方式

直接引用:引入crypto-js文件。

安装依赖:npm install crypto-js         import CryptoJS from 'crypto-js'。

2. 示例

2.1 AES加解密(VUE项目)

<template>
<div style="width: 600px; margin: 0 auto">
<el-row>
<el-col :span="10">
<el-row>
<el-col :span="24">明文内容</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-input v-model="content" type="textarea" :rows="8"></el-input>
</el-col>
</el-row>
</el-col>
<el-col :span="4">
<div style="margin-top: 60px;">
<el-row style="margin-bottom: 10px;">
<el-col :span="24">
<el-button type="primary" @click="encryptFunction">加密</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-button type="primary" @click="unEncryptFunction">解密</el-button>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="10">
<el-row>
<el-col :span="24">密文内容</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-input v-model="encryptContent" type="textarea" :rows="8"></el-input>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script>
import CryptoJS from 'crypto-js'
export default {
data() {
return {
content: null,
encryptContent: null,
encryptSecretKey: null
}
},
methods: {
/**
* 加密方法
**/
encryptFunction: function () {
this.$data.encryptSecretKey=null;
let objEncrypt = null;
objEncrypt = this.encryptByAES(this.$data.content);
if (objEncrypt) {
this.$data.encryptContent = objEncrypt.encryptContent;
this.$data.encryptSecretKey = objEncrypt.encryptSecretKey;
}
},
/**
* aes加密
* @param strEncrypt:需要加密的内容
* @return 返回加密后的内容与加密密钥
**/
encryptByAES: function (strEncrypt) {
let aesSecretKey = '';//16长度随机字符串
do {
aesSecretKey = Math.random().toString(36).substr(2) + Math.random().toString(36).substr(Math.floor(Math.random() * (12 - 5 + 1) + 5))
} while (aesSecretKey.length != 16);
let aesSecretUtf8 = CryptoJS.enc.Utf8.parse(aesSecretKey);
const iv = CryptoJS.enc.Base64.parse('******KKKKKKKKKKKKKKKKK******');
let aesEncrypt = CryptoJS.AES.encrypt(strEncrypt, aesSecretUtf8, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
let objReturn = {
encryptContent: aesEncrypt.toString(),
encryptSecretKey: aesSecretKey
};
return objReturn;
},
/**
* 解密方法
**/
unEncryptFunction: function () {
this.$data.content=this.unEncryptByAES( this.$data.encryptContent,this.$data.encryptSecretKey)
},
/**
* aes加密
* @param strEncrypt:需要解密的内容
* @param keyEncrypt:加密时用到的密钥
* @return 返回解密后的内容
**/
unEncryptByAES: function (strEncrypt,keyEncrypt) {
let aesSecretUtf8 = CryptoJS.enc.Utf8.parse(keyEncrypt);
const iv = CryptoJS.enc.Base64.parse('******KKKKKKKKKKKKKKKKK******');
let aesUnEncrypt =CryptoJS.AES.decrypt(strEncrypt,aesSecretUtf8,
{
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return aesUnEncrypt.toString(CryptoJS.enc.Utf8);
},
}
}
</script>

  注意:加解密时,所使用的偏移量iv必须相同。

2.2 MD5

this.$data.encryptContent=CryptoJS.MD5(this.$data.content);

JavaScript 加解密库(crypto-js)的更多相关文章

  1. javascript模块化编程库require.js的用法

    随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的.更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码 ...

  2. 简单的JavaScript图像延迟加载库Echo.js

    插件描述:和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQu ...

  3. 简单的Javascript图片延迟加载库Echo.js

    简介: 和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQue ...

  4. JavaScript语法高亮库highlight.js使用

    highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库 ...

  5. Apache Commons Codec的Base64加解密库

    下载地址:http://commons.apache.org/proper/commons-codec/download_codec.cgi import org.apache.commons.cod ...

  6. js javascript 简易随机值穿插加解密【原】

    适用场景 本方法适用于需要对敏感信息进行加密传输,但加解密要求又不高的场景,因为是前台的javascript加解密,所以其实还是能通过js代码分析出原始值来的. 如果您对信息极其敏感, 比例登录密码这 ...

  7. 介绍一个很好用的Rsa加解密的.Net库 Kalix.ApiCrypto

    Rsa非对称加密技术 这个就不说了,大家上网搜索都知道,公钥加密,私钥解密.当然大家也可以自己实现.这里就懒了,就去找一个现成的库,Nuget上搜索,GitHub上搜索,发现.Net的加解密库,下载量 ...

  8. SpringBoot使用jasypt加解密密码

    在我们的服务中不可避免的需要使用到一些秘钥(数据库.redis等) 开发和测试环境还好,但生产如果采用明文配置讲会有安全问题,jasypt是一个通用的加解密库,我们可以使用它. <depende ...

  9. nodejs加解密

    加密分类 可逆加密和不可逆加密 不可逆加密: 加密后不可解密,只能通过碰撞密文以极小的概率解密; 可逆加密: 加密后可以解密;包括对称加密与非对称加密; 对称加密双方采用共同密钥; 非对称加密: 这种 ...

随机推荐

  1. jQuery two way bindings(双向数据绑定插件)

    jQuery two way bindings https://github.com/petersirka/jquery.bindings 这是一个简单的jQuery双向绑定库. 此插件将HTML元素 ...

  2. 求f(n)=[n/1]+[n/2]+---+[n/n]的值 简单杂题

    这种小题首先根据 n/1+n/2+n/3+--+n/n=nlogn+欧拉常数r 可以知道 1e12的范围也不会爆longlong,不需要写高精度(到现在都不会写) 再根据数据范围可知O(n)级别的暴力 ...

  3. kindeditor<=4.1.5 文件上传漏洞利用

    kindeditor<=4.1.5 文件上传漏洞 - Kindeditor <=4.1.5 file upload vulnerability and use 漏洞存影响版本:小于等于4. ...

  4. vue 中跨组件的表单验证

    使用的是element写的,里面提供了表单验证. 子组件是这样的 <template> <div> <el-form :model="value" r ...

  5. python 的基础 学习第十天函数的初始

    1,什么是函数,函数就是封装一个功能. 怎么定义函数. # def my_len():#def 是关键字,定义一个一个函数.#my_len():就是函数名,必须和关键字加一个空格,后面加括号和冒号.d ...

  6. js监听浏览器返回事件

    $(function(){ pushHistory(); window.addEventListener("popstate", function(e) { window.loca ...

  7. 如何设置vmware 让别人连接你的虚拟机

    参考链接: http://blog.csdn.net/yuan1590/article/details/53504042 http://blog.csdn.net/u012110719/article ...

  8. Spring Cloud学习资料

    博客 1.跟我学Spring Cloud 2.周立|Spring Cloud 3.Spring Cloud基础教程(强烈推荐) 4.Spring Cloud系列文章 5.forezp|史上最简单的 S ...

  9. Web三层-UI/BLL/DAL/MODEL

    2013传智播客视频\视频\2013-05-28-EF\视频 创建4个程序集,添加引用,model添加映射, P01UI表现层--BLL+MODELP02BLL业务层--DAL+MODELP03DAL ...

  10. HttpClient和HttpURLConnection的使用和区别

    https://www.cnblogs.com/liushuibufu/p/4140913.html 功能用法对比 从功能上对比,HttpURLConnection比HttpClient库要丰富很多, ...