HTML前端的加密解密方式有以下幾種：

一、base64加密

• Base64編碼：Base64是一種將二進(jìn)制數(shù)據(jù)轉(zhuǎn)換為可打印字符的編碼方式。在前端，可以使用JavaScript的btoa()函數(shù)進(jìn)行Base64編碼，使用atob()函數(shù)進(jìn)行解碼。

var str = "hello";
var str64 = window.btoa("hello");
console.log("定義的字符串為:"+str);
console.log("通過base64編碼后為:"+str64);
console.log("由base64解碼后為:"+window.atob(str64));

二、MD5加密(不可逆)?

• MD5散列：MD5是一種廣泛使用的散列算法，可以將輸入轉(zhuǎn)換為固定長(zhǎng)度的散列值。在前端，可以使用JavaScript的CryptoJS庫來進(jìn)行MD5散列，例如使用md5()函數(shù)。

1. html使用md5加密

   // 引入md5和jquery
   <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
   
   // 函數(shù)加密
   <script>
      let mq = '741130687291314520'
      let pwd = md5(mq);
      console.log('加密前的字符串', mq)   // 加密前的字符串 741130687291314520
      console.log('加密后的字符串', pwd)  // 加密后的字符串 8a39c2287dc743a44b2483d504acb0c3
   </script>

   

2. MD5作為插件

????????MD5.js是通過前臺(tái)js加密的方式對(duì)用戶信息，密碼等私密信息進(jìn)行加密處理的工具，也可稱為插件。MD5共有6種加密方法：

• ?hex_md5(value)
• b64_md5(value)
• ?str_md5(value)
• ?hex_hmac_md5(key, data)
• ?b64_hmac_md5(key, data)
• str_hmac_md5(key, data)

下載好了用script 標(biāo)簽引入使用

var code = "123456";
var username = "123456";
var message = "123456";
var str1 = hex_md5("123456");
var str2 = b64_md5("123456");
var str3 = str_md5("123456");
var str4 = hex_hmac_md5(code,code);
var str5 = b64_hmac_md5(username,username);
var str6 = str_hmac_md5(message ,message );
console.log(str1); // e10adc3949ba59abbe56e057f20f883e
console.log(str2); // 4QrcOUm6Wau+VuBX8g+IPg
console.log(str3); // áü9IoY??VàWò??>
console.log(str4); // 30ce71a73bdd908c3955a90e8f7429ef
console.log(str5); // MM5xpzvdkIw5VakOj3Qp7w
console.log(str6); // 0?q§;Y??9U???t)?

三、編碼和解碼字符串

????????使用JS函數(shù)的escape()和unescape()，分別是編碼和解碼字符串

var escape1 =escape("我的名字是：mosquito~");//編碼
console.log(escape1);
var unescape1 = unescape(escape1); //解碼
console.log(unescape1);

四、AES/DES加密解密?

? 1. AES加密：

????????AES（Advanced Encryption Standard）是一種對(duì)稱加密算法，可以將數(shù)據(jù)進(jìn)行加密，并使用相同的密鑰進(jìn)行解密。在前端，可以使用JavaScript的CryptoJS庫來進(jìn)行AES加密解密，例如使用AES.encrypt()和AES.decrypt()函數(shù)。

? 2.? RSA加密：

????????RSA是一種非對(duì)稱加密算法，可以使用公鑰對(duì)數(shù)據(jù)進(jìn)行加密，然后使用私鑰進(jìn)行解密。在前端，可以使用JavaScript的CryptoJS庫結(jié)合其他庫（如RSAKey）來進(jìn)行RSA加密解密。

下載crypto-js.js 引入使用

// 引入庫
<script src="https://cdn.bootcss.com/crypto-js/3.1.9-1/crypto-js.min.js"></script>

// 使用
<script>
    var aseKey = "12345678" //秘鑰必須為：8/16/32位
    var message = "741130687291314520";

    //加密
    var encrypt = CryptoJS.AES.encrypt(message, CryptoJS.enc.Utf8.parse(aseKey), {
         mode: CryptoJS.mode.ECB,
          padding: CryptoJS.pad.Pkcs7
    }).toString();
    console.log('加密',encrypt); //VKrZlqykem73x8/T2oCfCQ==

     //解密
    var decrypt = CryptoJS.AES.decrypt(encrypt, CryptoJS.enc.Utf8.parse(aseKey), {
            mode: CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7
    }).toString(CryptoJS.enc.Utf8);
    console.log('解密',decrypt); //80018000142
    //【注】：加密的時(shí)候必須轉(zhuǎn)成字符串 使用toString。 解密的時(shí)候 必須使用utf8的格式

</script>

????????這些加密解密方式在前端通常用于保護(hù)敏感數(shù)據(jù)，如用戶密碼、用戶身份驗(yàn)證等。需要注意的是，前端加密解密只能提供一定程度上的安全性，真正的安全仍然依賴于后端的處理和保護(hù)。文章來源地址http://www.zghlxwxcb.cn/news/detail-845297.html

到了這里，關(guān)于html前端的幾種加密/解密方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！