关于前端加密的那些事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 模式)中,需要一个初始向量来增加加密的随机性和安全性。初始向量应该是随机生成的,并且在每次加密过程中都应该不同。

相关推荐
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者2 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile2 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639972 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊2 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火2 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月6 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀6 小时前
html初学者第一天
前端·html
脑袋大大的7 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络9 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码