前端常用的几种加密方法 |
您所在的位置：网站首页 › php常用加密技术 › 前端常用的几种加密方法 |
前端常用的几种加密方法
|
小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。 目前在前端开发中基本都会用到加密，最常见的就是登录密码的加密。接下来会为大家介绍几种加密方法。 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。 秘钥对公钥私钥ApublicKeyAprivateKeyABpublicKeyBprivateKeyB后端拿着：私钥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; } };点赞支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。 canvas 爬坑路【方法篇】 不懂 seo 优化？一篇文章帮你了解如何去做 seo 优化 canvas 爬坑路【属性篇】 【实战篇】微信小程序开发指南和优化实践 聊一聊移动端适配 前端性能优化实战 聊聊让人头疼的正则表达式 获取文件blob流地址实现下载功能 Vue 虚拟 DOM 搞不懂？这篇文章帮你彻底搞定虚拟 DOM Git 相关推荐 通俗易懂的 Git 入门 git 实现自动推送 我在工作中是如何使用 git 的 面试相关推荐 前端万字面经——基础篇 前端万字面积——进阶篇 更多精彩详见：个人主页 |
【本文地址】
今日新闻 |
推荐新闻 |