关于前端加密的那些事CryptoJS(值得收藏)

文章目录

介绍:

CryptoJS 是一个在 JavaScript 中实现了加密算法的开源库。它支持多种的算法:MD5、SHA-1、SHA-2、SHA-3、RIPEMD-160 哈希散列,进行 AES、DES、Rabbit、RC4、 RC4Drop、Triple DES 加解密。
在线加密解密工具

一、功能特点

1、多种加密算法

支持常见的加密算法,如 AES(高级加密标准)、DES(数据加密标准)、RC4 等对称加密算法。这些算法可用于对数据进行加密和解密,确保数据的保密性。

也提供了哈希算法,如 MD5、SHA-1、SHA-256 等,用于生成数据的唯一摘要,可用于数据完整性校验和密码存储等场景。

2、编码与解码

可以进行 Base64 编码和解码,方便在不同系统之间传输二进制数据。

支持十六进制编码和解码,对于处理字节流数据非常有用。

3、易于使用

提供了简洁的 API,使得在 JavaScript 中进行加密和解密操作变得非常简单。你只需要引入 CryptoJS 库,就可以使用其提供的函数进行各种加密操作。

二、使用场景

1、前端数据安全

在 Web 应用中,如果你需要在客户端对敏感数据进行加密,然后将加密后的数据发送到服务器,可以使用 CryptoJS 来实现。例如,对用户的密码进行加密后再传输,以防止密码在网络传输过程中被窃取。

对于一些需要在本地存储的敏感信息,也可以使用 CryptoJS 进行加密,以提高数据的安全性。

2、后端与前端交互

在前后端分离的应用中,后端也可以使用与前端相同的加密算法库,确保数据在传输过程中的安全性。例如,后端可以使用 CryptoJS 对从前端接收到的数据进行解密,或者对要返回给前端的数据进行加密。

3、密码存储与验证

当用户注册或登录时,可以使用哈希算法对用户密码进行处理,并将哈希值存储在数据库中。在用户登录时,再次对用户输入的密码进行哈希处理,并与数据库中的哈希值进行比较,以验证用户的身份。

三、代码示例

javascript 复制代码
// 引入 CryptoJS 库
const CryptoJS = require('crypto-js');

//或者npm引入
// npm install crypto-js

// 要加密的数据
const data = 'Hello, World!';

// 加密密钥
const key = CryptoJS.enc.Utf8.parse('mysecretkey12345');

// 使用 AES 加密 AES是常见的对称加密算法,加密和解密使用相同的密钥

export function encrypt(data,key){
 if (!data||!key) return ''
 const encryptedData = CryptoJS.AES.encrypt(data, key, {
  mode: CryptoJS.mode.ECB,
  padding: CryptoJS.pad.Pkcs7
});
// 输出加密后的数据
return encryptedData.toString()
}



// 解密
export function decrypt(data,key){
const decryptedData = CryptoJS.AES.decrypt(data, key, {
  mode: CryptoJS.mode.ECB,
  padding: CryptoJS.pad.Pkcs7
});

// 输出解密后的数据
return decryptedData.toString(CryptoJS.enc.Utf8)
}

四、参数结构

CryptoJS.AES.encryp(message,key,{mode:CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7,iv:WordArray}) iv:WordArray可选参数

五、主要属性说明:

一、参数说明
message

类型:可以是字符串、WordArray(CryptoJS 中的一种数据类型,用于表示二进制数据的数组)或其他可转换为二进制数据的类型。

说明:这是要加密的原始数据。
key

类型:通常是一个 WordArray 或可以转换为 WordArray 的数据,如字符串。

说明:加密密钥,AES 加密需要一个特定长度的密钥,通常为 128 位、192 位或 256 位。密钥的长度决定了加密的强度。
options(可选):
mode

类型:一个表示加密模式的常量,如 CryptoJS.mode.ECB(电子密码本模式)、CryptoJS.mode.CBC(密码分组链接模式)等。

说明:加密模式决定了如何将数据分块进行加密以及如何处理块之间的关系。不同的模式有不同的特点和安全性考虑。
padding

类型:一个表示填充方式的常量,如 CryptoJS.pad.Pkcs7(PKCS#7 填充)、CryptoJS.pad.ZeroPadding(零填充)等。

说明:由于 AES 通常要求数据长度是固定块大小的整数倍,所以需要对不足块大小的数据进行填充。填充方式决定了如何在数据末尾添加额外的字节以满足块大小要求。
iv(仅在某些模式下需要):

类型:一个 WordArray,表示初始向量。

说明:在某些加密模式(如 CBC 模式)中,需要一个初始向量来增加加密的随机性和安全性。初始向量应该是随机生成的,并且在每次加密过程中都应该不同。

相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui