哈嘍，我是樹醬。在平時(shí)開發(fā)過程中，你有沒有遇到過跟后端對(duì)線的時(shí)候，后端說：

• “切圖仔，這個(gè)接口的數(shù)據(jù)需要加密”
• “切圖仔，這個(gè)接口返回?cái)?shù)據(jù)需要解密”

那么到底哪些場(chǎng)景需要加對(duì)接口數(shù)據(jù)進(jìn)行加密或解密？

場(chǎng)景一：登陸

在數(shù)據(jù)安全背景下，大部分的登陸接口都需要客戶端將用戶的用戶名、密碼等信息進(jìn)行加密。

舉個(gè)場(chǎng)景：為了安全起見，后端告知前端調(diào)登陸接口的時(shí)候，需要先對(duì)用戶的登陸信息進(jìn)行AES加密。

我們用接口管理工具Apifox驗(yàn)證一下：

Apifox是一款國(guó)產(chǎn)熱度火很高的接口管神器，支持前置操作、后置操作，一般情況下，在發(fā)送請(qǐng)求前需要對(duì)接口的數(shù)據(jù)做進(jìn)一步處理，我們可以通過在前置操作中添加腳本對(duì)用戶登陸數(shù)據(jù)進(jìn)行加密處理

那如何通過Apifox的前置操作對(duì)密碼進(jìn)行加密？

首先，在調(diào)試接口的body中定義以下字段

• password：存儲(chǔ)加密后的數(shù)據(jù)，并設(shè)置變量 {{password}}
• password2：定義加密前的原始數(shù)據(jù)

接下來我們?cè)谇爸貌僮髅姘逯?，編寫前置腳本。同時(shí)Apifox內(nèi)置了crypto-js?庫，基本可以實(shí)現(xiàn)各種加密、解密算法。本次使用的是AES算法 步驟如下：

1.引入crypto-js內(nèi)置庫

2.通過pm.request.body.formdata 獲取 password2參數(shù)

3.對(duì)數(shù)據(jù)進(jìn)行加密

var cryptoJs = require("crypto-js");
const password2 = pm.request.body.formdata.get("password2")
const key = cryptoJs.enc.Utf8.parse('******');
const iv = cryptoJs.enc.Utf8.parse('******');
const encrypted = cryptoJs.AES.encrypt(password2, key, {
  iv: iv,
  mode: cryptoJs.mode.CBC,
  padding: cryptoJs.pad.Pkcs7
});

完成以上步驟，即可對(duì)數(shù)據(jù)進(jìn)行加密處理。

場(chǎng)景二：接口簽名

接口簽名是接口請(qǐng)求的一種常見的場(chǎng)景，那為什么需要對(duì)接口進(jìn)行簽名？通常為了防止參數(shù)被篡改。

接口簽名，一般操作步驟是：

• 拼接成字符串: 按照請(qǐng)求參數(shù)名的字母升序排列非空請(qǐng)求參數(shù)，使用URL鍵值對(duì)的格式（即key1=value1&key2=value2…）拼接成字符串stringA；
• 拼接Secretkey：在stringA最后拼接上Secretkey得到字符串stringSignTemp；
• MD5加密: 對(duì)stringSignTemp進(jìn)行MD5運(yùn)算；
• 得到sign值:并將得到的字符串所有字符轉(zhuǎn)換為大寫，得到sign值。

這里以微信支付簽名為例子：

微信支付簽名

那在Apifox這個(gè)接口工具如何調(diào)試需要接口簽名的接口，我們可以怎么做？

以上面微信支付官方簽名demo，我們先定義好Query參數(shù) ：

然同樣在前置腳本中，編輯簽名腳本, 編寫完成后點(diǎn)擊發(fā)送可以看出右側(cè)的控制臺(tái)輸出了最終簽名的數(shù)據(jù)；

上圖中的腳本完整版如下 ：

// 獲取預(yù)先設(shè)置為環(huán)境變量的 APPKEY
let key = pm.environment.get("APPKEY");

