前端使用CryptoJS进行数据加密的完整指南

作者:霁月

时间:2026-10-31

浏览:452

本文详细介绍前端如何利用CryptoJS库实现数据加密。涵盖SHA256哈希、AES对称加密(含Key与IV配置)、HMAC消息认证码及Base64编码解码等常用算法。提供具体代码示例与参数说明,帮助开发者掌握Web端数据安全防护技术。

文章目录

安装

npm install crypto-js

引入

import CryptoJS from "crypto-js";

CryptoJS是前端常用的加密库,支持多种加密方式,以下列举几种常用算法:

SHA256哈希算法

SHA256是常见哈希算法,生成256位哈希值,常用于数据签名和身份验证。利用CryptoJS的SHA256方法可便捷计算哈希值。

SHA256为单向加密算法,无解密功能。其作用是将任意长度明文经哈希计算生成固定长度哈希值,因哈希值与原始数据关系通常不可逆。

//加密
const plaintilit = 'hello world'
const hash = CryptoJS.SH256(plaintilit).toString
console.log(hash)  // "b94d27b9934d3e08a52e52d7da7dabfac484efe37a5380ee9088f7ace2efcde9"

AES对称加密算法

AES是常见对称加密算法,通过相同密钥进行加解密,常用于数据保护和机密信息存储。利用CryptoJS的AES方法可便捷执行加解密操作。

key是对称加密核心参数,同一明文和密钥生成的密文相同,故密钥须保密且难破解。key长度可为128位、192位或256位,不同长度对应不同安全级别。

iv是增加加密强度的参数,需与key一同作为输入传递给加密算法。iv长度为128位,每次加密时改变,并与key参与加密过程。iv作用是将相同明文用不同iv加密生成不同密文,从而增加破解难度和安全性。

//设置key和对应的iv
//在CryptoJS中,CryptoJS.enc.Utf8.parse方法用于将字符串转换为UTF-8编码的字节数组,这是因为加算
//法通常需要将字符串转换为字节流进行处理。在对字符串进行加密或解密之前,需要先将其转换为字节数组。

const plaintitle = 'hello world'
const key = CryptoJS.enc.Utf8.parse('zxcvbnm')
const iv = CryptoJS.enc.Utf8.parse('zxcvbnm')

// 加密
const ciphertext = CryptoJS.AES.encrypt(plaintitle , key, { iv: iv })
console.log(ciphertext.toString())  // "U2FsdGVkX1/z9g+JQzthGtFlKeZeBjJ92Z1nxv5vxsw="

// 解密
const decrypted = CryptoJS.AES.decrypt(ciphertext, key, { iv: iv })
console.log(decrypted.toString(CryptoJS.enc.Utf8))  // "hello world"

HMAC哈希消息认证码

HMAC是基于哈希函数和密钥的消息认证码算法,用于验证数据完整性和真实性。利用CryptoJS的HmacSHA256方法可便捷计算HMAC-SHA256哈希值。

const plaintitle = 'hello world'
const key = CryptoJS.enc.Utf8.parse('1234567890123456')
const hmac = CryptoJS.HmacSHA256(plaintitle , key).toString()
console.log(hmac)  // "f7e329a7c587374e4ed7c80b5be95c9a5997c84da20f5aaede26327bd2b705d8"

计算MD5哈希值

在使用toString()方法将其转换为字符串类型时,传入了CryptoJS.enc.Hex参数,表示转换为十六进制字符串格式。

var hash = CryptoJS.MD5("Message");
console.log(hash.toString(CryptoJS.enc.Hex)); // 输出16进制格式的md5哈希值

记录一些常用的加密方式

base64转码和解码

 let str = 'ImGod';
 let str64 = window.btoa(str);
console.log('转化后:'+str64);//SW1HB2Q=
let jm = window.atob(str64);
console.log('解码后:'+jm);//ImGod

js编码

encodeURIComponent会将特殊字符(除字母、数字、标点符号和某些保留字符外的所有字符)转换为UTF-8编码格式,再转换为16进制值。

decodeURIComponent是JavaScript内置函数,用于将使用encodeURIComponent函数编码的字符串进行解码。

const text = '阿拉斯加'
const encodedText = encodeURIComponent(text)
console.log(encodedText,'url编码');

const textTitle = decodeURIComponent(encodedText)
console.log(textTitle,'url解码');

总结

到此这篇关于前端如何利用CryptoJS实现数据信息加密的文章就介绍到这了,更多相关CryptoJS实现数据信息加密内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章