第 73 篇原创好文~
本文首发于政采云前端团队博客: 敏感数据加密方案及实现
![]()
如今是大数据时代,须要收集大量的我的信息用于统计。一方面它给咱们带来了便利,另外一方面一些我的信息数据在无心间被泄露,被非法分子用于推销和黑色产业。javascript
2018 年 5 月 25 日,欧盟已经强制执行《通用数据保护条例》(General Data Protection Regulation,缩写做 GDPR)。该条例是欧盟法律中对全部欧盟我的关于数据保护和隐私的规范。这意味着我的数据必须使用假名化或匿名化进行存储,而且默认使用尽量最高的隐私设置,以免数据泄露。html
相信你们也都不想让本身在外面“裸奔”。因此,做为前端开发人员也应该尽可能避免用户我的数据的明文传输,尽量的下降信息泄露的风险。前端
看到这里可能有人会说如今都用 HTTPS 了,数据在传输过程当中是加密的,前端就不须要加密了。其实否则,我能够在你发送 HTTPS 请求以前,经过谷歌插件来捕获 HTTPS 请求中的我的信息,下面我会为此演示。因此前端数据加密仍是颇有必要的。java
中间人攻击是常见的攻击方式。详细过程能够参见这里。大概的过程是中间人经过 DNS 欺骗等手段劫持了客户端与服务端的会话。node
客户端、服务端之间的信息都会通过中间人,中间人能够获取和转发二者的信息。在 HTTP 下,前端数据加密仍是避免不了数据泄露,由于中间人能够伪造密钥。为了不中间人攻击,咱们通常采用 HTTPS 的形式传输。ios
HTTPS 虽然能够防止数据在网络传输过程当中被劫持,可是在发送 HTTPS 以前,数据仍是能够从谷歌插件中泄露出去。git
由于谷歌插件能够捕获 Network 中的全部请求,因此若是某些插件中有恶意的代码仍是能够获取到用户信息的,下面为你们演示。github
因此光采用 HTTPS,一些敏感信息若是仍是以明文的形式传输的话,也是不安全的。若是在 HTTPS 的基础上再进行数据的加密,那相对来讲就更好了。算法
对称加密算法,又称为共享密钥加密算法。在对称加密算法中,使用的密钥只有一个,发送和接收双方都使用这个密钥对数据进行加密和解密。json
这就要求加密和解密方事先都必须知道加密的密钥。其优势是算法公开、计算量小、加密速度快、加密效率高;缺点是密钥泄露以后,数据就会被破解。通常不推荐单独使用。根据实现机制的不一样,常见的算法主要有AES、ChaCha20、3DES等。
非对称加密算法,又称为公开密钥加密算法。它须要两个密钥,一个称为公开密钥 (public key),即公钥;另外一个称为私有密钥 (private key),即私钥。
他俩是配对生成的,就像钥匙和锁的关系。由于加密和解密使用的是两个不一样的密钥,因此这种算法称为非对称加密算法。其优势是算法强度复杂、安全性高;缺点是加解密速度没有对称加密算法快。常见的算法主要有RSA、Elgamal等。
散列算法又称散列函数、哈希函数,是把消息或数据压缩成摘要,使得数据量变小,将数据的格式固定成特定长度的值。通常用于校验数据的完整性,平时咱们下载文件就能够校验 MD5 来判断下载的数据是否完整。常见的算法主要有 MD4、MD5、SHA 等。
客户端:
具体代码实现登陆接口
客户端须要随机生成一个 aesKey,在页面加载完的时候须要从服务端请求 publicKey
let aesKey = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; // 随机产生 let publicKey = ""; // 公钥会从服务端获取 // 页面加载完以后,就去获取公钥 window.onload = () => { axios({ method: "GET", headers: { "content-type": "application/x-www-form-urlencoded" }, url: "http://localhost:3000/getPub", }) .then(function (result) { publicKey = result.data.data; // 获取公钥 }) .catch(function (error) { console.log(error); }); };
aes加密和解密方法
/** * aes加密方法 * @param {string} text 待加密的字符串
*/ function aesEncrypt(text, key) { const textBytes = aesjs.utils.utf8.toBytes(text); // 把字符串转换成二进制数据 // 这边使用CTR-Counter加密模式,还有其余模式能够选择,具体能够参考aes加密库 const aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(5)); const encryptedBytes = aesCtr.encrypt(textBytes); // 进行加密 const encryptedHex = aesjs.utils.hex.fromBytes(encryptedBytes); // 把二进制数据转成十六进制 return encryptedHex; } /** * aes解密方法 * @param {string} encryptedHex 加密的字符串 * @param {array} key 加密key */ function aesDecrypt(encryptedHex, key) { const encryptedBytes = aesjs.utils.hex.toBytes(encryptedHex); // 把十六进制数据转成二进制 const aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(5)); const decryptedBytes = aesCtr.decrypt(encryptedBytes); // 进行解密 const decryptedText = aesjs.utils.utf8.fromBytes(decryptedBytes); // 把二进制数据转成utf-8字符串 return decryptedText; } ``` - 请求登陆 ```javascript /** * 登录接口 */ function submitFn() { const userName = document.querySelector("#userName").value; const password = document.querySelector("#password").value; const data = { userName, password, }; const text = JSON.stringify(data); const sendData = aesEncrypt(text, aesKey); // 把要发送的数据转成字符串进行加密 console.log("发送数据", text); const encrypt = new JSEncrypt(); encrypt.setPublicKey(publicKey); const encrypted = encrypt.encrypt(aesKey.toString()); // 把aesKey进行非对称加密 const url = "http://localhost:3000/login"; const params = { id: 0, data: { param1: sendData, param2: encrypted } }; axios({ method: "POST", headers: { "content-type": "application/x-www-form-urlencoded" }, url: url, data: JSON.stringify(params), }) .then(function (result) { const reciveData = aesDecrypt(result.data.data, aesKey); // 用aesKey进行解密 console.log("接收数据", reciveData); }) .catch(function (error) { console.log("error", error); }); } ```
服务端(Node):
具体代码实现登陆接口
引用加密库
const http = require("http"); const aesjs = require("aes-js"); const NodeRSA = require("node-rsa"); const rsaKey = new NodeRSA({ b: 1024 }); // key的size为1024位 let aesKey = null; // 用于保存客户端的aesKey let privateKey = ""; // 用于保存服务端的公钥 rsaKey.setOptions({ encryptionScheme: "pkcs1" }); // 设置加密模式
实现login接口
http .createServer((request, response) => { response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Headers", "Content-Type"); response.setHeader("Content-Type", "application/json"); switch (request.method) { case "GET": if (request.url === "/getPub") { const publicKey = rsaKey.exportKey("public"); privateKey = rsaKey.exportKey("private"); response.writeHead(200); response.end(JSON.stringify({ result: true, data: publicKey })); // 把公钥发送给客户端 return; } break; case "POST": if (request.url === "/login") { let str = ""; request.on("data", function (chunk) { str += chunk; }); request.on("end", function () { const params = JSON.parse(str); const reciveData = decrypt(params.data); console.log("reciveData", reciveData); // 一系列处理以后 response.writeHead(200); response.end( JSON.stringify({ result: true, data: aesEncrypt( JSON.stringify({ userId: 123, address: "杭州" }), // 这个数据会被加密 aesKey ), }) ); }); return; } break; default: break; } response.writeHead(404); response.end(); }) .listen(3000);
加密和解密方法
function decrypt({ param1, param2 }) { const decrypted = rsaKey.decrypt(param2, "utf8"); // 解密获得aesKey aesKey = decrypted.split(",").map((item) => { return +item; }); return aesDecrypt(param1, aesKey); } /** * aes解密方法 * @param {string} encryptedHex 加密的字符串
*/ function aesDecrypt(encryptedHex, key) { const encryptedBytes = aesjs.utils.hex.toBytes(encryptedHex); // 把十六进制转成二进制数据 const aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(5)); // 这边使用CTR-Counter加密模式,还有其余模式能够选择,具体能够参考aes加密库 const decryptedBytes = aesCtr.decrypt(encryptedBytes); // 进行解密 const decryptedText = aesjs.utils.utf8.fromBytes(decryptedBytes); // 把二进制数据转成字符串 return decryptedText; } /** * aes加密方法 * @param {string} text 待加密的字符串 * @param {array} key 加密key */ function aesEncrypt(text, key) { const textBytes = aesjs.utils.utf8.toBytes(text); // 把字符串转成二进制数据 const aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(5)); const encryptedBytes = aesCtr.encrypt(textBytes); // 加密 const encryptedHex = aesjs.utils.hex.fromBytes(encryptedBytes); // 把二进制数据转成十六进制 return encryptedHex; } ```
本文主要介绍了一些前端安全方面的知识和具体加密方案的实现。为了保护客户的隐私数据,不论是 HTTP 仍是HTTPS,都建议密文传输信息,让破解者增长一点攻击难度吧。固然数据加解密也会带来必定性能上的消耗,这个须要各位开发者各自衡量了。
政采云前端团队(ZooTeam),一个年轻富有激情和创造力的前端团队,隶属于政采云产品研发部,Base 在风景如画的杭州。团队现有 40 余个前端小伙伴,平均年龄 27 岁,近 3 成是全栈工程师,妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵,也有浙大、中科大、杭电等校的应届新人。团队在平常的业务对接以外,还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战,推进并落地了一系列的内部技术产品,持续探索前端技术体系的新边界。
若是你想改变一直被事折腾,但愿开始能折腾事;若是你想改变一直被告诫须要多些想法,却无从破局;若是你想改变你有能力去作成那个结果,却不须要你;若是你想改变你想作成的事须要一个团队去支撑,但没你带人的位置;若是你想改变既定的节奏,将会是“5 年工做时间 3 年工做经验”;若是你想改变原本悟性不错,但老是有那一层窗户纸的模糊… 若是你相信相信的力量,相信平凡人能成就非凡事,相信能遇到更好的本身。若是你但愿参与到随着业务腾飞的过程,亲手推进一个有着深刻的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程,我以为咱们该聊聊。任什么时候间,等着你写点什么,发给 ZooTeam@cai-inc.com