帶你玩轉(zhuǎn)接口管理工具加解密

作者：樹醬君 2022-09-14 18:23:01

開發(fā) 前端開發(fā)工具

在數(shù)據(jù)安全背景下，大部分的登陸接口都需要客戶端將用戶的用戶名、密碼等信息進行加密。舉個場景：為了安全起見，后端告知前端調(diào)登陸接口的時候，需要先對用戶的登陸信息進行AES加密。

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

“切圖仔，這個接口的數(shù)據(jù)需要加密”
“切圖仔，這個接口返回數(shù)據(jù)需要解密”

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

場景一：登陸

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

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

我們用接口管理工具Apifox驗證一下：

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

那如何通過Apifox的前置操作對密碼進行加密？

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

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

接下來我們在前置操作面板中，編寫前置腳本。同時Apifox內(nèi)置了crypto-js?庫，基本可以實現(xiàn)各種加密、解密算法。本次使用的是AES算法步驟如下：

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

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

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

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
});

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

場景二：接口簽名

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

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

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

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

微信支付簽名

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

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

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

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

// 獲取預先設置為環(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)成鍵值對
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);

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

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

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

場景三：解密返回數(shù)據(jù)

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

舉個例子：對我個人手機號碼進行base64加密, 這里用的是：

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