前端加密的几种方式

最新推荐文章于 2024-06-25 17:08:36 发布
最新推荐文章于 2024-06-25 17:08:36 发布
阅读量8.9k 收藏 44
点赞数 5
分类专栏： js 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41107680/article/details/109596232
版权

1.base64加解密方式及其原理

这里假设需要加密的字符串是beijing
在这里插入图片描述
其中第四步的base64参照表如下所示
在这里插入图片描述
由以上加解密过程可知：
（1）最终加密后的字符数一定是3的倍数。
（2）只包括65种字符，大写的A至Z，小写的a至z,数字0到9，以及3种符号+/ =，=最多两个且在末尾。

验证如下：
在这里插入图片描述
在这里插入图片描述

2.MD5加密(不可逆)

MD5.js是通过前台js加密的方式对用户敏感信息进行加密的处理一种工具，可以理解为插件。

提取MD5.js文件的路径和地址：MD5.JS
提取码：wyh1

一共有六种加密方式：

  1. hex_md5(value)
  2. b64_md5(value)
  3. str_md5(value)
  4. hex_hmac_md5(key, data)
  5. b64_hmac_md5(key, data)
  6. str_hmac_md5(key, data)

因为MD5是不可逆的，比如在用户进行注册的时候前端使用的MD5加密，将加密后的数据存进数据库，登录的时候拿前端的加密数据和数据库做对比。

验证如下：
在这里插入图片描述
在这里插入图片描述

3.sha1加密(不可逆)

sha1加密（安全哈希算法），这种方式我也了解不多，但是为了能够将几种加解密方式统计在一起，方便我们以后阅读和理解，我也去网上了解了一下。

sha1.js文件代码如下：

function encodeUTF8(s) {
  var i, r = [], c, x;
  for (i = 0; i < s.length; i++)
    if ((c = s.charCodeAt(i)) < 0x80) r.push(c);
    else if (c < 0x800) r.push(0xC0 + (c >> 6 & 0x1F), 0x80 + (c & 0x3F));
    else {
      if ((x = c ^ 0xD800) >> 10 == 0) //对四字节UTF-16转换为Unicode
        c = (x << 10) + (s.charCodeAt(++i) ^ 0xDC00) + 0x10000,
          r.push(0xF0 + (c >> 18 & 0x7), 0x80 + (c >> 12 & 0x3F));
      else r.push(0xE0 + (c >> 12 & 0xF));
      r.push(0x80 + (c >> 6 & 0x3F), 0x80 + (c & 0x3F));
    };
  return r;
}

// 字符串加密成 hex 字符串
function sha1(s) {
  var data = new Uint8Array(encodeUTF8(s))
  var i, j, t;
  var l = ((data.length + 8) >>> 6 << 4) + 16, s = new Uint8Array(l << 2);
  s.set(new Uint8Array(data.buffer)), s = new Uint32Array(s.buffer);
  for (t = new DataView(s.buffer), i = 0; i < l; i++)s[i] = t.getUint32(i << 2);
  s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8);
  s[l - 1] = data.length << 3;
  var w = [], f = [
    function () { return m[1] & m[2] | ~m[1] & m[3]; },
    function () { return m[1] ^ m[2] ^ m[3]; },
    function () { return m[1] & m[2] | m[1] & m[3] | m[2] & m[3]; },
    function () { return m[1] ^ m[2] ^ m[3]; }
  ], rol = function (n, c) { return n << c | n >>> (32 - c); },
    k = [1518500249, 1859775393, -1894007588, -899497514],
    m = [1732584193, -271733879, null, null, -1009589776];
  m[2] = ~m[0], m[3] = ~m[1];
  for (i = 0; i < s.length; i += 16) {
    var o = m.slice(0);
    for (j = 0; j < 80; j++)
      w[j] = j < 16 ? s[i + j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1),
        t = rol(m[0], 5) + f[j / 20 | 0]() + m[4] + w[j] + k[j / 20 | 0] | 0,
        m[1] = rol(m[1], 30), m.pop(), m.unshift(t);
    for (j = 0; j < 5; j++)m[j] = m[j] + o[j] | 0;
  };
  t = new DataView(new Uint32Array(m).buffer);
  for (var i = 0; i < 5; i++)m[i] = t.getUint32(i << 2);

  var hex = Array.prototype.map.call(new Uint8Array(new Uint32Array(m).buffer), function (e) {
    return (e < 16 ? "0" : "") + e.toString(16);
  }).join("");
  return hex;
}

