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

这篇具有很好参考价值的文章主要介绍了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()函数。

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

    前端加密解密,js,前端,html

  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>

        这些加密解密方式在前端通常用于保护敏感数据,如用户密码、用户身份验证等。需要注意的是,前端加密解密只能提供一定程度上的安全性,真正的安全仍然依赖于后端的处理和保护。文章来源地址https://www.toymoban.com/news/detail-845297.html

到了这里,关于html前端的几种加密/解密方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • java和js实现前端加密后端解密,后端加密前端解密(Base64)

    目录 1.前端加密后端解密 2.后端加密前端解密 在前端和后端数据传输时,常常涉及到隐私数据的传输(例如用户名和密码),这时,我们就需要对隐私数据进行加密解密 1.前端加密后端解密         1.1 前端jquery实现         1.2后端 2.后端加密前端解密         2.1后端加密

    2024年02月16日
    浏览(56)
  • 前端AES加密解密

    前端经常会遇到这种接口和参数需要加密的情况,目前用的最多的就是aes加密了。以下就是操作步骤。以下方式适用各个前端框架,请自行根据框架修改对应语法 1.安装 CryptoJS 这个库就是用来加密的核心,直接打开项目终端,输入 npm install crypto-js --save 2. 新建 crypto.js 在 @/

    2024年02月13日
    浏览(58)
  • JAVA各种加密与解密方式

    在密码学中,凯撒加密是一种最简单且最广为人知的加密技术。它是一种替换加密的技术,明文中的所有字母都在字母表上向后(或向前)按照一个固定数目进行偏移后被替换成密文。这个加密方法是以罗马共和时期恺撒的名字命名的,当年恺撒曾用此方法与其将军们进行联

    2024年02月12日
    浏览(34)
  • 前端SM4加密解密

    前后端加密一致,如果不一致就是key有问题 调用方法: sm4.js文件

    2024年04月25日
    浏览(54)
  • 使用非对称加密(RSA) 实现前端加密后端解密

    数据加密方式有: 单向加密、对称加密、非对称加密、加密盐、散列函数、数字签名。 1、单向加密 单向加密通过对数据进行摘要计算生成密文,密文不可逆推还原。只能加密,不能解密,常用于提取数据的指纹信息以此来验证数据的完整性。但是会引发雪崩效应(雪崩效应

    2024年02月08日
    浏览(64)
  • AES对称加密实战——前端js加密后端python解密

    高级加密标准(AES, Advanced Encryption Standard),是一种最常见的对称加密算法 。其加密流程如下图所示,发送方通过密钥对明文加密后进行网络传输,接收方用同样的密钥将密文解密。在前后端通讯场景中,可利用AES算法对用户密码进行加密后传输,防止被抓包而造成密码泄露。

    2024年02月04日
    浏览(59)
  • 前端sm2国密加密解密

    1.下载国密包 2.获取后端的公钥 注sm-crypto使用BC库加解密前端密钥与后端密钥是两队,非常规的base64密钥 前端公钥需要在前面加04占位否则无法解密 3.前端使用公钥进行加密 生成的加密串加04方便后端解密 4.前端使用私钥解密

    2024年02月11日
    浏览(58)
  • 国密SM2前端加密解密示例

    目录 一、 安装sm2依赖 二、编写代码 1、data中绑定数据 2、公钥加密 3、私钥解密 4、按钮绑定一下,数据可见一下 三、完整代码 要改变的数据phone和过程数据copyphone,公钥publicKey和私钥privateKey 具体生成测试公钥私钥可参照SM2加解密 C1为65字节第1字节为压缩标识,这里固定为

    2024年02月03日
    浏览(65)
  • 前端请求参数加密、.NET 后端解密

    本文详细介绍了前端请求参数加密、.NET 后端解密,文章较长,请各位看官耐心看完。 目录 一、前端使用“CryptoJS”,前端AES加密,.NET后端AES解密 1.1、加密解密效果图 1.2、CryptoJS介绍 1.3、准备工作:安装“CryptoJS” 1.3.1、使用npm进行安装 1.3.2、Visual Studio中安装 1.3.2.1、选择

    2024年02月08日
    浏览(71)
  • RSA之前端加密后端解密

    RSA加密解密方式有: (1)公钥加密,私钥解密; (2)私钥加密,公钥解密; 此文章中以下我使用的是 前端公钥加密,后端私钥解密 ; http://web.chacuo.net/netrsakeypair 生成对应的公钥和私钥 前端加密js文件 : 链接: https://pan.baidu.com/s/1NIMayTcmjbMOf7BqPhPQoA 提取码: t7an 下载js文件并

    2024年02月21日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包