前端加密传输URL参数_前端url加密-优快云博客

本文链接：https://blog.youkuaiyun.com/Android_zhouhong/article/details/119997668

本文探讨了前端页面在传输URL参数时的安全问题，比较了Base64和AES两种加密方式。Base64简单易用但安全性较低，容易被破解；AES加密则提供更高安全级别，但需要引入外部库。文章提供了AES加密解密的代码示例，强调了在实际应用中平衡安全与便捷的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

加密传输URL参数

业务需求：前端页面跳转时携带参数进行加密传输

Base64

btoa() 方法用于创建一个 base-64 编码的字符串。
atob() 方法用于解码使用 base-64 编码的字符串
decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的字符进行解码。


window.encodeURIComponent(window.btoa(123456))
window.atob(window.decodeURIComponent("MTIzNDU2"))

优点：简单易懂，不用下载其他的库，可以直接使用window对象的方法
缺点：很容易被人破解知道原理的人可直接再控制台进行破解

AES加密传输

首先npm下载js库 npm i crypto-js

// 封装两个方法
import CryptoJS from 'crypto-js/crypto-js'
// AES加密解密
 //秘钥
 const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");
 const iv = CryptoJS.enc.Utf8.parse("ABCDEF1234123412");
  //加密
  /*
  * {param} data 加密明文
  * return  str 加密结果
  */
export function encrypt (data) {
	data = data + '' // 需要为字符串
    let srcs = CryptoJS.enc.Utf8.parse(data);
    let encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    return encrypted.ciphertext.toString().toUpperCase();
}
  //解密
  /*
  * {param} data 解密密文
  
  * return  str 解密结果
  */
	export function decrypt (data) {
    let encryptedHexStr = CryptoJS.enc.Hex.parse(data);
    let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    let decrypt = CryptoJS.AES.decrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
}