验证如下：
在这里插入图片描述
在这里插入图片描述

4.编码和解码字符串

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

escape采用ISO Latin字符集对指定的字符串进行编码。所有的空格符、标点符号、特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码(xx等于该字符在字符集表里面的编码的16进制数字)

在很多脚本语言的应用当中,escape函数是一个可转换编码的函数,比如javascript 的 ajax 中,向a.php传递参数?city=北京,可先将"北京"用escape重新编码,再进行传递,在服务器端接收后再解码才不会出现乱码。escape一般用于传递URL参数和类似urlencode base64_encode函数是类似的。如上?city=北京

验证如下：
在这里插入图片描述
在这里插入图片描述

5.AES/DES加解密方式

下载crypto-js.js 引入使用 网址：引入地址
验证如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<script type="text/javascript">
	var aseKey = "12345678"     //秘钥必须为：8/16/32位
	var message = "13785624612";
	
	//加密
	var encrypt = CryptoJS.AES.encrypt(message, CryptoJS.enc.Utf8.parse(aseKey), {
	  mode: CryptoJS.mode.ECB,
	  padding: CryptoJS.pad.Pkcs7
	}).toString();
	console.log(encrypt); 

	//解密
	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);    //13785624612

</script>

在这里插入图片描述

  • 注：加密的时候必须转成字符串 使用toString。 解密的时候 必须使用utf8的格式

6.另外还有很多其他的加解密方式

比如：RSA加密、sha256 js 前端加密

7.以上测试源码如下：

<html>
    <head>
        <title>>前端js加解密学习过程</title>
    </head>
    <body>
    </body>
<!-- base64 -->
<script>
var str = "beijing";
var str64 = window.btoa(str);
console.log("字符串是:"+str);
console.log("经base64编码后:"+str64);
console.log("base64解码后:"+window.atob(str64));
</script>

<!-- md5 -->
<script src="./md5.js"></script>"></script>
    <script>
        console.log(hex_md5("chen"));            
        console.log(b64_md5("chen"));            
        console.log(str_md5("chen"));            
        console.log(hex_hmac_md5("chen","chen"));            
        console.log(b64_hmac_md5("chen","chen"));            
        console.log(str_hmac_md5("chen","chen"));            
</script>

<!-- sha1 -->
<script src="https://cdn.bootcss.com/js-sha1/0.6.0/sha1.js"></script>
<script type="text/javascript">
        var sha1_1 = sha1("chenhoubo");
        console.log(sha1_1);
        var sha1_2 = sha1("admin:1001");
        console.log(sha1_2);
</script>

<!-- 编码 -->
<script type="text/javascript">
      var escape1 =escape("我的名字是：陈厚伯");//编码
      console.log(escape1);
      var unescape1 = unescape(escape1); //解码
      console.log(unescape1);
</script>

<!-- encrypt/decrypt -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<script type="text/javascript">
	var aseKey = "12345678"     //秘钥必须为：8/16/32位
	var message = "13785624612";

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

	//解密
	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);    //13785624612

</script>


