JavaScript 加解密库(crypto-js)
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)的更多相关文章
- javascript模块化编程库require.js的用法
随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的.更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码 ...
- 简单的JavaScript图像延迟加载库Echo.js
插件描述:和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQu ...
- 简单的Javascript图片延迟加载库Echo.js
简介: 和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQue ...
- JavaScript语法高亮库highlight.js使用
highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库 ...
- Apache Commons Codec的Base64加解密库
下载地址:http://commons.apache.org/proper/commons-codec/download_codec.cgi import org.apache.commons.cod ...
- js javascript 简易随机值穿插加解密【原】
适用场景 本方法适用于需要对敏感信息进行加密传输,但加解密要求又不高的场景,因为是前台的javascript加解密,所以其实还是能通过js代码分析出原始值来的. 如果您对信息极其敏感, 比例登录密码这 ...
- 介绍一个很好用的Rsa加解密的.Net库 Kalix.ApiCrypto
Rsa非对称加密技术 这个就不说了,大家上网搜索都知道,公钥加密,私钥解密.当然大家也可以自己实现.这里就懒了,就去找一个现成的库,Nuget上搜索,GitHub上搜索,发现.Net的加解密库,下载量 ...
- SpringBoot使用jasypt加解密密码
在我们的服务中不可避免的需要使用到一些秘钥(数据库.redis等) 开发和测试环境还好,但生产如果采用明文配置讲会有安全问题,jasypt是一个通用的加解密库,我们可以使用它. <depende ...
- nodejs加解密
加密分类 可逆加密和不可逆加密 不可逆加密: 加密后不可解密,只能通过碰撞密文以极小的概率解密; 可逆加密: 加密后可以解密;包括对称加密与非对称加密; 对称加密双方采用共同密钥; 非对称加密: 这种 ...
随机推荐
- 一个强大的VS代码搜索工具
最近一直在寻找一款VS代码搜索插件,终于找到了一个不错的,仅支持vs2012以上. https://marketplace.visualstudio.com/items?itemName=mario- ...
- C#正则表达式匹配
1.匹配所有带括号的字符串 string s = "aaaa(bbb)ccc(ddd)eeee"; string pattern = "\\(\\w+\\)"; ...
- Python下Tesseract Ocr引擎及安装介绍
1.Tesseract介绍 tesseract 是一个google支持的开源ocr项目,其项目地址:https://github.com/tesseract-ocr/tesseract,目前最新的源码 ...
- select样式设计
举例: select { color: blue; /*去掉边框*/ border: none; outline: none; /*去掉箭头*/ -webkit-appearance: none; / ...
- Elasticsearch 5.0 —— Head插件部署指南(Head目前支持5.0了!请不要看本篇文章了)
使用ES的基本都会使用过head,但是版本升级到5.0后,head插件就不好使了.下面就看看如何在5.0中启动Head插件吧! Head目前支持5.0了!请不要看本篇文章了 Head目前支持5.0了! ...
- Python 基础算法
递归 时间&空间复杂度 常见列表查找 算法排序 数据结构 递归 在调用一个函数的过程中,直接或间接地调用了函数本身这就叫做递归. 注:python在递归中没用像别的语言对递归进行优化,所以每一 ...
- 【blog】谷歌浏览器如何设置编码
解释 55.0.2883.75 版本之后的chrome的更多工具菜单项里就没有编码设置了,理由据说是使用率比较低,促进网页编码规范.google 真是脑抽了,普通用户也许很少遇到默认编码错误显示出现乱 ...
- 【blog】SpringBoot普通类中如何获取其他bean例如Service、Dao
自己写工具类 工具类 import org.springframework.beans.BeansException; import org.springframework.context.Appli ...
- linux 网络命令
- Spring重温(四)--Spring自动组件扫描
通常情况下,声明所有的Bean类或组件的XML bean配置文件,这样Spring容器可以检测并注册Bean类或组件. 其实,Spring是能够自动扫描,检测和预定义的项目包并实例化bean,不再有繁 ...