登录CryptoJS：数据安全的JavaScript加密利器
前言
在传统的客户端-服务器交互中，用户在前端输入的敏感信息（如用户名、密码、信用卡号等）通常会以明文通过 HTTPS 提交到后台，即便在 HTTPS 保护下，仍有安全隐患。如果用户的浏览器或网络受到攻击，可能篡改或窃取表单数据，甚至被浏览器插件劫持。而且如果后端在日志中意外记录了明文敏感信息，可能存在泄露风险。因此，在前端对敏感数据进行加密，并在后端对其解密，能够为安全防护增加一道“保险层”，即便数据在传输层被截获，也难以被攻击者直接获取明文。
一、CryptoJS 快速入门
1.1 CryptoJS 是什么
随着前端技术的不断发展，安全性问题越来越受到重视。在这样的背景下，加密技术成为了保护数据安全的重要手段。crypto-js 是一个功能强大的 JavaScript 加密库，它提供了多种加密算法，包括AES、DES、MD5等。这些算法可以帮助开发者轻松地实现数据的加密和解密操作，从而保护敏感数据的安全性。
⚠️ CryptoJS 作为一个成熟的 JavaScript 加密库，虽然官方已停止维护，但其稳定性和丰富的功能使其仍然是许多项目的可靠选择。通过合理的使用和配置，可以在项目中构建强大的安全防护体系。
CryptoJS 官方文档：cryptojs.gitbook.io/
1.2 主要功能概览
CryptoJS 是一套纯 JavaScript 实现的常用加密算法库，包含以下常见模块：
graph TD
A[输入数据]
A-->B{加密类型}
B-->C1[哈希算法]
B-->C2[对称加密]
B-->C3[编解码]
C1-->D1["MD5/SHA1/SHA256"]
C2-->D2["AES/DES/Rabbit"]
C3-->D3["Base64/Hex"]
D1-->E1[输出哈希值]
D2-->E2[输出密文]
D3-->E3[输出编码结果]
style B fill:#FFA500,stroke:#333,stroke-width:2px;
由于 CryptoJS 纯前端可用，不依赖于 Node 内置模块，体积较小、使用方便，常用于浏览器环境的数据加密、签名和哈希操作。
1.3 在 Vue 中安装并引入
安装 CryptoJS
要在 Vue 项目中使用 crypto-js，首先需要通过 npm 将其安装到项目中。打开终端，进入项目目录，执行以下命令：
npm install crypto-js --save-dev
# # 安装核心库与类型声明
npm install @types/crypto-js --save-dev
⚠️ crypto-js 4.x 版本依赖原生 crypto 模块，不支持IE10及以下浏览器。如需支持旧浏览器，建议使用 3.x 版本
在组件中引入 CryptoJS
在需要进行加密操作的 Vue 组件中，引入相关模块。
import CryptoJS from 'crypto-js';
引入后，我们就能得到 CryptoJS 这个对象，它包含了各种各样的加密算法。
1.4 CryptoJS 加密模式
在 CryptoJS 中，加密模式指的是在加密过程中使用的特定算法模式。这些模式决定了如何组织和处理明文和密钥，以及如何生成密文。CryptoJS 支持多种加密模式，每种模式都有其特定的用途和安全性。以下是一些常见的加密模式：
| 加密模式 | 简要说明 |
|---|---|
| ECB | 将明文分割成独立的块，然后使用相同的密钥对每个块进行独立加密。 安全性较低，因为相同的明文块会产生相同的密文块，在实际生产中不推荐使用 |
| CBC | 最常用的 AES 模式，通常用于加密较长的数据。 它需要 IV（初始化向量），并且每个数据块的加密依赖于前一个数据块 广泛使用，适用于大多数需要一定安全性的应用。 |
| CFB | 提供与CBC相似的安全性，但实现起来可能更复杂 |
| OFB | 使用一个初始向量（IV）和一个密钥流生成器。 密钥流生成器基于密钥和一系列迭代产生的输出。 提供与CFB相似的安全性，但实现上更简单 |
| CTR | 使用一个计数器来生成密钥流。 每个块的加密都是独立的，与前一个块无关。 提供高强度的安全性，并且易于实现并行处理 |
| GCM | 结合了计数器模式和Galois乘法的认证加密模式。 提供认证加密功能，即同时保证数据的机密性和完整性。 是目前推荐用于需要同时保证数据安全和完整性的应用（如TLS） |
二、编码转换
在 CryptoJS 中，编码转换是加密操作的基础环节，它负责在不同数据表示形式之间进行转换。CryptoJS 提供了完整的编码器体系，其中Base64、Hex、UTF-8、UTF-16是最常用的编码方式。
2.1 UTF-8、UTF-16
在现代 Web 开发和密码学应用中，字符编码处理是至关重要的基础环节。CryptoJS 提供了强大的 UTF-8 和 UTF-16 编码支持，使得我们能够轻松处理多语言文本的加密和解密操作。这些编码器不仅支持基本的 ASCII 字符，还能够正确处理复杂的 Unicode 字符，包括 emoji 表情和特殊符号。
// 字符串转换为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编解码
在Web开发过程中，Base64 编码是用于传输 8bit 字节数据的常见编码方式之一，能够将二进制数据转换为 ASCII 字符序列，广泛应用于数据加密、文件传输和图片处理等场景。CryptoJS 库提供了完整且高效的 Base64 加解密功能，包括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);
⚠️ 需要确保在编码和解码过程中使用相同的编码方式（如UTF-8），以避免出现乱码。虽然 Base64 编码可以用于加密数据的传输，但它本身并不提供加密功能。
2.3 Hex
在密码学和数据安全领域，十六进制（Hex）编码扮演着至关重要的角色。CryptoJS 库中的 CryptoJS.enc.Hex 编码器专门用于处理二进制数据与十六进制字符串之间的转换，这种编码方式在多个关键场景中发挥着不可替代的作用。以下是 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 加密
MD5 是一种广泛使用的散列函数，可以产生出一个128位（16字节）的不可逆的散列值，用于确保信息传输完整一致。它被用于各种安全应用，也通常用于校验文件的完整性。MD5算法具有以下特点：
| 特点 | 简要说明 |
|---|---|
| 压缩性 | 任意长度的消息都可以被压缩成一个128位的摘要 |
| 容易计算 | MD5 算法的计算速度比较快，适用于对大量数据进行哈希计算 |
| 抗修改性 | 对原始数据进行任何修改，都会导致哈希值的变化 |
| 抗碰撞性 | 对不同的原始数据，哈希值相同的概率非常小 |
在CryptoJS中，MD5加密非常简单，以下是 CryptoJS 实现 MD5 算法的示例代码：
const message = 'Hello, World!';
const encrypted = CryptoJS.MD5(message).toString();
// 输出MD5加密后的字符串
console.log("MD5:", encrypted);
上述代码的意思是将字符串“hello world”使用 MD5 算法进行加密，并将结果以字符串的形式输出到控制台中。需要注意的是，在输出字符串时，需要使用 toString 方法将加密结果转换为字符串，否则将无法正常输出。
传入CryptoJS.MD5 的参数除了字符串外，还可以是 CryptoJS 定义的一种叫做 WordArray 的数据类型。比如：
const wordArray = CryptoJS.enc.Utf8.parse('Hello World');
CryptoJS.MD5(wordArray).toString();
⚠️ 虽然 MD5 计算速度快，但已被证实存在安全隐患，仅建议用于非安全场景的本地文件校验。
3.2 SHA-1 加密
SHA1 是一种常用的哈希算法，用于将任意长度的消息压缩成一个160位的摘要。SHA1算法具有以下特点：
| 特点 | 简要说明 |
|---|---|
| 压缩性 | 任意长度的消息都可以被压缩成一个160位的摘要 |
| 容易计算 | SHA1 算法的计算速度比较快，适用于对大量数据进行哈希计算 |
| 抗修改性 | 对原始数据进行任何修改，都会导致哈希值的变化 |
| 抗碰撞性 | 对不同的原始数据，哈希值相同的概率非常小 |
以下是 CryptoJS 实现 SHA1 算法的示例代码：
const wordArray = CryptoJS.enc.Utf8.parse('Hello World');
console.log("SHA1:", CryptoJS.SHA1(message).toString());
3.3 SHA-2 加密
SHA-224、SHA-256、SHA-384和SHA-512合称为SHA-2，虽然 SHA-2 提供了更好的安全性，但是它的应用不如 SHA-1 广泛，通常用于数据签名和身份验证等场合。
SHA-256
SHA256 是一种比较常见的哈希算法，它是一种单向加密算法，不提供解密方法，用于将任意长度的消息压缩成一个256位的摘要。SHA256算法具有以下特点：
| 特点 | 简要说明 |
|---|---|
| 压缩性 | 任意长度的消息都可以被压缩成一个256位的摘要 |
| 容易计算 | SHA256 算法的计算速度比较快，适用于对大量数据进行哈希计算 |
| 抗修改性 | 对原始数据进行任何修改，都会导致哈希值的变化 |
| 抗碰撞性 | 对不同的原始数据，哈希值相同的概率非常小 |
以下是 CryptoJS 实现 SHA3 算法的示例代码：
const message = "Hello World";
console.log("SHA3:", CryptoJS.SHA3(message).toString());
SHA-512
SHA3 是一种比较常见的哈希算法，用于将任意长度的消息压缩成一个固定长度的摘要。。SHA256算法具有以下特点：
| 特点 | 简要说明 |
|---|---|
| 压缩性 | 任意长度的消息都可以被压缩成一个固定长度的摘要 |
| 容易计算 | SHA512 算法的计算速度比较快，适用于对大量数据进行哈希计算 |
| 抗修改性 | 对原始数据进行任何修改，都会导致哈希值的变化 |
| 抗碰撞性 | 对不同的原始数据，哈希值相同的概率非常小 |
以下是 CryptoJS 实现 SHA256 算法的示例代码：
const message = "Hello World";
console.log("SHA512:", CryptoJS.SHA512(message).toString());
3.4 SHA-3 加密
SHA512 是一种比较常见的哈希算法，它是一种单向加密算法，不提供解密方法，用于将任意长度的消息压缩成一个 512 位的摘要。SHA256算法具有以下特点：
| 特点 | 简要说明 |
|---|---|
| 压缩性 | 任意长度的消息都可以被压缩成一个 512 位的摘要 |
| 容易计算 | SHA512 算法的计算速度比较快，适用于对大量数据进行哈希计算 |
| 抗修改性 | 对原始数据进行任何修改，都会导致哈希值的变化 |
| 抗碰撞性 | 对不同的原始数据，哈希值相同的概率非常小 |
以下是 CryptoJS 实现 SHA256 算法的示例代码：
const message = "Hello World";
console.log("SHA512:", CryptoJS.SHA512(message).toString());
四、对称加密算法
加密是为了保证数据安全传输，使得其他人不能获取的具体信息内容。以某种特殊的算法，将原本信息数据进行改变，使得即使没有权限的人看到消息也不能从中得到任何有用信息，但是加密的信息是保证可逆的，即可加密必可解密（其长度与目标文本成正比）。所谓对称，指的是加密和解密使用的是相同的秘钥，常见的有 DES、3DES、AES等。对称加密主要用于对敏感数据进行加密和解密，确保数据的机密性。其加解密速度快、计算量小，适合对大量数据进行加密处理。
4.1 AES加密解密的实现
AES 是一种常见的对称加密算法，通过相同的密钥进行加密和解密，常用于数据保护和机密信息存储等场合。AES 的出现，是用于取代已经被证明不安全的 DES 算法。AES 或者说对称加密算法的优点是速度快，缺点就是不安全。为了最大程度地兼容性与安全性，我们采用 AES-256-CBC 模式对称加密。AES 算法具有以下特点：
| 特点 | 简要说明 |
|---|---|
| 安全性高 | AES 算法使用固定长度的密钥进行加密和解密，可以有效防止数据被破解 |
| 灵活性强 | AES 算法可以使用多种密钥长度，如128位、192位或256位 |
| 计算速度快 | AES 算法的计算速度比较快，适用于对大量数据进行加密和解密 |
// 加密：数据 → 密钥 → 密文
const ciphertext = CryptoJS.AES.encrypt("要加密的敏感数据", "自定义密钥").toString();
// 解密：密文 → 密钥 → 原始数据
const bytes = CryptoJS.AES.decrypt(ciphertext, "自定义密钥");
const plaintext = bytes.toString(CryptoJS.enc.Utf8);
密钥和偏移量的设置
加密需要一把“钥匙”，这把钥匙就是密钥。另外还有一个叫“偏移量”的东西，它可以帮助我们更好地加密信息。AES 加密需要密钥（Key）和初始向量（IV），这些参数可以自定义，以确保加密解密的正确性。
- key是对称加密算法的核心参数，同一个明文和密钥加密后得到的密文是相同的，因此密钥必须保密并且不易被破解。key的长度可以是128位、192位或256位，不同长度的key对应着不同的安全级别。
- iv是用于增加加密强度的参数，它需要与key一起作为输入参数传递给加密算法。iv的长度为128位，它在每次加密时都会改变，并与key一起参与加密过程。iv的作用是将相同的明文使用不同的iv加密后生成不同的密文，从而增加破解的难度和安全性。
// 密钥
const secretKey = CryptoJS.enc.Utf8.parse("12345678901234567890123456789012");
// 偏移量
const secretIv = CryptoJS.enc.Utf8.parse("abcdefghijklmnop");
⚠️ 注意：生产环境中，密钥（key）和初始向量（iv）强烈建议从后端接口动态获取，与后端开发保持一致，绝对不要硬编码在前端！
加密解密函数封装
我们需要创建一个加密函数来加密信息，这个函数接收一段明文（也就是正常能看懂的文字），然后返回加密后的文字。使用 CryptoJS 的 AES 模块对数据进行加密，使用相同的密钥和配置参数创建解密函数。
/**
* 使用 AES-256-CBC 进行加密
* @param originalText 待加密的数据，支持字符串、对象等
* @param secretKey - 加密密钥
* @param secretIv - 初始向量
* @returns 加密后的 Base64 字符串
*/
export const encryptAES = (originalText: any, secretKey: string, secretIv: string): string => {
if (!originalText) {
return "";
}
const key = CryptoJS.enc.Utf8.parse(secretKey);
const iv = CryptoJS.enc.Utf8.parse(secretIv);
// 统一将数据转为 JSON 字符串
const dataStr = typeof originalText === 'string' ? originalText : JSON.stringify(originalText);
// 使用AES算法进行加密
const encrypted = CryptoJS.AES.encrypt(dataStr, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
// encrypted.toString() 默认返回 Base64 编码
return encrypted.toString();
}
我们还需要一个函数来解密信息，解密的写法和加密差不多，只是把 encrypt 方法名改为 decrypt。这个函数接收加密后的文字，然后返回正常的明文。
/**
* 使用 AES-256-CBC 进行解密
* @param cipherText 加密后的字符串
* @param secretKey - 解密密钥
* @param secretIv - 初始向量
* @returns {any} 解密后的原始数据
*/
export const decryptAES = (cipherText: string, secretKey: string, secretIv: string): any => {
if (!cipherText) {
return "";
}
// 将 Key 与 IV 转成 WordArray
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,
});
// 将解密结果转为 UTF-8 字符串
const decryptedStr = decrypted.toString(CryptoJS.enc.Utf8);
// 尝试还原为 JSON 对象，如果不是对象则直接返回字符串
try {
return JSON.parse(decryptedStr);
} catch {
return decryptedStr;
}
}
⚠️ 如果之前在加密时没有将明文进行 parse 而是直接传入的，那么在解密时，传入 toString() 的解析方式就是写默认的 CryptoJS.enc.Utf8。
既然有了上面的加密和解密函数，现在要在 Vue 项目中使用它们。创建一个简单的 Vue 组件，让用户输入一些信息，然后可以加密和解密。
<script setup lang="ts">
import { ref } from 'vue';
import {decryptAES, encryptAES} from "@/hooks/CryptoJSUtils.ts";
const plaintext = ref('');
const ciphertext = ref('');
const decryptedText = ref('');
// ⚠️ 注意：生产环境中，密钥（key）和初始向量（iv）强烈建议从后端接口动态获取，绝对不要硬编码在前端！
const secretKey = "12345678901234567890123456789012";
const secretIv = "abcdefghijklmnop";
// 加密
const handleEncrypt = () => {
ciphertext.value = encryptAES(plaintext.value, secretKey, secretIv);
}
// 解密
const handleDecrypt = () => {
decryptedText.value = decryptAES(ciphertext.value, secretKey, secretIv);
}
</script>
<template>
<div>
<input type="text" v-model="plaintext" placeholder="请输入明文" />
<button @click="handleEncrypt">加密</button>
<button @click="handleDecrypt">解密</button>
<p>加密后的文本: {{ ciphertext }}</p>
<p>解密后的文本: {{ decryptedText }}</p>
</div>
</template>
Java 加解密基础
Java 中的加解密 API 集中在 javax.crypto 包内，核心类包括：
| 核心类 | 简要说明 |
|---|---|
| Cipher | 加解密的核心类，指定算法、模式、填充方式后，可调用 init、doFinal 进行加密解密 |
| SecretKeySpec | 用来将字节数组转换成对称密钥（SecretKey） |
| IvParameterSpec | 用来封装初始化向量（IV） |
| Base64 | Java 8 内置的 Base64 编解码类 |
如果使用 Spring Boot，可在 pom.xml 中引入 Web 依赖即可，无需额外加密库，因为 JCE 已内置于 JDK。创建一个工具类 EncryptUtils，封装 AES 解密方法：
import javax.crypto.Cipher;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;
import java.nio.charset.StandardCharsets;
import java.util.Base64;
public class EncryptUtils {
// 加密算法
private static String algorithm = "AES";
// 加解密算法/工作模式/填充方式
private static String algorithmProvider = "AES/CBC/PKCS5Padding";
public static String encrypt(String src, String uniqueKey) {
}
/**
* 使用 AES/CBC/PKCS5Padding 对 Base64 编码的密文进行解密
*
* @param base64CipherText 前端加密后的 Base64 密文
* @param aesKey 与前端约定的 32 字节（256 位）Key
* @param aesIv 与前端约定的 16 字节 (128 位) IV
* @return 解密后的明文字符串
*/
public static String decryptAES(String base64CipherText, String aesKey, String aesIv) {
try {
// 1. 将 Base64 密文解码成字节数组
byte[] cipherBytes = Base64.getDecoder().decode(base64CipherText);
// 2. 准备 Key 和 IV
byte[] keyBytes = aesKey.getBytes(StandardCharsets.UTF_8);
byte[] ivBytes = aesIv.getBytes(StandardCharsets.UTF_8);
SecretKeySpec keySpec = new SecretKeySpec(keyBytes, algorithm);
IvParameterSpec ivSpec = new IvParameterSpec(ivBytes);
// 3. 初始化 Cipher
Cipher cipher = Cipher.getInstance(algorithmProvider);
cipher.init(Cipher.DECRYPT_MODE, keySpec, ivSpec);
// 4. 执行解密
byte[] plainBytes = cipher.doFinal(cipherBytes);
// 5. 转为字符串并返回
return new String(plainBytes, StandardCharsets.UTF_8);
} catch (Exception e) {
e.printStackTrace();
return null; // 解密失败返回 null，可根据实际情况抛出异常
}
}
}
⚠️ 注意：Java 默认使用 PKCS5Padding，而 CryptoJS 使用的是 PKCS7Padding。二者在实现上是兼容的，所以无需额外配置即可互通。
4.2 3DES加解密
在现代的互联网时代，数据安全性备受关注。为了保护敏感数据的机密性，对称加密算法是一种常用的方法。3DES（Triple DES）一种常用的对称加密算法，是 DES 加密算法的一种增强版本，通过对数据进行三次DES加密来提高安全性。TripleDES 算法的全称是“三重数据加密标准”，它使用固定长度的密钥对数据进行加密和解密，密钥长度为192位。TripleDES 算法具有以下特点：
| 特点 | 简要说明 |
|---|---|
| 安全性较高 | TripleDES 算法使用三个不同的密钥进行加密和解密，密钥长度较长，安全性较高 |
| 灵活性较差 | TripleDES 算法只能使用168位的密钥长度，不够灵活 |
| 计算速度较慢 | TripleDES 算法的计算速度比较慢，适用于对数据进行加密和解密 |
3DES加密的基本用法
在 CryptoJS 中，3DES 加密需要指定密钥和加密模式。以下是一个简单的 3DES 加密示例：
export const encrypt3DES = (originalText: string, publicKey: string, secretIv: string, mode: string) => {
if (!originalText || !publicKey) {
throw new Error('内容和密钥不能为空');
}
if (publicKey.length !== 8) {
throw new Error('密钥必须为8个字符');
}
const options = {
mode: mode === 'ECB' ? CryptoJS.mode.ECB : CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
}
if (secretIv) {
if (secretIv.length !== 8) {
throw new Error('IV必须为8个字符')
}
options.iv = CryptoJS.enc.Utf8.parse(secretIv)
}
// 执行加密
const encryptData = CryptoJS.TripleDES.encrypt(originalText, publicKey, options)
// 返回 Base64 格式的密文
return encryptData.toString()
}
3DES解密的基本用法
3DES 解密与加密类似，只是调用的是 decrypt 方法：
export const decrypt3DES = (ciphertext: string, publicKey: string, secretIv: string, mode: string) => {
if (!ciphertext || !publicKey) {
throw new Error('密文和密钥不能为空')
}
if (publicKey.length !== 8) {
throw new Error('密钥必须为8个字符')
}
const options = {
mode: mode === 'ECB' ? CryptoJS.mode.ECB : CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
}
if (secretIv) {
if (secretIv.length !== 8) {
throw new Error('IV必须为8个字符')
}
options.iv = CryptoJS.enc.Utf8.parse(secretIv)
}
// 执行解密
const encryptData = CryptoJS.TripleDES.decrypt(ciphertext, publicKey, options)
// 将解密后的数据转换为 UTF-8 字符串
return encryptData.toString(CryptoJS.enc.Utf8)
}
加密解密工具组件
<script setup lang="ts">
import CryptoJS from 'crypto-js';
import { ref} from 'vue';
import {decrypt3DES, encrypt3DES} from "@/hooks/CryptoJSUtils.ts";
const mode=ref('ECB');
const key= ref('12345678');
const iv=ref('');
const plainText= ref('');
const encryptedText= ref('');
const decryptedText= ref('');
/**
* 生成随机密钥
*/
const generateKey = () => {
key.value = CryptoJS.lib.WordArray.random(8).toString();
}
/**
* 加密
*/
const encrypt = () => {
encryptedText.value = encrypt3DES(plainText.value, key.value, iv.value,mode.value)
}
/**
* 解密
*/
const decrypt = () => {
decryptedText.value = decrypt3DES(encryptedText.value, key.value, iv.value,mode.value)
}
</script>
<template>
<div class="container mx-auto p-6 max-w-2xl">
<h1 class="text-2xl font-bold mb-6 text-blue-600">3DES 加密解密工具</h1>
<!-- 加密模式选择 -->
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
<div class="mb-4">
<label class="block text-gray-700 mb-2">加密模式</label>
<select v-model="mode" class="w-full p-2 border rounded">
<option value="ECB">ECB模式</option>
<option value="CBC">CBC模式</option>
</select>
</div>
<!-- 密钥生成 -->
<div class="mb-4">
<label class="block text-gray-700 mb-2">密钥 (8字节)</label>
<div class="flex">
<input v-model="key" type="text" class="flex-1 p-2 border rounded-l" placeholder="输入8位密钥">
<button @click="generateKey" class="bg-blue-500 text-white px-4 rounded-r hover:bg-blue-600">
<i class="fas fa-sync-alt"></i> 生成
</button>
</div>
</div>
<!-- CBC模式IV -->
<div v-if="mode === 'CBC'" class="mb-4">
<label class="block text-gray-700 mb-2">IV偏移量 (8字节)</label>
<input v-model="iv" type="text" class="w-full p-2 border rounded" placeholder="输入8位IV">
</div>
<!-- 文本输入 -->
<div class="mb-4">
<label class="block text-gray-700 mb-2">原始文本</label>
<textarea v-model="plainText" rows="3" class="w-full p-2 border rounded" placeholder="输入要加密的内容"></textarea>
</div>
<!-- 操作按钮 -->
<div class="flex space-x-3 mb-6">
<button @click="encrypt" class="flex-1 bg-green-500 text-white py-2 rounded hover:bg-green-600">
<i class="fas fa-lock"></i> 加密
</button>
<button @click="decrypt" class="flex-1 bg-purple-500 text-white py-2 rounded hover:bg-purple-600">
<i class="fas fa-unlock"></i> 解密
</button>
</div>
<!-- 结果展示 -->
<div class="mb-4">
<label class="block text-gray-700 mb-2">加密结果</label>
<textarea v-model="encryptedText" rows="3" readonly class="w-full p-2 border rounded bg-gray-50"></textarea>
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">解密结果</label>
<textarea v-model="decryptedText" rows="3" readonly class="w-full p-2 border rounded bg-gray-50"></textarea>
</div>
</div>
</div>
</template>
<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');
body {
background-color: #f7fafc;
}
</style>
小结
在 3DES 加密中，加密模式和填充方式的选择会影响加密结果的安全性。常见的加密模式有ECB、CBC等，填充方式有Pkcs7、ZeroPadding等。在实际应用中，应根据具体需求选择合适的加密模式和填充方式。虽然 3DES 比 DES 更安全，但在现代加密标准中，3DES已经逐渐被AES等更安全的算法取代。如果对安全性要求较高，建议使用AES等更现代的加密算法。|
五、HMAC 数据验证
5.1 HMAC加密
对称加密只能保证机密性，即对手无法从密文恢复明文，但并不能保证数据在传输过程中未被篡改。为此，可在密文外层再加一层签名（HMAC）。HMAC 是一种基于密钥的消息认证码算法，用于验证消息在传输过程中是否被篡改，以及确认消息来源的真实性，通常用于消息身份验证、API 签名等。HMAC 算法具有以下特点：
| 特点 | 简要说明 |
|---|---|
| 安全性高 | HMAC 算法使用密钥对原始数据进行加密，可以有效防止数据被篡改 |
| 灵活性强 | HMAC 算法可以使用多种哈希函数，如SHA256、SHA512等 |
| 计算速度快 | HMAC 算法的计算速度比较快，适用于对大量数据进行认证计算 |
以下是 CryptoJS 实现 HMAC 算法的示例代码：
const plaintitle = 'hello world'
const key = CryptoJS.enc.Utf8.parse('1234567890123456')
const hmac = CryptoJS.HmacSHA256(plaintitle , key).toString()
5.2 PBKDF2加密
PBKDF2 是一种常用的密码加密算法，用于将用户密码转换成一个固定长度的密钥。PBKDF2 算法的全称是“基于密码的密钥派生函数”，它通过在用户密码上附加一个随机盐值，然后对附加了盐值的密码进行多次哈希计算，最后将计算结果作为密钥。PBKDF2 算法具有以下特点：
| 特点 | 简要说明 |
|---|---|
| 安全性高 | PBKDF2 算法使用随机盐值和多次哈希计算，可以有效防止密码被破解 |
| 灵活性强 | PBKDF2 算法可以使用多种哈希函数，如SHA256、SHA512等 |
| 计算速度慢 | PBKDF2 算法的计算速度比较慢，适用于对密码进行加密计算 |
PBKDF2 基于伪随机函数（PRF）构建，通过对密码和盐值进行多次迭代计算来增强密钥的安全性。其数学表达式可以表示为：
PBKDF2(password: WordArray | string, salt: WordArray | string, cfg?: KDFOption)
| 配置项 | 简要说明 | |
|---|---|---|
| password | 用户输入的密码 | |
| salt | 随机盐值，确保即使是相同密码产生不同的派生密钥，有效防止预计算攻击 | |
| cfg | ||
| keySize | 密钥大小（以字为单位） | |
| hasher | 使用的哈希算法 | |
| iterations | 迭代次数 |
// 使用默认配置（SHA256, 250000次迭代）
var derivedKey = CryptoJS.PBKDF2("password", "somesalt");
// 自定义配置
var customKey = CryptoJS.PBKDF2("password", "somesalt", {
keySize: 256/32, // 256位密钥
iterations: 1000000, // 100万次迭代
hasher: CryptoJS.algo.SHA512 // 使用SHA512
});
六、总结
CryptoJS 解决的是在不受控的客户端环境中实施可控安全策略的矛盾命题，它无法替代 HTTPS 传输层加密，也不能弥补弱密钥管理、明文密钥硬编码、缺乏服务端二次校验等架构缺陷，其真正价值在于赋能开发者在“最小信任模型”下构建纵深防御。因此，通过合理地引入和使用 crypto-js，我们可以有效地保护前端数据的安全性，为用户提供更加安全、可靠的服务。同时，对crypto-js进行封装可以让我们更好地组织和管理代码，提高开发效率和代码质量。
