前端常用的几种加密方法

目前在前端开发中基本都会用到加密，最常见的就是登录密码的加密。接下来会为大家介绍几种加密方法。

md5 加密
MD5 加密后的位数有两种：16 位与 32 位。默认使用32位。（16 位实际上是从 32 位字符串中取中间的第 9 位到第 24 位的部分）为提高安全性。根据业务需求，可以对md5 添加偏移量。如对原有字符拼接指定位数的字符串。

1.1 使用方法

npm install --save js-md5
// 然后在页面中 引入
import md5 from 'js-md5';
md5('holle') // bcecb35d0a12baad472fbe0392bcc043
复制代码

扩展
md5 支持算法

md5.hex(''); // d41d8cd98f00b204e9800998ecf8427e
md5.array(''); // [212, 29, 140, 217, 143, 0, 178, 4, 233, 128, 9, 152, 236, 248, 66, 126]
md5.digest(''); // [212, 29, 140, 217, 143, 0, 178, 4, 233, 128, 9, 152, 236, 248, 66, 126]
md5.arrayBuffer(''); // ArrayBuffer
md5.buffer(''); // ArrayBuffer, deprecated, This maybe confuse with Buffer in node.js. Please use arrayBuffer instead.
md5.base64('');
复制代码

base64 加密
2.1 使用方法

npm install --save js-base64
// 引入
let Base64 = require('js-base64').Base64
// 加密
Base64.encode('测试'); // 5bCP6aO85by+
Base64.encodeURI('测试'); // 5bCP6aO85by-
// 解密
Base64.decode('5bCP6aO85by+'); // 测试
// note .decodeURI() is unnecessary since it accepts both flavors
Base64.decode('5bCP6aO85by-'); // 测试
复制代码

3.res 加密
前端 js 库：jsencrypt.js github 地址: github.com/travist/jse…

背景：前端数据加密传到后台，后台经过解密，进行数据处理。在项目开发过程中，为了保证数据的安全性，在进行前端后端数据传输的过程中，需要对数据进行加密解密。

现在比较安全且流行的加密方式是非对称加密（RSA）。其加密方式需要两个秘钥：私钥（私有秘钥）和公钥（公开秘钥）。公钥加密，私钥解密。

RSA 加密规则
公钥（publicKey）加密、私钥（privateKey）解密。不能逆向，私钥（privateKey）加密、公钥（publicKey）解密。说白了就是前后端都需要用公钥（publicKey）进行加密，用私钥（privateKey）进行解密。

为啥不可逆呢？前端代码的安全性差，是总所周知的。之所以称为私钥（privateKey），就是因为是私密的，不可公开的，需要确保 key 的安全。若前端私钥（privateKey）加密，就意味着需要将私钥放到前端保存，这是不安全的，也违背了确保数据安全的初衷。

RSA 双向加密解密
在开发过程中遇到这样一个问题：前端不光要加密数据传到后端，也需要将后端的传回来的加密数据解密。所以定义了两个方法，进行数据的加密解密。

引入前端 JS 库：jsencrypt.js

// RSA 解密
static decryptRSA(str: string) {const encryptor = new JSEncrypt() // 新建JSEncrypt对象const privateKey = "XXXX" // 私钥串encryptor.setPrivateKey(privateKey)//设置私钥const decrytStr = encryptor.decrypt(str)return decrytStr
}
复制代码

// RSA 加密
static encryptRSA(str: string) {const encryptor = new JSEncrypt() // 新建JSEncrypt对象const publicKey = '';  //公钥串encryptor.setPublicKey(publicKey) // 设置公钥const rsaPassWord = encryptor.encrypt(str)return rsaPassWord
}
复制代码

相信大家已经发现问题了，我们将私钥（privateKey）、公钥（publicKey）全部都放到了前端代码中，前端的安全性差，可以很轻松的拿到秘钥对，RSA 加密解密也失去了价值。那该如何解决这个问题？

通过前后端的沟通，我们采用双向加密解密，就是使用两套秘钥来解决这个问题。何为双向加密？

后端定义两对秘钥：秘钥对A、秘钥对B。

