場景

在開發過程中，我們會經常會從當前系統跳轉別的系統進行訪問或者頁面嵌套使用。

那一般都會給到一個地址進行參數拼接，然後去訪問。那麼會存在一個問題，就是地址暴露在外面參數使用明文的話會被篡改，極度不安全。

這個時候我們就考慮到加密，前端和後端協定好一種加密方式，然後前端進行參數加密傳到後端，後端再去解密（可逆）。

加密方式也有很多種，今天我推薦的是一款強大的前端加密/解密js庫——crypto-js。

crypto-js是什麼

crypto-js 是一個純 javascript 寫的加密算法類庫 ，可以非常方便地在 javascript 進行 MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列，進行 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");

頁面標籤引入方法：

<script type="text/javascript" src="path-to/bower_components/crypto-js/crypto-js.js"></script>
<script type="text/javascript">
    var encrypted = CryptoJS.AES(...);
    var encrypted = CryptoJS.SHA256(...);
</script>

項目中使用實例

這裡我以 React作為例子，其他的也就大同小異了。

第一步：封裝工具類

我們可以寫一個工具類，專門封裝加密解密的方法，比如我新建一個cryptoAES.js的文件，放在utils 目錄下（放哪無所謂），代碼如下：

const CryptoJS = require('crypto-js');  //引用AES源碼js
    
const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");  //十六位十六進制數作為密鑰
const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412');   //十六位十六進制數作為密鑰偏移量

//解密方法
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 是密鑰偏移量，這兩個參數前後端協定好保持一致，相當是我們的小秘密，不能告訴別人，不然加密的意義就沒了。

值得注意的是密鑰的長度，由於對稱解密使用的算法是 AES-128-CBC算法，數據採用 PKCS#7 填充 ， 因此這裡的 key 需要為16位！

接着我們定義了 解密方法Decrypt 和 加密方法 Encrypt ，最後通過 export 和default 將其暴露出去，方便在需要的時候進行引入….

工具類寫好了，很簡單，然後是怎麼使用了~

第二步：使用工具類

我們有一個index.tsx文件，在這裡面使用加密和解密的方法。

這裡我只演示加密，解密同理。

import { Decrypt, Encrypt } from '/utils /cryptoAES.js';
.
.
//比如我組裝好了拼接的參數
const str = '103170,112425366,253.00,20210428173700'
Encrypt(str)

加密後的結果是：

hoDfJ9U+uY+v8wYKdudbTUR+Z7g1Ui9YraVhfD9g2fMipYlFxnoLE0qbf+YsnEuk

這裡有個問題，加密後的字符串裡面是包含了+號，發送的話，在進行地址解析時，會把 + 號轉換為 空格， 直接導致參數不能正確傳輸，所以我們用到了JS的encodeURIComponent()，將所有的 + 號 手動轉換為 %2B 即可正常傳輸。

encodeURIComponent(str)
//返回新結果
hoDfJ9U%2BuY%2Bv8wYKdudbTUR%2BZ7g1Ui9YraVhfD9g2fMipYlFxnoLE0qbf%2BYsnEuk

好了，一個簡單的前端加密的過程就寫完了。

總結

使用加密的場景有很多，我這裡只講述了URL地址加密的場景，簡單總結下：

第一步：安裝crypto-js

第二步：引入crypto-js

第三步：封裝工具類（當然也可以直接使用）

第四步：調用工具類

第五步：使用encodeURIComponent方法轉碼，然後拼接

當然，這個是最基礎的用法，想深入可查看官方文檔！

結尾：希望小凡的每篇文章對你都有所幫助！