前端常用的几种加密方法
目前在前端开发中基本都会用到加密,最常见的就是登录密码的加密。接下来会为大家介绍几种加密方法。
1. 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(''); 复制代码
2. 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不胜感激 !
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
网络协议之:WebSocket的消息格式
简介 我们知道WebSocket是建立在TCP协议基础上的一种网络协议,用来进行客户端和服务器端的实时通信。非常的好用。最简单的使用WebSocket的办法就是直接使用浏览器的API和服务器端进行通信。 本文将会深入分析WebSocket的消息交互格式,让大家得以明白,websocket到底是怎么工作的。 WebSocket的握手流程 我们知道WebSocket为了兼容HTTP协议,是在HTTP协议的基础之上进行升级得到的。在客户端和服务器端建立HTTP连接之后,客户端会向服务器端发送一个升级到webSocket的协议,如下所示: GET /chat HTTP/1.1 Host: example.com:8000 Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Version: 13 注意,这里的HTTP版本必须是1.1以上。HTTP的请求方法必须是GET 通过设置Upgrade和Connection这两个header,表示我...
- 下一篇
终于有人把 ZFS 文件系统讲明白了
本文主要介绍高级文件系统 ZFS,将讨论它的来源、它是什么以及为什么它在技术人员和企业中如此受欢迎。 注意: 本文多次提到 ZFS ,当谈到 ZFS 功能和安装时,其实说的是 OpenZFS。自从 Oracle 停止对 OpenSolaris 更新代码之后[1],ZFS(由 Oracle 开发)和 OpenZFS 遵循了不同的路径。 ZFS 的历史 ZFS 文件系统在 2001 年由 Matthew Ahrens 和 Jeff Bonwick[2] 创建。ZFS 旨在成为 Sun Microsystems Solaris 操作系统[3] 的下一代文件系统。2008 年,ZFS 被移植到 FreeBSD,同年开始将 ZFS 移植到 Linux[4] 中。但是,由于 ZFS 是根据 Common_Development_and_Distribution_License(CDDL)[5] 开发的,该许可证与 GNU General Public License (GPL)[6] 不兼容,因此它不能包含在 Linux 内核中。为了解决这个问题,大多数 Linux 发行版都提供了安装 ZFS 的...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- CentOS7安装Docker,走上虚拟化容器引擎之路
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS8编译安装MySQL8.0.19
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装