前端數(shù)據(jù)加密方式的常用6種使用最詳解
前言
相信大家在工作或面試中經(jīng)常遇到需要加密的功能，無(wú)論是 web 后臺(tái)還是小程序，都常常存在加解密傳輸，簽名防篡改等機(jī)制，會(huì)使很多滲透人員沒(méi)有辦法直接對(duì)參數(shù)的值進(jìn)行更改，大大增加了攻擊者的攻擊成本。下面我介紹前端6種常用的加密如何使用，如有不足之處，歡迎大家補(bǔ)充。
一、6種常用加密方案
1.Base64加密
簡(jiǎn)介
Base64顧名思義，就是基于64個(gè)可打印字符來(lái)表示二進(jìn)制數(shù)據(jù)的一種方法，「注意它并不是一種加密算法」。對(duì)于64個(gè)打印字符，我們只需要6個(gè)二進(jìn)制位就可以完全表示了。那么我們?nèi)绾卫?個(gè)二進(jìn)制位來(lái)表示只需要6個(gè)二進(jìn)制位就可以完全表示的可打印字符呢？由于2的6次方等于64，所以我們可以將每6個(gè)位元為一個(gè)單元，對(duì)應(yīng)某個(gè)可打印字符。三個(gè)字節(jié)有24個(gè)位元，對(duì)應(yīng)于4個(gè)Base64單元，即3個(gè)字節(jié)需要用4個(gè)可打印字符來(lái)表示。
如何使用
原生加解密
const btoa = window.btoa('hello, my name is FuChaoyang ') // 編碼
console.log('加密后',btoa)
const atob = window.atob('aGVsbG8sIG15IG5hbWUgaXMgRnVDaGFveWFuZyA') // 解碼
console.log('解密后',atob)
base64插件
安裝：
npm install --save js-base64
比如vue3中引入使用，其他框架大同小異，可做參考
<script lang="ts">
import { defineComponent } from 'vue';
import { Base64 } from 'js-base64';
export default defineComponent({
name: 'Test',
setup() {
const encode = Base64.encode('hello, my name is FuChaoyang'); // 編碼
console.log('插件加密后', encode);
const decode = Base64.decode('aGVsbG8sIG15IG5hbWUgaXMgRnVDaGFveWFuZyA'); // 解碼
console.log('插件解密后', decode);
}
});
</script>
總結(jié)
優(yōu)勢(shì)：
- base64 適合不同平臺(tái)、不同語(yǔ)言的傳輸；
- 頁(yè)面中內(nèi)嵌使用 base64 格式的小圖片，可減少了服務(wù)器訪問(wèn)次數(shù)；
- 二進(jìn)制位轉(zhuǎn)換 base64 算法簡(jiǎn)單，對(duì)性能影響不大；
缺點(diǎn)：
- 二進(jìn)制文件轉(zhuǎn)換為 base64 后，體積大概增加 1/3；
- base64 無(wú)法緩存，要緩存只能緩存包含 base64 的文件，比如 js 或者 css；
- 面對(duì)大文件時(shí)，會(huì)消耗一定的 CPU 進(jìn)行編解碼。
2.MD5加密（不可逆）
簡(jiǎn)介
MD5是一種單向哈希算法，即將任意長(zhǎng)度的“消息”經(jīng)過(guò)哈希運(yùn)算，生成一個(gè)128位的“指紋”。
使用MD5加密可以將原始的字符串轉(zhuǎn)化為不可逆的密文，從而保證數(shù)據(jù)在傳輸中不被篡改，提高安全性。在前端中，我們可以通過(guò)JS庫(kù)調(diào)用md5加密函數(shù)進(jìn)行字符串加密，以保護(hù)用戶信息。
如何使用
安裝
npm install js-md5 -s
npm地址：https://www.npmjs.com/package/js-md5
比如vue3中引入使用，其他框架大同小異，可做參考
<script lang="ts">
import { defineComponent } from 'vue';
import { md5 } from 'js-md5'; // 引入
export default defineComponent({
name: 'Test',
setup() {
console.log('md5加密', md5('hello, my name is FuChaoyang'));
}
});
</script>
使用技巧
加鹽
為了增強(qiáng)加密的安全性，我們可以在原始字符串的基礎(chǔ)上再加上一段隨機(jī)的字符串，這個(gè)字符串就是“鹽”。
比如如下加鹽加密：
<script lang="ts">
import { defineComponent } from 'vue';
import { md5 } from 'js-md5'; // 引入
export default defineComponent({
name: 'Test',
setup() {
console.log('md5加密', md5('hello, my name is FuChaoyang'));
const salt = 'AbC$123'; // 定義一個(gè)隨機(jī)的鹽值
console.log('加鹽后md5加密', md5('hello, my name is FuChaoyang' + salt));
}
});
</script>
將"hello, my name is FuChaoyang"加上隨機(jī)字符串"AbC$123"后的結(jié)果。 通過(guò)加鹽可以降低被破解的風(fēng)險(xiǎn)，增強(qiáng)應(yīng)用的安全性。
多次加密
為了提高加密的強(qiáng)度，我們可以將加密結(jié)果再次進(jìn)行md5加密，多次加密后的結(jié)果更加難以破解。
比如如下多次加密：
<script lang="ts">
import { defineComponent } from 'vue';
import { md5 } from 'js-md5'; // 引入
export default defineComponent({
name: 'Test',
setup() {
// MD5普通加密
console.log('md5加密', md5('hello, my name is FuChaoyang'));
// MD5加鹽加密
const salt = 'AbC$123'; // 定義一個(gè)隨機(jī)的鹽值
console.log('加鹽后md5加密', md5('hello, my name is FuChaoyang' + salt));
// MD5多次加密
console.log('md5多次加密', md5(md5('hello, my name is FuChaoyang')));
}
});
</script>
即對(duì)md5兩次加密后的結(jié)果 。
注意點(diǎn)
1. 不要使用固定密鑰
不要使用固定的密鑰進(jìn)行加密，否則容易被破解。應(yīng)該采用隨機(jī)密鑰或者動(dòng)態(tài)生成密鑰進(jìn)行加密。
2. 不要將加密算法公開
不要將加密算法公開，否則可能會(huì)被攻擊者破解。應(yīng)該將加密算法保密，僅在需要的場(chǎng)合使用。
3. 不要只依賴前端加密
即使在前端進(jìn)行加密，也應(yīng)該在后端進(jìn)行加密驗(yàn)證，以增強(qiáng)應(yīng)用的安全性。
使用場(chǎng)景
最常見的網(wǎng)站頁(yè)面登錄password加密，版權(quán)驗(yàn)證，文件上傳比較。
3.sha256加密
簡(jiǎn)介
SHA256是SHA-2下細(xì)分出的一種算法SHA-2，名稱來(lái)自于安全散列算法2（英語(yǔ)：Secure Hash Algorithm 2）的縮寫，一種密碼散列函數(shù)算法標(biāo)準(zhǔn)（哈希算法），由美國(guó)國(guó)家安全局研發(fā)，屬于SHA算法之一，是SHA-1的后繼者。
SHA-2下又可再分為六個(gè)不同的算法標(biāo)準(zhǔn)，包括了：SHA-224、SHA-256、SHA-384、SHA-512、SHA-512/224、SHA-512/256。這些變體除了生成摘要的長(zhǎng)度 、循環(huán)運(yùn)行的次數(shù)等一些微小差異外，算法的基本結(jié)構(gòu)是一致的。對(duì)于任意長(zhǎng)度的消息，SHA256都會(huì)產(chǎn)生一個(gè)256bit長(zhǎng)的哈希值，稱作消息摘要。這個(gè)摘要相當(dāng)于是個(gè)長(zhǎng)度為32個(gè)字節(jié)的數(shù)組，通常用一個(gè)長(zhǎng)度為64的十六進(jìn)制字符串來(lái)表示。
如何使用
安裝
npm install crypto-js --save
npm地址：https://www.npmjs.com/package/crypto-js
比如vue3中引入使用，其他框架大同小異，可做參考
<script lang="ts">
import { defineComponent } from 'vue';
import sha256 from 'crypto-js/sha256';
export default defineComponent({
name: 'Test',
setup() {
// sha256多次加密
console.log('sha256加密后', sha256('hello, my name is FuChaoyang'));
}
});
</script>
特點(diǎn)： 單向加密，不可解密，同明文，同密文。
使用場(chǎng)景
網(wǎng)站驗(yàn)證密碼，為了保證安全，不會(huì)儲(chǔ)存明文密碼，而是直接儲(chǔ)存 hash。
4.sha1加密（相比于MD5 安全性高，但是 速度慢）
簡(jiǎn)介
SHA-1是一種數(shù)據(jù)加密算法，該算法的思想是接收一段明文，然后以一種不可逆的方式將它轉(zhuǎn)換成一段（通常更?。┟芪?，也可以簡(jiǎn)單的理解為取一串輸入碼（稱為預(yù)映射或信息），并把它們轉(zhuǎn)化為長(zhǎng)度較短、位數(shù)固定的輸出序列即散列值（也稱為信息摘要或信息認(rèn)證代碼）的過(guò)程。
如何使用
sha1的加密和sha256，AES用的函數(shù)庫(kù)都可以是crypto-js，因此我們主要裝了crypto-js，這三個(gè)加密方式都可以引入使用，當(dāng)然你也可以用npm上單獨(dú)依賴庫(kù)，這里只用crypto-js為例， 比如vue3中引入使用，其他框架大同小異，可做參考
<script lang="ts">
import { defineComponent } from 'vue';
import sha1 from 'crypto-js/sha1';
export default defineComponent({
name: 'Test',
setup() {
// sha1加密
console.log('sha1加密后', sha1('hello, my name is FuChaoyang'));
}
});
</script>
使用場(chǎng)景
用戶密碼校驗(yàn)比較，文件的完成性比較，文件上傳，版權(quán)驗(yàn)證。
5.AES加密
簡(jiǎn)介
AES是一種對(duì)稱加密算法，全稱為“高級(jí)加密標(biāo)準(zhǔn)”（Advanced Encryption Standard）。它是一個(gè)區(qū)塊加密算法，適用于大多數(shù)應(yīng)用場(chǎng)景，包括加密和解密，還可以在不同的平臺(tái)和設(shè)備之間進(jìn)行加密和解密操作，AES加密算法支持多種加密模式。
如何使用
還是用crypto-js為例， 比如vue3中引入使用，其他框架大同小異，可做參考
<script lang="ts">
import { defineComponent } from 'vue';
import CryptoJS from 'crypto-js';
export default defineComponent({
name: 'Test',
setup() {
const key = CryptoJS.enc.Utf8.parse('123321'); // 密鑰 后端提供
const iv = CryptoJS.enc.Utf8.parse(''); // 偏移量
/**
* AES加密 ：字符串 key iv 返回base64
*/
const Encrypt = (word: any)=> {
const srcs = CryptoJS.enc.Utf8.parse(word);
const encrypted = CryptoJS.AES.encrypt(srcs, key, {
iv,
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
};
` /**
* AES 解密 ：字符串 key iv 返回base64
* */`;
const Decrypt = (word: any)=> {
const base64 = CryptoJS.enc.Base64.parse(word);
const src = CryptoJS.enc.Base64.stringify(base64);
const decrypt = CryptoJS.AES.decrypt(src, key, {
iv,
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return CryptoJS.enc.Utf8.stringify(decrypt);
};
console.log('AES加密后', Encrypt('wo shi fuzhaoyang'));
console.log('AES解密后', Decrypt(Encrypt('wo shi fuzhaoyang')));
}
});
</script>涉及需要后端秘鑰偏移量設(shè)置，這里不做結(jié)果展示。
使用場(chǎng)景
最常見的頁(yè)面簽名。
6.字符串的編碼和解碼
escape編碼 unescape解碼
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Test',
setup() {
let str = '富朝陽(yáng)的前端博客';
let newStr = escape(str);
console.log('字符串：', str);
console.log('加密：', newStr);
let newStr2 = unescape(newStr);
console.log('解密：', newStr2);
}
});
</script>
注意點(diǎn)：對(duì)于漢字，數(shù)字不適用。
總結(jié)
到此這篇關(guān)于前端數(shù)據(jù)加密方式的常用6種使用的文章就介紹到這了,更多相關(guān)前端數(shù)據(jù)加密方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript判斷數(shù)字是否為質(zhì)數(shù)的方法匯總
這篇文章主要介紹了JavaScript判斷數(shù)字是否為質(zhì)數(shù)的方法匯總的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
js設(shè)置隨機(jī)切換背景圖片的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js設(shè)置隨機(jī)切換背景圖片的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
WebStorm中如何將自己的代碼上傳到github示例詳解
這篇文章主要介紹了WebStorm中如何將自己的代碼上傳到github,本文分步驟通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
JS實(shí)現(xiàn)單例模式的多種方案 ，本文稍加總結(jié)，列出了6種方式與大家分享，大體上將內(nèi)容分為了ES5（Function）與ES6（Class）實(shí)現(xiàn)兩種部分，對(duì)js單例模式相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2022-09-09
JS實(shí)現(xiàn)HTML頁(yè)面中動(dòng)態(tài)顯示當(dāng)前時(shí)間完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)HTML頁(yè)面中動(dòng)態(tài)顯示當(dāng)前時(shí)間,結(jié)合完整實(shí)例形式分析了JavaScript使用時(shí)間函數(shù)setTimeout及clearTimeout動(dòng)態(tài)顯示當(dāng)前時(shí)間相關(guān)操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細(xì)介紹了使用js實(shí)現(xiàn)瀑布流效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JS實(shí)現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
JavaScript中的this基本問(wèn)題實(shí)例小結(jié)
這篇文章主要介紹了JavaScript中的this基本問(wèn)題,結(jié)合實(shí)例形式總結(jié)分析了JavaScript中this的功能、常見用法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
小程序?qū)崿F(xiàn)授權(quán)登陸的解決方案
這篇文章主要介紹了小程序?qū)崿F(xiàn)授權(quán)登陸的解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
通過(guò)Javascript創(chuàng)建一個(gè)選擇文件的對(duì)話框代碼
通過(guò)Javascript創(chuàng)建一個(gè)選擇文件的對(duì)話框代碼，需要的朋友可以參考下2012-06-06