前端常用加密方式使用
文章目录
1、Base64 编码
Base64 不是一种加密算法，而是一种编码方法，用于将二进制数据转换为基于 64 个可打印字符的文本字符串。它常用于在 URL、Cookie、网页中传输少量二进制数据，以及内嵌小图片以减少服务器访问次数。
Base64 编码简单，对性能影响不大，但会增加数据体积约 1/3，且无法缓存。
functiontoBase64(str){returnbtoa(unescape(encodeURIComponent(str)));}functionfromBase64(str){returndecodeURIComponent(escape(atob(str)));}// 使用示例const originalText ="Hello, World!";const encodedText =toBase64(originalText); console.log(encodedText);// "SGVsbG8sIFdvcmxkIQ=="const decodedText =fromBase64(encodedText); console.log(decodedText);// "Hello, World!"2、MD5 加密
MD5 是一种广泛使用的哈希函数，产生 128 位（16 字节）的哈希值。虽然 MD5 的计算速度快且效率高，但存在碰撞风险，且安全性较低，因此不推荐直接用于密码存储。
import CryptoJS from"crypto-js";functionmd5Encrypt(str){return CryptoJS.MD5(str).toString();}// 使用示例const originalText ="Hello, World!";const encryptedText =md5Encrypt(originalText); console.log(encryptedText);// "fc3ff98e8c6a0d3087d515c0473f8677"3、SHA-256 加密
HA-256 是 SHA-2 家族中的一种加密哈希算法，生成 256 位的哈希值。它比 MD5 更安全，适用于分布式系统，但加密和解密速度较慢，且密钥生成复杂。
import CryptoJS from"crypto-js";functionsha256Encrypt(str){return CryptoJS.SHA256(str).toString();}// 使用示例const originalText ="Hello, World!";const encryptedText =sha256Encrypt(originalText); console.log(encryptedText);// "a591a6d40bf420404a011733cfb7b190d62c65bf0bcda32b57b277d9ad9f146e"4、AES 对称加密（常用）
AES 是高级加密标准，是一种对称加密算法，使用相同的密钥进行加密和解密。
(1) AES 加密：对称性加密（密钥 1 个，加解密都用这个密钥）
(2) AES 为一次一密，每次加密都会生成新的密钥
(3) AES 加密为了增加报文安全性
AES 加密速度快，适合大数据量加密，但密钥管理复杂，一旦密钥泄露，加密数据的安全性会受到威胁。
import CryptoJS from"crypto-js";functionaesEncrypt(data, key){const keyHex = CryptoJS.enc.Utf8.parse(key);const encrypted = CryptoJS.AES.encrypt(data, keyHex,{mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7 });return encrypted.toString();}functionaesDecrypt(encryptedData, key){const keyHex = CryptoJS.enc.Utf8.parse(key);const decrypted = CryptoJS.AES.decrypt(encryptedData, keyHex,{mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7 });return decrypted.toString(CryptoJS.enc.Utf8);}// 使用示例const key ="1234567890123456";// AES key 必须为16位（AES-128），24位（AES-192），或32位（AES-256）const originalText ="Hello, World!";const encryptedText =aesEncrypt(originalText, key); console.log(encryptedText);// 密文const decryptedText =aesDecrypt(encryptedText, key); console.log(decryptedText);// "Hello, World!"5、RSA 非对称加密（常用）
RSA（Rivest–Shamir–Adleman）是一种非对称加密算法，它使用一对密钥——公钥和私钥来进行加密和解密操作。公钥用于加密数据，而私钥用于解密数据。
密钥对生成网站： http://web.chacuo.net/netrsakeypair
新建 jsencrypt.ts:
import{ JSEncrypt }from"jsencrypt";const publicKey ="MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n"+"nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ==";const privateKey ="MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY\n"+"7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKN\n"+"PuH3owIDAQABAkAfoiLyL+Z4lf4Myxk6xUDgLaWGximj20CUf+5BKKnlrK+Ed8gA\n"+"kM0HqoTt2UZwA5E2MzS4EI2gjfQhz5X28uqxAiEA3wNFxfrCZlSZHb0gn2zDpWow\n"+"cSxQAgiCstxGUoOqlW8CIQDDOerGKH5OmCJ4Z21v+F25WaHYPxCFMvwxpcw99Ecv\n"+"DQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthh\n"+"YhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3\n"+"UP8iWi1Qw0Y=";// 加密exportconstencrypt=(txt: string)=>{const encryptor =newJSEncrypt(); encryptor.setPublicKey(publicKey);// 设置公钥return encryptor.encrypt(txt);// 对数据进行加密};// 解密exportconstdecrypt=(txt: string)=>{const encryptor =newJSEncrypt(); encryptor.setPrivateKey(privateKey);// 设置私钥return encryptor.decrypt(txt);// 对数据进行解密};组件中使用：
<script setup> import { encrypt, decrypt } from "@/utils/jsencrypt"; const text = "Hello, World!"; const encryptedText = encrypt(text); // 加密 console.log("加密后的结果----:", encryptedText); const decryptedText = decrypt(encryptedText); // 解密 console.log("解密后的结果----：", decryptedText); </script> 输出结果：
加密后的结果----: I7J3ay7KpwfGz3bEWDv4vuF1orJPwvctzEbfQhnC/B45mJjIhUWNeMLEzHLItECohMbeS8TLbN3SSBTB6u2JVg== 解密后的结果----： Hello, World!6、什么是对称和非对称加密
对称加密（Symmetric Encryption）：
对称加密使用同一把密钥进行加密和解密。这意味着发送方和接收方都需要知道相同的密钥。
对称加密算法通常速度较快，适合用于大量数据的加密。
非对称加密（Asymmetric Encryption）：
非对称加密使用一对密钥，即公钥和私钥。公钥可以公开发布，用于加密数据；私钥必须保密，用于解密数据。
非对称加密通常比对称加密慢，但由于其安全性更高，常用于密钥交换和身份认证等场景。
7、什么是哈希算法
哈希算法（Hash Function）是把任意长度的输入通过确定的数学变换，映射成固定长度的、看似随机的输出（哈希值 / 摘要 / 指纹）的规则。
1. 核心特征
| 特征 | 解释 | 例子 |
|---|---|---|
| 确定性 | 同一输入永远得到同一输出 | "hello" → 2cf24dba… 每次一样 |
| 定长输出 | 输出长度固定，与输入大小无关 | SHA-256 永远 256 bit |
| 不可逆 | 从输出无法反推输入（单向函数） | 知道 5d41402a… 算不回 "hello" |
| 雪崩效应 | 输入轻微改动，输出天差地别 | "hello" vs "hallo" → 几乎全变 |
| 抗碰撞 | 难以找到两个输入产生同一输出 | 理想状态下几乎不可能 |
2. 常见算法
| 算法 | 输出长度 | 场景 | 状态 |
|---|---|---|---|
| MD5 | 128 bit | 旧校验/分片 | ❌ 已不安全 |
| SHA-1 | 160 bit | Git、老 TLS | ❌ 已不安全 |
| SHA-256 | 256 bit | 区块链、HTTPS、JWT | ✅ 主流 |
| SHA-3 / BLAKE3 | 可变 | 新一代 | ✅ 更安全 |
| MurmurHash | 32/64/128 bit | 哈希表、分片 | ✅ 高性能、非加密 |
3. 前端/网络中的典型用途
- 缓存校验：文件指纹
app.4e5c67.js判断是否重新下载 - 密码存储：
bcrypt(password + salt)保存摘要而不是明文 - 数据结构：JavaScript 对象、
Map、Set内部哈希表 - 分片上传：按文件内容哈希生成
etag秒传/断点续传 - URL 签名：
?sign=SHA256(secret+path+exp)防篡改
4. 不是加密
哈希 ≠ 加密。加密是可逆的（需要密钥），哈希是单向的。
因此“解密哈希”是伪概念；正确说法应是“暴力破解”或“查彩虹表”。
哈希算法是数字世界的指纹机：给任何数据拍一张不可逆、唯一且定长的“指纹照”，用来校验、索引、签名、去重、存密码。
👉点击进入我的网站
