html前端的几种加密/解密方式

HTML前端的加密解密方式有以下几种：

一、base64加密

• Base64编码：Base64是一种将二进制数据转换为可打印字符的编码方式。在前端，可以使用JavaScript的btoa()函数进行Base64编码，使用atob()函数进行解码。

1. var str = "hello";
2. var str64 = window.btoa("hello");
3. console.log("定义的字符串为:"+str);
4. console.log("通过base64编码后为:"+str64);
5. console.log("由base64解码后为:"+window.atob(str64));

二、MD5加密(不可逆) 

• MD5散列：MD5是一种广泛使用的散列算法，可以将输入转换为固定长度的散列值。在前端，可以使用JavaScript的CryptoJS库来进行MD5散列，例如使用md5()函数。

1. html使用md5加密

   1. // 引入md5和jquery
   2. <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
   3. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
   5. // 函数加密
   6. <script>
   7. let mq = '741130687291314520'
   8. let pwd = md5(mq);
   9. console.log('加密前的字符串', mq) // 加密前的字符串 741130687291314520
   10. console.log('加密后的字符串', pwd) // 加密后的字符串 8a39c2287dc743a44b2483d504acb0c3
   11. </script>

   

2. MD5作为插件

        MD5.js是通过前台js加密的方式对用户信息，密码等私密信息进行加密处理的工具，也可称为插件。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 标签引入使用

1. var code = "123456";
2. var username = "123456";
3. var message = "123456";
4. var str1 = hex_md5("123456");
5. var str2 = b64_md5("123456");
6. var str3 = str_md5("123456");
7. var str4 = hex_hmac_md5(code,code);
8. var str5 = b64_hmac_md5(username,username);
9. var str6 = str_hmac_md5(message ,message );
10. console.log(str1); // e10adc3949ba59abbe56e057f20f883e
11. console.log(str2); // 4QrcOUm6Wau+VuBX8g+IPg
12. console.log(str3); // áÜ9IºY«¾VàWò��>
13. console.log(str4); // 30ce71a73bdd908c3955a90e8f7429ef
14. console.log(str5); // MM5xpzvdkIw5VakOj3Qp7w
15. console.log(str6); // 0Îq§;Ý��9U©��t)ï

三、编码和解码字符串

        使用JS函数的escape()和unescape()，分别是编码和解码字符串

1. var escape1 =escape("我的名字是：mosquito~");//编码
2. console.log(escape1);
3. var unescape1 = unescape(escape1); //解码
4. console.log(unescape1);

四、AES/DES加密解密 

  1. AES加密：

        AES（Advanced Encryption Standard）是一种对称加密算法，可以将数据进行加密，并使用相同的密钥进行解密。在前端，可以使用JavaScript的CryptoJS库来进行AES加密解密，例如使用AES.encrypt()和AES.decrypt()函数。

  2.  RSA加密：

        RSA是一种非对称加密算法，可以使用公钥对数据进行加密，然后使用私钥进行解密。在前端，可以使用JavaScript的CryptoJS库结合其他库（如RSAKey）来进行RSA加密解密。

下载crypto-js.js 引入使用

1. // 引入库
2. <script src="https://cdn.bootcss.com/crypto-js/3.1.9-1/crypto-js.min.js"></script>
4. // 使用
5. <script>
6. var aseKey = "12345678" //秘钥必须为：8/16/32位
7. var message = "741130687291314520";
9. //加密
10. var encrypt = CryptoJS.AES.encrypt(message, CryptoJS.enc.Utf8.parse(aseKey), {
11. mode: CryptoJS.mode.ECB,
12. padding: CryptoJS.pad.Pkcs7
13. }).toString();
14. console.log('加密',encrypt); //VKrZlqykem73x8/T2oCfCQ==
16. //解密
17. var decrypt = CryptoJS.AES.decrypt(encrypt, CryptoJS.enc.Utf8.parse(aseKey), {
18. mode: CryptoJS.mode.ECB,
19. padding: CryptoJS.pad.Pkcs7
20. }).toString(CryptoJS.enc.Utf8);
21. console.log('解密',decrypt); //80018000142
22. //【注】：加密的时候必须转成字符串 使用toString。 解密的时候 必须使用utf8的格式
24. </script>

        这些加密解密方式在前端通常用于保护敏感数据，如用户密码、用户身份验证等。需要注意的是，前端加密解密只能提供一定程度上的安全性，真正的安全仍然依赖于后端的处理和保护。