在前端对 Cookie 进行加密时，你可以使用加密算法对 Cookie 的值进行加密，然后再将加密后的值存储到 Cookie 中。常用的加密算法包括对称加密算法（如 AES）和非对称加密算法（如 RSA）。
以下是一个简单的示例，演示如何在前端使用 AES 对 Cookie 进行加密：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | // 引入加密库import CryptoJS from 'crypto-js';// 加密密钥const encryptionKey = 'yourEncryptionKey';// 加密函数function encryptCookie(value) {const encryptedValue = CryptoJS.AES.encrypt(value, encryptionKey).toString();return encryptedValue;}// 解密函数function decryptCookie(encryptedValue) {const decryptedValue = CryptoJS.AES.decrypt(encryptedValue, encryptionKey).toString(CryptoJS.enc.Utf8);return decryptedValue;}// 设置 Cookie，先加密再存储到 Cookie 中function setEncryptedCookie(key, value) {const encryptedValue = encryptCookie(value);document.cookie = `${key}=${encryptedValue};`;}// 获取 Cookie，先从 Cookie 中取出再解密function getDecryptedCookie(key) {const cookies = document.cookie.split(';');for (let i = 0; i < cookies.length; i++) {const cookie = cookies[i].trim().split('=');if (cookie[0] === key) {const encryptedValue = cookie[1];return decryptCookie(encryptedValue);}}return null;}// 示例用法setEncryptedCookie('myCookie', 'sensitiveData');const decryptedValue = getDecryptedCookie('myCookie');console.log(decryptedValue); // 输出: sensitiveData |
在这个示例中，我们使用了 CryptoJS 库来进行 AES 加密和解密操作。首先定义了一个加密密钥 encryptionKey，然后分别实现了加密函数 encryptCookie 和解密函数 decryptCookie。在设置 Cookie 时，先使用 encryptCookie 加密要存储的值，然后再存储到 Cookie 中；在获取 Cookie 时，先从 Cookie 中取出值，然后再使用 decryptCookie 解密得到原始值。
需要注意的是，尽管使用了加密算法，但由于前端代码可以被用户轻易地查看和修改，因此加密的安全性有限。加密的主要目的是防止明文存储敏感信息，但并不能完全阻止恶意用户篡改或窃取 Cookie。因此，对于敏感信息，仍应该在服务端进行加密和验证。