信誉好的做pc端网站网站建设中的html
1、引言
1.1 前端为何需要加密？
在现代 Web 应用中，前端承担了越来越多的业务逻辑和数据处理任务。用户输入的数据（如密码、手机号、身份证号）往往需要在发送到后端前进行初步加密，以防止中间人攻击（MITM）、日志泄露等问题。
虽然 HTTPS 已成为标配，但仅靠 HTTPS 并不能完全保证数据安全。在某些场景下（如登录密码、支付信息），我们仍需在前端对敏感数据进行加密或签名。
1.2 敏感数据的定义与常见场景
常见的敏感数据包括：
- 用户密码
- 手机号码
- 身份证号
- 银行卡号
- Token / Session ID
- API 请求参数
这些数据在传输或存储过程中都应受到保护。
1.3 前端加密 vs 后端加密：边界与协同
| 维度 | 前端加密 | 后端加密 |
|---|---|---|
| 数据来源 | 客户端生成 | 服务端生成 |
| 安全性保障 | 提高传输层安全性 | 保证最终落地安全 |
| 技术限制 | 受浏览器 API 支持 | 更灵活强大 |
| 协同建议 | 前端加密 + HTTPS + 后端二次加密 |
2、JavaScript 加密基础概念
2.1 加密的基本类型：对称加密 vs 非对称加密
-
对称加密（Symmetric Encryption）
使用同一个密钥进行加密和解密。常见算法：AES、DES、3DES
优点：速快；缺点：密钥管理困难 -
非对称加密（Asymmetric Encryption）
使用公钥加密，私钥解密。常见算法：RSA、ECC
优点：无需共享密钥；缺点：性能较低
2.2 Base64 编码简介与使用场景（非加密）
Base64 不是加密算法，而是一种编码方式，用于将二进制数据转换为 ASCII 字符串，以便在网络上传输。
常见用途：
- 图片转 base64 内嵌在 HTML/CSS 中
- JWT token 编码
- 文件上传前临时编码
⚠️ 注意：Base64 是可逆的，不能用于保密！
2.3 常见加密算法概述
| 算法 | 类型 | 用途 | 是否推荐 |
|---|---|---|---|
| AES | 对称 | 加密/解密数据 | ✅ 推荐 |
| RSA | 非对称 | 密钥交换、数字签名 | ✅ 推荐 |
| SHA-256 | 摘要 | 数据完整性验证 | ✅ 推荐 |
| MD5 | 摘要 | 校验值计算 | ❌ 不推荐用于安全性场景 |
| HMAC-SHA256 | 摘要+密钥 | 签名验证 | ✅ 推荐 |
2.4 浏览器安全模型与同源策略的影响
浏览器中的 JavaScript 运行在沙箱环境中，受同源策略（Same-Origin Policy）限制。这意味着跨域请求无法访问加密结果，除非明确授权。
2.5 Web Crypto API 简介
Web Crypto API 是浏览器内置的一套加密接口，支持 AES、SHA、RSA、PBKDF2 等多种算法，安全性高于第三方库。
3、使用 Base64 编码与解码
3.1 什么是 Base64？它不是加密！
Base64 是一种将任意字节流转换为 ASCII 字符串的方法，常用于在不丢失格式的情况下传输数据。
3.2 JavaScript 中使用 btoa() 和 atob() 进行 Base64 编码/解码
const str = "Hello, World!";
const encoded = btoa(str); // 编码
console.log(encoded); // 输出: SGVsbG8sIFdvcmxkIQ==const decoded = atob(encoded); // 解码
console.log(decoded); // 输出: Hello, World!
⚠️ 注意：btoa() 和 atob() 不支持 Unicode 字符，遇到中文会报错。
3.3 使用 Buffer 或第三方库处理二进制数据（如 js-base64）
使用 base64-js 处理二进制数据：
npm install base64-js
import { fromByteArray, toByteArray } from 'base64-js';const bytes = new TextEncoder().encode("你好，世界");
const base64 = fromByteArray(bytes);
console.log(base64); // 输出: 5bCP5piO77yM5LiA5rO9const decodedBytes = toByteArray(base64);
const text = new TextDecoder().decode(decodedBytes);
console.log(text); // 输出: 你好，世界
3.4 Base64 在图片、文件、Token 传输中的典型应用
示例：将图片转为 Base64
<input type="file" id="fileInput">
<script>
document.getElementById('fileInput').addEventListener('change', function (e) {const file = e.target.files[0];const reader = new FileReader();reader.onload = function () {console.log(reader.result); // data:image/png;base64,iVBORw0KG...};reader.readAsDataURL(file);
});
</script>
3.5 示例代码：将字符串和字节数组转为 Base64 并还原
function stringToBase64(str) {return btoa(unescape(encodeURIComponent(str)));
}function base64ToString(b64) {return decodeURIComponent(escape(atob(b64)));
}const original = "这是一段中文文本";
const encoded = stringToBase64(original);
console.log(encoded); // 输出: 5oiR5piv5paH5rO95rO95Y+k5a6i5qCHconst decoded = base64ToString(encoded);
console.log(decoded); // 输出: 这是一段中文文本
4、使用 Web Crypto API 实现加密
4.1 Web Crypto API 概述与优势
Web Crypto API 是现代浏览器原生支持的一组加密接口，位于 window.crypto 和 window.crypto.subtle 下。它提供了安全、高效的加密能力，无需依赖第三方库。
✅ 优势：
- 安全性高（运行在浏览器内部沙箱中）
- 支持多种加密算法（AES、RSA、SHA、HMAC 等）
- 不依赖外部库，减少体积和潜在漏洞
- 可用于生成密钥、加密/解密、签名/验证等操作
⚠️ 注意：
- 需要 HTTPS 环境（部分功能如 RSA-OAEP 在非 HTTPS 下受限）
- 兼容性良好（主流浏览器均支持）
4.2 使用 AES-GCM 进行对称加密与解密
AES-GCM（Advanced Encryption Standard - Galois/Counter Mode）是一种常用的对称加密模式，具备良好的性能和安全性。
示例：AES-GCM 加密 + Base64 输出
async function encryptAESGCM(key, data) {const encoder = new TextEncoder();const iv = crypto.getRandomValues(new Uint8Array(12)); // 初始化向量const encryptedContent = await crypto.subtle.encrypt({name: "AES-GCM",iv: iv},key,encoder.encode(data));return {iv: Array