CryptoJS：JavaScript数据加密的安全利器

时间：2026-05-30 13:25:01 编辑：袖梨来源：一聚教程网

前言

在现代Web开发中，数据安全传输面临诸多挑战。即便采用HTTPS协议，前端敏感信息仍可能被篡改或窃取。本文将详细介绍如何通过CryptoJS在前端实现数据加密，为安全防护增加关键保护层。

一、CryptoJS 快速入门

1.1 CryptoJS 是什么

随着前端安全需求日益增长，加密技术成为保护数据的重要手段。crypto-js作为强大的JavaScript加密库，支持AES、DES、MD5等多种算法，帮助开发者轻松实现数据加密解密操作。

1.2 主要功能概览

CryptoJS提供纯JavaScript实现的常用加密算法模块。由于不依赖Node内置模块且体积小巧，特别适合浏览器环境下的数据加密、签名和哈希操作。

1.3 在 Vue 中安装并引入

安装 CryptoJS

通过npm在Vue项目中安装crypto-js：

npm install crypto-js --save-dev# # 安装核心库与类型声明
npm install @types/crypto-js --save-dev

在组件中引入 CryptoJS

在需要加密的Vue组件中引入模块：

import CryptoJS from 'crypto-js';

引入后即可使用CryptoJS对象提供的各种加密算法。

1.4 CryptoJS 加密模式

CryptoJS支持多种加密模式，每种模式都有特定用途和安全性：

加密模式	简要说明
ECB	独立加密每个明文块，安全性较低，不推荐生产使用
CBC	最常用的AES模式，需要IV参数，适用于大多数安全场景
CFB	提供与CBC相似的安全性但实现更复杂
OFB	基于IV和密钥流生成器，实现较CFB更简单
CTR	使用计数器生成密钥流，支持并行处理
GCM	提供认证加密功能，推荐用于TLS等场景

二、编码转换

CryptoJS提供完整的编码转换体系，支持Base64、Hex、UTF-8等常用编码方式。

2.1 UTF-8、UTF-16

支持多语言文本加密解密：

// 字符串转换为WordArray
const wordArray = CryptoJS.enc.Utf8.parse("Hello 世界");
console.log("WordArray:", wordArray.toString());
 
// WordArray转换回字符串
const originalString = CryptoJS.enc.Utf8.stringify(wordArray);
console.log("Original String:", originalString);

2.2 Base64编解码

广泛应用于数据加密和文件传输：

方法	参数	返回值	说明
CryptoJS.enc.Utf8.parse()	字符串	WordArray	将字符串转换为WordArray格式
CryptoJS.enc.Base64.stringify()	WordArray	Base64字符串	执行Base64编码
CryptoJS.enc.Base64.parse()	Base64字符串	WordArray	解析Base64字符串
toString()	编码类型	字符串	将WordArray转换为指定编码的字符串

// 待编码的字符串
const originalText = "Hello World";// 字符串转 WordArray
const wordArray = CryptoJS.enc.Utf8.parse(originalText);// Base64 编码（解决特殊字符传输问题）
const base64Encoded = CryptoJS.enc.Base64.stringify(wordArray);
console.log("Base64 编码:", base64Encoded);const parsedWordArray = CryptoJS.enc.Base64.parse(base64Encoded);
// Base64 解码
const base64Decoded = parsedWordArray.toString(CryptoJS.enc.Utf8);
console.log("Base64 解码:", base64Decoded);

2.3 Hex

十六进制编码在密码学中至关重要：

const message = "Hello World";// Hex 编码
const hexEncoded = CryptoJS.enc.Hex.stringify(CryptoJS.enc.Utf8.parse(message));
console.log("Hex 编码:", hexEncoded);// Hex 解码
const hexDecoded = CryptoJS.enc.Hex.parse(hexEncoded).toString(CryptoJS.enc.Utf8);
console.log("Hex 解码:", hexDecoded);

三、哈希算法

哈希函数生成数据"数字指纹"，用于密码存储和数据完整性校验。

3.1 MD5 加密

产生128位不可逆散列值：

特点	简要说明
压缩性	任意长度消息压缩成128位摘要
容易计算	适合大量数据哈希计算
抗修改性	原始数据修改导致哈希值变化
抗碰撞性	不同数据哈希值相同概率极小

const message = 'Hello, World!';
const encrypted = CryptoJS.MD5(message).toString();
console.log("MD5:", encrypted);

3.2 SHA-1 加密

160位摘要算法：

特点	简要说明
压缩性	任意长度消息压缩成160位摘要
容易计算	适合大量数据哈希计算
抗修改性	原始数据修改导致哈希值变化
抗碰撞性	不同数据哈希值相同概率极小

const wordArray = CryptoJS.enc.Utf8.parse('Hello World');
console.log("SHA1:", CryptoJS.SHA1(message).toString());

3.3 SHA-2 加密

SHA-256

256位摘要算法：

特点	简要说明
压缩性	任意长度消息压缩成256位摘要
容易计算	适合大量数据哈希计算
抗修改性	原始数据修改导致哈希值变化
抗碰撞性	不同数据哈希值相同概率极小

const message = "Hello World";
console.log("SHA3:", CryptoJS.SHA3(message).toString());

SHA-512

512位摘要算法：

特点	简要说明
压缩性	任意长度消息压缩成512位摘要
容易计算	适合大量数据哈希计算
抗修改性	原始数据修改导致哈希值变化
抗碰撞性	不同数据哈希值相同概率极小

const message = "Hello World";
console.log("SHA512:", CryptoJS.SHA512(message).toString());

3.4 SHA-3 加密

最新一代哈希标准：

特点	简要说明
压缩性	任意长度消息压缩成固定长度摘要
容易计算	适合大量数据哈希计算
抗修改性	原始数据修改导致哈希值变化
抗碰撞性	不同数据哈希值相同概率极小

const message = "Hello World";
console.log("SHA512:", CryptoJS.SHA512(message).toString());

四、对称加密算法

对称加密使用相同密钥进行加解密，适合大量数据加密处理。

4.1 AES加密解密的实现

推荐使用AES-256-CBC模式：

特点	简要说明
安全性高	固定长度密钥有效防止破解
灵活性强	支持128/192/256位密钥
计算速度快	适合大量数据加密解密

// 加密
const ciphertext = CryptoJS.AES.encrypt("要加密的敏感数据", "自定义密钥").toString();// 解密
const bytes = CryptoJS.AES.decrypt(ciphertext, "自定义密钥");
const plaintext = bytes.toString(CryptoJS.enc.Utf8);

密钥和偏移量的设置

密钥(key)和初始向量(iv)是关键参数：

key是对称加密核心参数，长度可为128/192/256位
iv增加加密强度，每次加密都会改变

// 密钥
const secretKey = CryptoJS.enc.Utf8.parse("12345678901234567890123456789012");
// 偏移量
const secretIv = CryptoJS.enc.Utf8.parse("abcdefghijklmnop");

加密解密函数封装

封装AES加密解密函数：

/**
 * AES-256-CBC加密
 */
export const encryptAES = (originalText: any, secretKey: string, secretIv: string): string => {
    const key = CryptoJS.enc.Utf8.parse(secretKey);
    const iv = CryptoJS.enc.Utf8.parse(secretIv);
    const dataStr = typeof originalText === 'string' ? originalText : JSON.stringify(originalText);
    const encrypted = CryptoJS.AES.encrypt(dataStr, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    return encrypted.toString();
}

/**
 * AES-256-CBC解密
 */
export const decryptAES = (cipherText: string, secretKey: string, secretIv: string): any => {
    const key = CryptoJS.enc.Utf8.parse(secretKey);
    const iv = CryptoJS.enc.Utf8.parse(secretIv);
    const decrypted = CryptoJS.AES.decrypt(cipherText, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
    });
    const decryptedStr = decrypted.toString(CryptoJS.enc.Utf8);
    try {
        return JSON.parse(decryptedStr);
    } catch {
        return decryptedStr;
    }
}

Java 加解密基础

Java中加解密API集中在javax.crypto包：

核心类	简要说明
Cipher	加解密核心类，指定算法/模式/填充方式
SecretKeySpec	将字节数组转换成对称密钥
IvParameterSpec	封装初始化向量
Base64	Java8内置编解码类

public static String decryptAES(String base64CipherText, String aesKey, String aesIv) {
    byte[] cipherBytes = Base64.getDecoder().decode(base64CipherText);
    byte[] keyBytes = aesKey.getBytes(StandardCharsets.UTF_8);
    byte[] ivBytes = aesIv.getBytes(StandardCharsets.UTF_8);
    SecretKeySpec keySpec = new SecretKeySpec(keyBytes, "AES");
    IvParameterSpec ivSpec = new IvParameterSpec(ivBytes);
    Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
    cipher.init(Cipher.DECRYPT_MODE, keySpec, ivSpec);
    byte[] plainBytes = cipher.doFinal(cipherBytes);
    return new String(plainBytes, StandardCharsets.UTF_8);
}

4.2 3DES加解密

DES算法的增强版本：

特点	简要说明
安全性较高	使用三个不同密钥
灵活性较差	只能使用168位密钥
计算速度较慢	适合数据加密解密

3DES加密的基本用法

export const encrypt3DES = (originalText: string, publicKey: string, secretIv: string, mode: string) => {
  const options = {
    mode: mode === 'ECB' ? CryptoJS.mode.ECB : CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  }
  if (secretIv) {
    options.iv = CryptoJS.enc.Utf8.parse(secretIv)
  }
  const encryptData = CryptoJS.TripleDES.encrypt(originalText, publicKey, options)
  return encryptData.toString()
}

3DES解密的基本用法

export const decrypt3DES = (ciphertext: string, publicKey: string, secretIv: string, mode: string) => {
  const options = {
    mode: mode === 'ECB' ? CryptoJS.mode.ECB : CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  }
  if (secretIv) {
    options.iv = CryptoJS.enc.Utf8.parse(secretIv)
  }
  const encryptData = CryptoJS.TripleDES.decrypt(ciphertext, publicKey, options)
  return encryptData.toString(CryptoJS.enc.Utf8)
}

                        
                            相关文章
                        
                        
                            
                                                                                        
                                                                                                
                                        中通快递单号怎么查询
                                        06-04
                                    
                                                                    
                                        小红书笔记图片加载失败怎么办
                                        06-04
                                    
                                                                    
                                        哔哩哔哩怎么取消关注自动回复
                                        06-04
                                    
                                                                    
                                        如何进入Bilibili网站首页
                                        06-04
                                    
                                                                    
                                        高校超星平台登录入口在哪
                                        06-04
                                    
                                                                    
                                        乐读小说app如何清理缓存
                                        06-04

推荐专题

最新下载

热门教程