
文章插圖
場(chǎng)景在開發(fā)過(guò)程中 , 我們會(huì)經(jīng)常會(huì)從當(dāng)前系統(tǒng)跳轉(zhuǎn)別的系統(tǒng)進(jìn)行訪問(wèn)或者頁(yè)面嵌套使用 。
那一般都會(huì)給到一個(gè)地址進(jìn)行參數(shù)拼接 , 然后去訪問(wèn) 。那么會(huì)存在一個(gè)問(wèn)題 , 就是地址暴露在外面參數(shù)使用明文的話會(huì)被篡改 , 極度不安全 。
這個(gè)時(shí)候我們就考慮到加密 , 前端和后端協(xié)定好一種加密方式 , 然后前端進(jìn)行參數(shù)加密傳到后端 , 后端再去解密(可逆) 。
加密方式也有很多種 , 今天我推薦的是一款強(qiáng)大的前端加密/解密js庫(kù)——crypto-js 。
crypto-js是什么crypto-js 是一個(gè)純 javascript 寫的加密算法類庫(kù) , 可以非常方便地在 javascript 進(jìn)行 MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列 , 進(jìn)行 AES、DES、Rabbit、RC4、Triple DES 加解密 。
GitHub:https://github.com/brix/crypto-js
安裝
npm install crypto-js使用ES6模塊引入方法:import sha256 from 'crypto-js/sha256';import hmacSHA512 from 'crypto-js/hmac-sha512';import Base64 from 'crypto-js/enc-base64';模塊加載引入方法:var AES = require("crypto-js/aes");var SHA256 = require("crypto-js/sha256");頁(yè)面標(biāo)簽引入方法:<script type="text/javascript" src="https://www.520longzhigu.com/shenghuo/path-to/bower_components/crypto-js/crypto-js.js"></script><script type="text/javascript">var encrypted = CryptoJS.AES(...);var encrypted = CryptoJS.SHA256(...);</script>項(xiàng)目中使用實(shí)例這里我以 React作為例子 , 其他的也就大同小異了 。第一步:封裝工具類
我們可以寫一個(gè)工具類 , 專門封裝加密解密的方法 , 比如我新建一個(gè)cryptoAES.js的文件 , 放在utils 目錄下(放哪無(wú)所謂) , 代碼如下:
const CryptoJS = require('crypto-js');//引用AES源碼jsconst key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");//十六位十六進(jìn)制數(shù)作為密鑰const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412');//十六位十六進(jìn)制數(shù)作為密鑰偏移量//解密方法function (word) {let encryptedHexStr = CryptoJS.enc.Hex.parse(word);let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);return decryptedStr.toString();}//加密方法function Encrypt(word) {let srcs = CryptoJS.enc.Utf8.parse(word);let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });return encrypted.ciphertext.toString().toUpperCase();}export default {Decrypt ,Encrypt}上面的代碼中的 key 是密鑰 , iv 是密鑰偏移量 , 這兩個(gè)參數(shù)前后端協(xié)定好保持一致 , 相當(dāng)是我們的小秘密 , 不能告訴別人 , 不然加密的意義就沒(méi)了 。值得注意的是密鑰的長(zhǎng)度 , 由于對(duì)稱解密使用的算法是 AES-128-CBC算法 , 數(shù)據(jù)采用 PKCS#7 填充 , 因此這里的 key 需要為16位!
接著我們定義了 解密方法Decrypt 和 加密方法 Encrypt , 最后通過(guò) export 和default 將其暴露出去 , 方便在需要的時(shí)候進(jìn)行引入….
工具類寫好了 , 很簡(jiǎn)單 , 然后是怎么使用了~
第二步:使用工具類
我們有一個(gè)index.tsx文件 , 在這里面使用加密和解密的方法 。
這里我只演示加密 , 解密同理 。
import { Decrypt, Encrypt } from '/utils /cryptoAES.js';..//比如我組裝好了拼接的參數(shù)const str = '103170,112425366,253.00,20210428173700'Encrypt(str)
以上關(guān)于本文的內(nèi)容,僅作參考!溫馨提示:如遇健康、疾病相關(guān)的問(wèn)題,請(qǐng)您及時(shí)就醫(yī)或請(qǐng)專業(yè)人士給予相關(guān)指導(dǎo)!
「愛(ài)刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容,希望對(duì)您有所幫助:
- 家教機(jī)h8s破解方法最新 步步高家教機(jī)h8s
- 無(wú)限內(nèi)購(gòu)破解版游戲大全 ipad游戲修改器哪個(gè)好
- 蘋果微信怎么加密碼鎖 蘋果手機(jī)微信能上鎖嗎
- 漫放
- 八字中有災(zāi)之年的破解的方法
- 十二生肖婚姻不合的破解秘訣及大利月
- QQ音樂(lè)QMC解碼器 qq音樂(lè)qmc0格式破解
- 如何突破考研英語(yǔ)詞匯
- 新年得防熊孩子 幾種文件加密的方法盤點(diǎn)
- 什么是最良心的安全加密軟件 什么加密軟件比較好安全防護(hù)