秘钥对公钥私钥
A publicKeyA privateKeyA
B publicKeyB privateKeyB
后端拿着：私钥A(privateKeyA)、公钥B（publicKeyB），前端拿着：公钥A（publicKeyA）、私钥B（privateKeyB）。

秘钥对A – 前端加密，后端解密

前端使用公钥A（publicA）对数据进行加密，后端通过公钥A（publicKeyA）对应的私钥A（privateKeyA）进行解密。

秘钥对B – 前端解密，后端加密

后端使用公钥B（publicKeyB）进行加密，前端通过公钥B（publicKeyB）对应的私钥A(privateKeyA)进行解密。

这样就能保证，虽然私钥（privateKeyB）和公钥（publicKeyA）都在前端代码中，但是这两个并不是一对，就算是全部拿到，也无法成功解密。也符合公钥（publicKey）加密、私钥（privateKey）解密的规则。完美解决！

注意事项这个插件对res加密的字符串最长是 117字符，

有时加密时，会遇到加密参数过长而无法加密的现象在源码中加入以下代码，通过调用encryptLong方法，重新定义加密函数即可。

JSEncrypt.prototype.encryptLong = function(string) {  var k = this.getKey();// var maxLength = (((k.n.bitLength()+7)>>3)-11);var maxLength = 117;try {var lt = "";var ct = "";if (string.length > maxLength) {lt = string.match(/.{1,117}/g);lt.forEach(function(entry) {var t1 = k.encrypt(entry);ct += t1 ;});return hex2b64(ct);}var t = k.encrypt(string);var y = hex2b64(t);return y;} catch (ex) {return false;}};
复制代码

点赞支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star: http://github.crmeb.net/u/defu不胜感激！

前端常用的几种加密方法相关推荐

前端常用60余种工具方法（下）
前端常用60余种工具方法(上) 41.将数字转换为大写金额 export const changeToChinese = (Num) => {//判断如果传递进来的不是字符的话转换为字符if ( ...
前端常用60余种工具方法（上）
1.邮箱 export const isEmail = (s) => {return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2, ...
计算机常用的四种加密方法,电脑常见的几种加密方法
电脑常见的几种加密方法加密可以用于保证安全性, 但是其它一些技术在保障通信安全方面仍然是必须的,尤其是关于数据完整性和信息验证;例如,信息验证码(MAC)或者数字签名.另一方面的考虑是为了应付流量分 ...
前端汉字encode_前端常用的几种加密与解密
第一种就是base64格式的加密与解密 window.atob() 与window.btoa()可以实现对base64格式的数据进行解码和编码,其兼容性是主流浏览器,IE10及以上. window.a ...
Java 开发中常用的 4 种加密方法。MD5加密工具类测试 base64加密工具类测试 SHA加密工具类测试 BCrypt加密工具类测试
一.工具类 1, md5加密工具类 2, base64加密工具类 3, Bcrypt工具类二.加密测试 MD5加密测试 base64加密测试 SHA加密测试 BCrypt加密测试一.工具类 1, ...
前端常用 60 余种工具方法
转载自前端大全作者:vipbic https://segmentfault.com/a/1190000022736837 邮箱 export const isEmail = (s) => { ...
颗粒物检测仪常用的三种检测方法
颗粒物检测仪的测量原理:仪器由组装好的传感器和数据处理器组成.传感器是本装置数据采集的重要部件,原理是将激光束通过非球面镜组变为功率密度均匀分布的细小测量光束,在光束道的侧前方,前方焦点对准光束道,后 ...
CNC加工中心常用的几种螺纹加工方法！
螺纹加工是cnc加工中心非常重要的应用之一,螺纹的加工质量和效率将直接影响零件的加工质量及加工中心的生产效率. 随着cnc加工中心性能的提高及切削刀具的改进,螺纹加工的方法也在不断改进,螺纹加工的精度 ...
Linux忘记密码常用的几种解决方法
Linux忘记密码常用的几种解决方法参考文章: (1)Linux忘记密码常用的几种解决方法 (2)https://www.cnblogs.com/vurtne-lu/p/6550590.html 备 ...

前端常用的几种加密方法

前端常用的几种加密方法相关推荐

最新文章

热门文章