</html>
陈厚伯
关注
  • 5
    点赞
  • 踩
  • 44
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
web前端三种常见的通过JS加密文本方式
06-18
web前端三种常见的通过JS加密文本方式，包含md5、base64、sha1，源文件
RSA实现JS前端加密与PHP后端解密功能示例
10-16
1. **前端加密**： - 前端通常不保存敏感信息，如用户密码，因此在用户输入密码后，使用RSA公钥进行加密。JS中，我们需要引入几个依赖库，如`jsbn.js`、`prng4.js`、`rng.js`和`rsa.js`，它们提供了RSA加密所需的...
前端数据加密的几种方式
qq_59449435的博客
04-25 1万+
前端几种加密方式分享。
前端参数加密逻辑
最新发布
ly8264227的博客
06-25 432
主旨是为了解决传输过程中的明文问题,例如passWord等重要信息需要进行加密处理,是爬虫人员无法直接读取数据,增加爬虫成本,总结了几点前端日常使用中的加密解密策略,以供参考。
前端常用的几种加密方法
开源世界
09-24 1万+
目前在前端开发中基本都会用到加密，最常见的就是登录密码的加密。接下来会为大家介绍几种加密方法。 md5 加密 MD5 加密后的位数有两种：16 位与 32 位。默认使用32位。 （16 位实际上是从 32 位字符串中取中间的第 9 位到第 24 位的部分）为提高安全性。根据业务需求，可以对md5 添加偏移量。如对原有字符拼接指定位数的字符串。 1.1 使用方法 npm install --save js-md5 // 然后在页面中 引入 import md5 from 'js-md5'; md5(
前端几种加密方式整理
热门推荐
TeAmoly的博客
11-24 2万+
前端几种加密方式整理 md5加密：md5.js MD5.js 共有6中加密方法:hex_md5(s), b64_md5(s), str_md5(s), hex_hmac_md5(key, data), b64_hmac_md5(key, data), str_hmac_md5(key, data) 使用 &amp;lt;script src=&quot;js/md5.js&quot; type=&quot;text/javascr...
前端常用加密算法
weixin_42478537的博客
03-27 1744
文章摘要（防篡改）：一般用SHA256加密或MD5加密进行文章摘要，即前端把需要传给后端的报文用SHA256加密后，把加密后的字符串传给后端，后端收到后，会先把解密后的明文再次进行SHA256加密，然后和前端传来的SHA256密文进行对比，如果一致，证明数据未被篡改.然而，它的安全性依赖于密钥的保密性，如果密钥泄露，加密信息就不安全。常用的非对称加密算法有RSA。这是一种简单的数据转换方法，例如Base64编码，它可以增加数据的可读性难度，同时将数据转换为可打印的字符序列，有助于增加传输的便利性和安全性。
aes前端加密需要用到的aes文件
12-14
标题提到的“aes前端加密需要用到的aes文件”指的是在前端应用中使用AES加密技术时所需的JavaScript实现文件。 AES加密的基本原理是将明文数据通过一系列复杂的数学运算转化为密文，这个过程被称为加密；然后通过...
web前端md5加密md5源码
09-06
MD5（Message-Digest Algorithm 5）是一种广泛用于前端开发中的哈希函数，主要用于数据的校验和加密。它的设计目标是产生一个128位（16字节）的摘要值，通常以32个十六进制字符的形式表示。在前端应用中，MD5被用来...
前端js加密大礼包.zip
12-31
本“前端js加密大礼包”提供了几种常见的加密算法实现，包括MD5、AES、RSA和Base64，这些算法在保护用户数据和通信安全方面发挥着关键作用。 1. **MD5** (Message-Digest Algorithm 5)： MD5是一种广泛使用的哈希...
前端加密rsa插件
01-13
在前端加密中，RSA算法的应用主要体现在以下几点： 1. **公钥与私钥**：RSA算法有两把密钥，一把是公钥，可以公开给任何人；另一把是私钥，必须保密。公钥用于加密，私钥用于解密。在前端，通常服务器会提供公钥，...
前端JS实现密码加密（base64， md5， sha1，RSA）
11-24
前端JS实现密码加密（base64.js， md5.js， sha1.js，jsencrypt.js），使用方式请看我这篇文章：https://blog.csdn.net/guxingsheng/article/details/84451573
前端MD5加密
05-04
在前端开发中，MD5加密的应用主要有以下几个方面： 1. **密码存储**：用户在注册时输入的密码通常会被MD5加密后存储在数据库中，这样即使数据库被泄露，攻击者也无法直接获取到原始密码，增加了破解难度。 2. **...
js逆向调试工具，集成常用js加密函数，前端js几种加密集合
03-07
JavaScript中的加密库，如CryptoJS、Forge、bcrypt.js等，提供了这些加密算法的实现，方便开发者在前端进行数据加密。 最后，前端JS的加密集合是指一系列混淆和压缩技术，以提高代码的安全性和效率。常见的JS混淆工...
网页前端RSA加密插件
09-06
网页前端RSA加密插件是一种用于保护用户数据安全的解决方案，特别是在与服务器进行敏感信息交互时。RSA（Rivest-Shamir-Adleman）是一种非对称加密算法，广泛应用于网络安全领域，如HTTPS、数字签名和数据加密等。在...
yzf_enc:前端加密演示
03-15
前端加密主要涉及到以下几个知识点： 1. **JavaScript加密库**：前端加密通常使用JavaScript库，如CryptoJS、bcrypt.js、 sjcl等。这些库提供了各种加密算法，如AES（高级加密标准）、RSA（公钥加密标准）等，使得...
前端数据加密的方法
w418856的博客
05-31 1万+
在这个页面中，当用户点击“base64加密”按钮时，会调用一个JavaScript函数fn1()，该函数使用了window.btoa()方法进行Base64加密操作，并使用window.atob()方法进行解密操作。在这个页面中，当用户点击“编码解码加密”按钮时，会调用一个JavaScript函数fn4()，该函数使用了escape()和unescape()方法进行编码和解码操作。window.atob()方法接受一个Base64编码的字符串作为参数，返回该编码的原始字符串。
前端常用6种数据加密方式的使用（最详解）
富朝阳的博客
01-10 1万+
前端常用的加密方式有base64加密，MD5加密，sha1加密，sha256加密，aes加密，字符串加密，面我介绍前端6种常用的加密如何使用，如有不足之处，欢迎大家补充
前端几种加密方式
gztrljh
11-03 197
https://www.cnblogs.com/pinkpolk/articles/13600696.html 这个做一个简单加密不让人看明文可以这样(缺点不能加密英文数字) var escape1 =escape("我的名字是：mosquito~");//编码 console.log(escape1); var unescape1 = unescape(escape1); //解码 改造 // 加密函数 function compile(code) { var
前端加密的几种方式 以及如何实现
06-03
前端加密有以下几种方式： 1. 对称加密：使用相同的密钥进行加密和解密，常见的算法有DES、3DES、AES等。实现方式如下： ```javascript // 加密 function encryptByAES(message, secretKey) { const key = CryptoJS.enc.Utf8.parse(secretKey); const encrypted = CryptoJS.AES.encrypt(message, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }); return encrypted.toString(); } // 解密 function decryptByAES(ciphertext, secretKey) { const key = CryptoJS.enc.Utf8.parse(secretKey); const decrypted = CryptoJS.AES.decrypt(ciphertext, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }); return decrypted.toString(CryptoJS.enc.Utf8); } ``` 2. 非对称加密：使用公钥和私钥进行加密和解密，常见的算法有RSA、DSA等。实现方式如下： ```javascript // 生成公钥和私钥 const keyPair = window.crypto.subtle.generateKey( { name: "RSA-OAEP", modulusLength: 2048, publicExponent: new Uint8Array([1, 0, 1]), // 65537 hash: "SHA-256" }, true, ["encrypt", "decrypt"] ); // 加密 async function encryptByRSA(message, publicKey) { const encodedMessage = new TextEncoder().encode(message); const encrypted = await window.crypto.subtle.encrypt( { name: "RSA-OAEP" }, publicKey, encodedMessage ); return window.btoa(String.fromCharCode(...new Uint8Array(encrypted))); } // 解密 async function decryptByRSA(ciphertext, privateKey) { const decodedCiphertext = Uint8Array.from( atob(ciphertext), c => c.charCodeAt(0) ); const decrypted = await window.crypto.subtle.decrypt( { name: "RSA-OAEP" }, privateKey, decodedCiphertext ); return new TextDecoder().decode(decrypted); } ``` 3. 散列加密：将数据转化为固定长度的散列值，常见的算法有MD5、SHA-1、SHA-256等。实现方式如下： ```javascript // 计算MD5散列值 function hashByMD5(message) { return CryptoJS.MD5(message).toString(); } // 计算SHA-256散列值 function hashBySHA256(message) { return CryptoJS.SHA256(message).toString(); } ``` 4. 混淆加密：通过混淆代码或者加入噪音的方式来增强安全性，常见的方式有代码混淆、字符替换等。实现方式如下： ```javascript // 字符串替换 function replaceChars(str) { return str.replace(/a/g, "@").replace(/e/g, "3").replace(/i/g, "1"); } // 代码混淆 function obfuscateCode(code) { // 实现方式可以使用自己的加密算法，这里只是示例 return code.split("").reverse().join(""); } ``` 需要注意的是，以上示例代码只是参考实现，实际情况需要根据具体需求进行修改和完善。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值