前端加密解密技术：Base64、哈希与AES实战指南

1. 前端加密解密技术概述

在前端开发中，数据安全始终是需要重点考虑的问题。无论是用户密码的传输、敏感信息的存储，还是API接口的通信保护，都需要用到各种加密解密技术。前端加密虽然不能完全替代后端的安全措施，但作为安全防御的第一道防线，它能有效防止中间人攻击、数据篡改等常见安全问题。

我见过太多项目因为忽视前端加密而导致的安全事故：用户密码明文传输被截获、敏感数据在控制台直接可见、API参数被轻易篡改...这些本可以通过合理使用加密技术避免的问题，往往因为开发者对加密技术了解不足而酿成大错。

前端常用的加密技术主要分为三类：

• 编码类：如Base64，严格来说不算加密算法，但常用于数据编码传输
• 哈希类：如MD5、SHA系列，用于生成不可逆的数据指纹
• 对称加密：如AES，用于可逆的数据加密解密

2. Base64编码的原理与实战应用

2.1 Base64的本质与特点

Base64不是加密算法，而是一种用64个可打印字符表示二进制数据的方法。它常被误认为是加密手段，实际上只是编码转换。Base64编码后的数据量会比原始数据大33%，因为每3个字节（24位）的二进制数据会被转换为4个Base64字符（也是24位，但用ASCII表示）。

为什么前端需要Base64？典型场景包括：

• 在Data URL中嵌入图片等二进制资源
• 在JSON中安全传输二进制数据
• 简单混淆数据（注意：不能用于真正的安全需求）

2.2 前端Base64编码实战

现代浏览器提供了原生Base64编码方法：

javascript复制// 字符串编码
const encoded = btoa('Hello World'); // "SGVsbG8gV29ybGQ="
const decoded = atob(encoded); // "Hello World"

// 二进制数据编码（如图片）
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = n