目錄

前言

一、6種常用加密方案

1.Base64加密

2.MD5加密（不可逆）

3.sha256加密

4.sha1加密（相比于MD5 安全性高，但是?速度慢）

5.AES加密

6.字符串的編碼和解碼

二、結(jié)語

往期回顧

前言

相信大家在工作或面試中經(jīng)常遇到需要加密的功能，無論是 web 后臺還是小程序，都常常存在加解密傳輸，簽名防篡改等機(jī)制，會使很多滲透人員沒有辦法直接對參數(shù)的值進(jìn)行更改，大大增加了攻擊者的攻擊成本。下面我介紹前端6種常用的加密如何使用，如有不足之處，歡迎大家補(bǔ)充。

一、6種常用加密方案

1.Base64加密

簡介

Base64顧名思義，就是基于64個可打印字符來表示二進(jìn)制數(shù)據(jù)的一種方法，「注意它并不是一種加密算法」。對于64個打印字符，我們只需要6個二進(jìn)制位就可以完全表示了。那么我們?nèi)绾卫?個二進(jìn)制位來表示只需要6個二進(jìn)制位就可以完全表示的可打印字符呢？由于2的6次方等于64，所以我們可以將每6個位元為一個單元，對應(yīng)某個可打印字符。三個字節(jié)有24個位元，對應(yīng)于4個Base64單元，即3個字節(jié)需要用4個可打印字符來表示。

如何使用

原生加解密

  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)勢：

• base64 適合不同平臺、不同語言的傳輸；
• 頁面中內(nèi)嵌使用 base64 格式的小圖片，可減少了服務(wù)器訪問次數(shù)；
• 二進(jìn)制位轉(zhuǎn)換 base64 算法簡單，對性能影響不大；

缺點(diǎn)：

1. 二進(jìn)制文件轉(zhuǎn)換為 base64 后，體積大概增加 1/3；
2. base64 無法緩存，要緩存只能緩存包含 base64 的文件，比如 js 或者 css；
3. 面對大文件時，會消耗一定的 CPU 進(jìn)行編解碼。

2.MD5加密（不可逆）

簡介

MD5是一種單向哈希算法，即將任意長度的“消息”經(jīng)過哈希運(yùn)算，生成一個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ī)的字符串，這個字符串就是“鹽”。

比如如下加鹽加密：

<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'; // 定義一個隨機(jī)的鹽值
    console.log('加鹽后md5加密', md5('hello, my name is FuChaoyang' + salt));
  }
});
</script>

將"hello, my name is FuChaoyang"加上隨機(jī)字符串"AbC$123"后的結(jié)果。?通過加鹽可以降低被破解的風(fēng)險，增強(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'; // 定義一個隨機(jī)的鹽值
    console.log('加鹽后md5加密', md5('hello, my name is FuChaoyang' + salt));
    // MD5多次加密
    console.log('md5多次加密', md5(md5('hello, my name is FuChaoyang')));
  }
});
</script>

即對md5兩次加密后的結(jié)果?。

注意點(diǎn)

1. 不要使用固定密鑰

不要使用固定的密鑰進(jìn)行加密，否則容易被破解。應(yīng)該采用隨機(jī)密鑰或者動態(tài)生成密鑰進(jìn)行加密。

2. 不要將加密算法公開

不要將加密算法公開，否則可能會被攻擊者破解。應(yīng)該將加密算法保密，僅在需要的場合使用。

3. 不要只依賴前端加密

即使在前端進(jìn)行加密，也應(yīng)該在后端進(jìn)行加密驗(yàn)證，以增強(qiáng)應(yīng)用的安全性。

?使用場景

?最常見的網(wǎng)站頁面登錄password加密，版權(quán)驗(yàn)證，文件上傳比較。

3.sha256加密

簡介

SHA256是SHA-2下細(xì)分出的一種算法SHA-2，名稱來自于安全散列算法2（英語：Secure Hash Algorithm 2）的縮寫，一種密碼散列函數(shù)算法標(biāo)準(zhǔn)（哈希算法），由美國國家安全局研發(fā)，屬于SHA算法之一，是SHA-1的后繼者。

SHA-2下又可再分為六個不同的算法標(biāo)準(zhǔn)，包括了：SHA-224、SHA-256、SHA-384、SHA-512、SHA-512/224、SHA-512/256。這些變體除了生成摘要的長度 、循環(huán)運(yùn)行的次數(shù)等一些微小差異外，算法的基本結(jié)構(gòu)是一致的。對于任意長度的消息，SHA256都會產(chǎn)生一個256bit長的哈希值，稱作消息摘要。這個摘要相當(dāng)于是個長度為32個字節(jié)的數(shù)組，通常用一個長度為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)： 單向加密，不可解密，同明文，同密文。

使用場景?

?網(wǎng)站驗(yàn)證密碼，為了保證安全，不會儲存明文密碼，而是直接儲存 hash。

4.sha1加密（相比于MD5 安全性高，但是?速度慢）

簡介

SHA-1是一種數(shù)據(jù)加密算法，該算法的思想是接收一段明文，然后以一種不可逆的方式將它轉(zhuǎn)換成一段（通常更?。┟芪模部梢院唵蔚睦斫鉃槿∫淮斎氪a（稱為預(yù)映射或信息），并把它們轉(zhuǎn)化為長度較短、位數(shù)固定的輸出序列即散列值（也稱為信息摘要或信息認(rèn)證代碼）的過程。

如何使用

sha1的加密和sha256，AES用的函數(shù)庫都可以是crypto-js，因此我們主要裝了crypto-js，這三個加密方式都可以引入使用，當(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>

使用場景

?用戶密碼校驗(yàn)比較，文件的完成性比較，文件上傳，版權(quán)驗(yàn)證。

5.AES加密

簡介

AES是一種對稱加密算法，全稱為“高級加密標(biāo)準(zhǔn)”（Advanced Encryption Standard）。它是一個區(qū)塊加密算法，適用于大多數(shù)應(yīng)用場景，包括加密和解密，還可以在不同的平臺和設(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é)果展示。

使用場景

最常見的頁面簽名。

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)：對于漢字，數(shù)字不適用。?

二、結(jié)語

講到這里，相信大家對前端加密的6種方式有詳細(xì)的使用認(rèn)識，如有不足之處，請大家補(bǔ)充，歡迎在評論區(qū)交流。

如果文章對你有所幫助，??關(guān)注+點(diǎn)贊??鼓勵一下！博主會持續(xù)更新。。。。

我的個人博客：https://code-nav.top

往期回顧

?js對url進(jìn)行編碼解碼（三種方式）

Angular8升級至Angular13遇到的問題

前端性能優(yōu)化9大策略（面試一網(wǎng)打盡）！

JavaScript中的call、apply、 bind的用法、實(shí)現(xiàn)以及三者之間的區(qū)別？

?ES6實(shí)用的技巧和方法有哪些？

ES6 proxy 看這一篇就夠啦！

你確定你會reduce方法？

JS獲取地址欄參數(shù)的方法（原生、vue、angular、react）文章來源地址http://www.zghlxwxcb.cn/news/detail-807652.html

到了這里，關(guān)于前端常用6種數(shù)據(jù)加密方式的使用（最詳解）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！