前端數(shù)據(jù)加密方式的常用6種使用最詳解
前言
相信大家在工作或面試中經(jīng)常遇到需要加密的功能，無論是 web 后臺(tái)還是小程序，都常常存在加解密傳輸，簽名防篡改等機(jī)制，會(huì)使很多滲透人員沒有辦法直接對(duì)參數(shù)的值進(jìn)行更改，大大增加了攻擊者的攻擊成本。下面我介紹前端6種常用的加密如何使用，如有不足之處，歡迎大家補(bǔ)充。
一、6種常用加密方案
1.Base64加密
簡(jiǎn)介
Base64顧名思義，就是基于64個(gè)可打印字符來表示二進(jìn)制數(shù)據(jù)的一種方法，「注意它并不是一種加密算法」。對(duì)于64個(gè)打印字符，我們只需要6個(gè)二進(jìn)制位就可以完全表示了。那么我們?nèi)绾卫?個(gè)二進(jìn)制位來表示只需要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è)可打印字符來表示。
如何使用
原生加解密
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)、不同語言的傳輸；
- 頁面中內(nèi)嵌使用 base64 格式的小圖片，可減少了服務(wù)器訪問次數(shù)；
- 二進(jìn)制位轉(zhuǎn)換 base64 算法簡(jiǎn)單，對(duì)性能影響不大；
缺點(diǎn)：
- 二進(jìn)制文件轉(zhuǎn)換為 base64 后，體積大概增加 1/3；
- base64 無法緩存，要緩存只能緩存包含 base64 的文件，比如 js 或者 css；
- 面對(duì)大文件時(shí)，會(huì)消耗一定的 CPU 進(jìn)行編解碼。
2.MD5加密（不可逆）
簡(jiǎn)介
MD5是一種單向哈希算法，即將任意長(zhǎng)度的“消息”經(jīng)過哈希運(yùn)算，生成一個(gè)128位的“指紋”。
使用MD5加密可以將原始的字符串轉(zhuǎn)化為不可逆的密文，從而保證數(shù)據(jù)在傳輸中不被篡改，提高安全性。在前端中，我們可以通過JS庫調(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é)果。 通過加鹽可以降低被破解的風(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)站頁面登錄password加密，版權(quán)驗(yàn)證，文件上傳比較。
3.sha256加密
簡(jiǎn)介
SHA256是SHA-2下細(xì)分出的一種算法SHA-2，名稱來自于安全散列算法2（英語：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)制字符串來表示。
如何使用
安裝
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)證代碼）的過程。
如何使用
sha1的加密和sha256，AES用的函數(shù)庫都可以是crypto-js，因此我們主要裝了crypto-js，這三個(gè)加密方式都可以引入使用，當(dāng)然你也可以用npm上單獨(dú)依賴庫，這里只用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)景
最常見的頁面簽名。
6.字符串的編碼和解碼
escape編碼 unescape解碼
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Test',
setup() {
let str = '富朝陽的前端博客';
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)文章
一個(gè)不錯(cuò)的js html頁面倒計(jì)時(shí)可精確到秒
這篇文章主要介紹了一個(gè)不錯(cuò)的js html頁面倒計(jì)時(shí)可精確到秒,很簡(jiǎn)單，但和實(shí)用，需要的朋友可以參考下2014-10-10
這篇文章主要介紹了JS ES6多行字符串與連接字符串的表示方法,結(jié)合具體實(shí)例形式對(duì)比分析了ES6中的多行字符串與連接字符串的表示方法與相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
單擊按鈕實(shí)現(xiàn)顯示隱藏子菜單很經(jīng)典的一個(gè)案例，接下來為您呈現(xiàn)代碼，需要了解的朋友可以參考下2013-01-01
JavaScript:void(0)用法及一些常見問題解決辦法
這篇文章主要介紹了javascript:void(0)在JavaScript中的用法,探討了其防止鏈接默認(rèn)行為的作用,提供了使用示例,并針對(duì)常見問題如與#的區(qū)別、事件綁定和鍵盤訪問進(jìn)行了講解,需要的朋友可以參考下2024-12-12
這篇文章主要為大家詳細(xì)介紹了js彈出窗口的簡(jiǎn)單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
javascript得到XML某節(jié)點(diǎn)的子節(jié)點(diǎn)個(gè)數(shù)的腳本
得到XML某節(jié)點(diǎn)（pnode）的子節(jié)點(diǎn)個(gè)數(shù)（客戶端）2008-10-10
three.js如何實(shí)現(xiàn)3D動(dòng)態(tài)文字效果
這篇文章主要給大家介紹了關(guān)于three.js如何實(shí)現(xiàn)3D動(dòng)態(tài)文字效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
js常用系統(tǒng)函數(shù)用法實(shí)例分析
這篇文章主要介紹了js常用系統(tǒng)函數(shù)用法,實(shí)例分析了escape、parseInt、parseFloat、isNaN、isFinite等函數(shù)的用法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
今天在群里看到有人要幻燈片的代碼，于是我自己也想了想，做個(gè)總結(jié)。常見的幻燈片切換無非就是輪播和漸變，不管哪種都是用定時(shí)器來逐步改變圖片或者圖片組的某種屬性來實(shí)現(xiàn)的2011-12-12
基于JavaScript實(shí)現(xiàn)輪播圖代碼
在前端程序開發(fā)中，經(jīng)常會(huì)實(shí)現(xiàn)js輪播圖的效果，怎么實(shí)現(xiàn)的呢？下面小編給大家分享基于基于JavaScript實(shí)現(xiàn)輪播圖代碼 ，非常不錯(cuò)，感興趣的朋友可以參考下2016-07-07