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

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

一、base64加密

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

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

二、MD5加密(不可逆)

  • MD5散列:MD5是一种广泛使用的散列算法,可以将输入转换为固定长度的散列值。在前端,可以使用JavaScript的CryptoJS库来进行MD5散列,例如使用**md5()**函数。
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>

   // 函数加密
   <script>
      let mq = '741130687291314520'
      let pwd = md5(mq);
      console.log('加密前的字符串', mq)   // 加密前的字符串 741130687291314520
      console.log('加密后的字符串', pwd)  // 加密后的字符串 8a39c2287dc743a44b2483d504acb0c3
   </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 标签引入使用

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); // áÜ9IºY<<¾VàWò��>
console.log(str4); // 30ce71a73bdd908c3955a90e8f7429ef
console.log(str5); // MM5xpzvdkIw5VakOj3Qp7w
console.log(str6); // 0Îq§;Ý��9U©��t)ï

三、编码和解码字符串

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

var escape1 =escape("我的名字是:mosquito~");//编码
console.log(escape1);
var unescape1 = unescape(escape1); //解码
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 引入使用

// 引入库
<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
    //【注】:加密的时候必须转成字符串 使用toString。 解密的时候 必须使用utf8的格式

</script>

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

相关推荐
Mr.Liu621 分钟前
小程序24-滚动效果:scroll-view组件详解
前端·微信小程序·小程序
三金1213837 分钟前
局部使用Vue
前端·javascript·vue.js
LinXunFeng43 分钟前
Flutter - 子部件任意位置观察滚动数据
前端·flutter·开源
好开心331 小时前
js高级06-ajax封装和跨域
开发语言·前端·javascript·ajax·okhttp·ecmascript·交互
小镇程序员1 小时前
vue2 src_Todolist消息订阅版本
前端·javascript·vue.js
Zack No Bug1 小时前
解决报错:rror: error:0308010C:digital envelope routines::unsupported
前端·javascript·vue.js
九幽归墟1 小时前
深入理解 CPU 和 GPU 渲染
前端·浏览器·gpu
QTX187301 小时前
原生JS和CSS,HTML实现开屏弹窗
javascript·css·html
2401_890666131 小时前
(免费送源码)计算机毕业设计原创定制:Java+JSP+HTML+JQUERY+AJAX+MySQL springboot计算机类专业考研学习网站管理系统
java·python·django·flask·node.js·html·课程设计
凌虚2 小时前
Web 端语音对话 AI 示例:使用 Whisper 和 llama.cpp 构建语音聊天机器人
前端·人工智能·后端