CryptoJS 是一个常用的前端加密库,支持多种数据格式的转换和编码操作。以下是其核心的 格式转换方法 及使用场景:


一、CryptoJS 支持的核心编码格式

CryptoJS 通过 enc 模块提供以下编码器:

编码格式 描述 典型应用场景
Hex 十六进制字符串 哈希值展示、二进制数据可视化
Base64 Base64 编码字符串 传输二进制数据(如图片、文件)
Utf8 UTF-8 字符串 处理普通文本输入/输出
Latin1 ISO-8859-1 字符串 处理旧系统兼容的文本
Utf16 UTF-16 字符串 处理特殊字符集
ArrayBuffer JavaScript ArrayBuffer 与浏览器原生 API 交互

二、基础格式转换方法

1. 字符串 ↔ 字节数组(WordArray)

CryptoJS 的核心数据结构是 WordArray,所有加密操作均基于此。

// 字符串 → WordArray
const wordArray = CryptoJS.enc.Utf8.parse("Hello World");

// WordArray → 字符串
const str = CryptoJS.enc.Utf8.stringify(wordArray);
2. Hex 编码转换
// WordArray → Hex字符串
const hexStr = CryptoJS.enc.Hex.stringify(wordArray);

// Hex字符串 → WordArray
const hexToWord = CryptoJS.enc.Hex.parse("48656c6c6f20576f726c64");
3. Base64 编码转换
// WordArray → Base64
const base64Str = CryptoJS.enc.Base64.stringify(wordArray);

// Base64 → WordArray
const base64ToWord = CryptoJS.enc.Base64.parse("SGVsbG8gV29ybGQ=");
4. Latin1 编码转换
// WordArray → Latin1字符串
const latinStr = CryptoJS.enc.Latin1.stringify(wordArray);

// Latin1字符串 → WordArray
const latinToWord = CryptoJS.enc.Latin1.parse("Hello World");

三、高级格式转换场景

场景1:加密后的数据转换
// AES加密后转Base64
const encrypted = CryptoJS.AES.encrypt(
  "secret message", 
  "password123"
);
const base64Cipher = encrypted.toString(); // 默认Base64格式

// 从Base64解析密文
const ciphertext = CryptoJS.enc.Base64.parse(base64Cipher);
场景2:HMAC 签名转Hex
const signature = CryptoJS.HmacSHA256("data", "key");
const hexSignature = signature.toString(CryptoJS.enc.Hex);
场景3:处理ArrayBuffer
// ArrayBuffer → WordArray
const arrayBuffer = new Uint8Array([72, 101, 108, 108, 111]).buffer;
const wordArray = CryptoJS.lib.WordArray.create(arrayBuffer);

// WordArray → ArrayBuffer
const newBuffer = wordArrayToArrayBuffer(wordArray);

function wordArrayToArrayBuffer(wordArray) {
  const words = wordArray.words;
  const buffer = new ArrayBuffer(words.length * 4);
  new Uint32Array(buffer).set(words);
  return buffer;
}

四、编码转换对照表

操作类型 方法 示例
字符串 → 编码格式 CryptoJS.enc.XX.parse(str) CryptoJS.enc.Utf8.parse("text")
编码格式 → 字符串 CryptoJS.enc.XX.stringify(wordArray) CryptoJS.enc.Hex.stringify(words)
跨编码直接转换 先转WordArray再转目标格式 Base64 → Hex(见下方示例)

五、跨编码转换示例

示例1:Base64 → Hex
const base64Str = "SGVsbG8=";
const wordArray = CryptoJS.enc.Base64.parse(base64Str);
const hexStr = CryptoJS.enc.Hex.stringify(wordArray); // "48656c6c6f"
示例2:Hex → UTF-8字符串
const hexStr = "48656c6c6f20576f726c64";
const wordArray = CryptoJS.enc.Hex.parse(hexStr);
const utf8Str = CryptoJS.enc.Utf8.stringify(wordArray); // "Hello World"

六、注意事项

  1. 编码一致性:加解密时需确保编解码方式一致,否则会导致数据损坏

    // 错误示例:加密用Utf8,解密用Hex
    const encrypted = CryptoJS.AES.encrypt("data", "key"); // 默认Utf8
    const decrypted = CryptoJS.AES.decrypt(encrypted, "key", { 
      format: CryptoJS.format.Hex // 错误!应与加密时一致
    });
    
  2. 二进制安全Latin1 可能丢失信息,优先使用 Utf8Base64

  3. 性能优化:大文件转换建议使用 ArrayBuffer 分块处理


七、完整工具函数

/**
 * 通用编码转换工具
 * @param {string} input - 输入数据
 * @param {string} from - 源编码 (hex/base64/utf8/latin1)
 * @param {string} to - 目标编码 (hex/base64/utf8/latin1)
 */
function convertEncoding(input, from, to) {
  const parsers = {
    hex: CryptoJS.enc.Hex,
    base64: CryptoJS.enc.Base64,
    utf8: CryptoJS.enc.Utf8,
    latin1: CryptoJS.enc.Latin1
  };

  const wordArray = parsers[from].parse(input);
  return parsers[to].stringify(wordArray);
}

// 使用示例
const base64ToHex = convertEncoding("SGVsbG8=", "base64", "hex"); // "48656c6c6f"

通过掌握这些转换方法,可以灵活处理前端加密场景中的数据格式问题。

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