// 存放所有需要用來簽名的參數(shù)
let param = {};

// 加入 query 參數(shù)
let queryParams = pm.request.url.query;
queryParams.each(item => {
    if (!item.disabled && item.value !== '') { // 啟用且非空參數(shù)值的參數(shù)才參與簽名
        param[item.key] = item.value;
    }
});

// 加入 body 參數(shù)
if (pm.request.body) {
    let formData;
    switch (pm.request.body.mode) {
        case 'formdata':
            formData = pm.request.body.formdata;
            break;
        default:
            break;
    }
    if (formData) {
        formData.each(item => {
            if (!item.disabled && item.value !== '') { // 啟用且非空參數(shù)值的參數(shù)才參與簽名
                param[item.key] = item.value;
            }
        });
    }
}


// 取 key
let keys = [];
for (let key in param) {
    // 注意這里，要剔除掉 sign 參數(shù)本身
    if (key !== 'sign') {
        keys.push(key);
    }
}

// 參數(shù)名 ASCII 碼從小到大排序（字典序）
keys.sort();

// 轉(zhuǎn)成鍵值對(duì)
let paramPair = [];
for (let i = 0, len = keys.length; i < len; i++) {
    let k = keys[i];
    paramPair.push(k + '=' + encodeURIComponent(param[k])) // urlencode 編碼
}

// 最后加上 key
paramPair.push("key=" + key);

// 拼接
let stringSignTemp = paramPair.join('&');
// console.log(stringSignTemp);

let sign = CryptoJS.MD5(stringSignTemp).toString().toUpperCase();
// console.log(sign);

// 方案一：直接修改接口請(qǐng)求的 query 參數(shù)，注入 sign，無需使用環(huán)境變量。
// 參考文檔：https://www.apifox.cn/help/app/scripts/examples/request-handle/
queryParams.upsert({
    key: 'sign',
    value: sign,
});

// 方案二：寫入環(huán)境變量，此方案需要在接口里設(shè)置參數(shù)引用環(huán)境變量
// pm.environment.set("SIGN", sign);

更詳細(xì)的操作可以參考官方文檔：Apifox 使用文檔 - 接口簽名。

場(chǎng)景三：解密返回?cái)?shù)據(jù)

當(dāng)下抓包工具方便開發(fā)排查問題的同時(shí)，也帶來一些新的隱患。數(shù)據(jù)明文暴露容易，接口內(nèi)容返回?cái)?shù)據(jù)加密成為一種基本的使用場(chǎng)景。

舉個(gè)例子：對(duì)我個(gè)人手機(jī)號(hào)碼進(jìn)行base64加密, 這里用的是：

const phoneNumber = '1591954****'
const wordArray = CryptoJS.enc.Utf8.parse(phoneNumber);
const base64 = CryptoJS.enc.Base64.stringify(wordArray);
//  MTU5MTk1NCoqKio=

你會(huì)得到一個(gè)字符串信息。

同樣我們?cè)诮涌诠芾砉ぞ逜pifox中可以對(duì)我上文加密后的個(gè)人信息進(jìn)行解密嗎？

可以的，這個(gè)時(shí)候我們使用的就不再是前文提到的前置腳本，而是后置腳本了。

這里我通過Apifox的Mock服務(wù)去返回上述的base64數(shù)據(jù)。

并且在后置操作定義腳本，對(duì)該數(shù)據(jù)進(jìn)行base64解密，腳本代碼實(shí)現(xiàn)如下：

最后

Apifox 是API 開發(fā)測(cè)試全流程集成工具，除了滿足上文提及的API調(diào)試、加密、解密、簽名等場(chǎng)景之外，還有很多功能包括：

• 支持?jǐn)?shù)據(jù)模型的可視化 API 文檔管理
• API 自動(dòng)化測(cè)試
• 零配置的 API 數(shù)據(jù) Mock
• 支持代碼自動(dòng)生成、CI 持續(xù)集成等等