JS前端接口请求参数混淆方案分享

写在前面

在一些接口请求的场景中，我们希望携带的数据不希望是以明文的方式提交的，也就是需要对参数做一些混淆或者加密处理，后端拿到数据后再进行解密，得到真实数据。

其目的是为了保护数据的安全，以及提高被识破成明文的门槛。在例如用户登录的接口请求中，如果账号和密码是以明文传输的，会容易导致一些安全性问题，同时，我们也不希望谁都可以伪造参数对接口发起请求，因此前端参数混淆非常有必要，这里分享一个自用的方案，其目的在于：

• 防止信息泄露
• 防止参数被随意篡改
• 提高应用安全性和稳定性

对于加密或者混淆的处理方式的选择，例如base64、md5等安全性不高或者不可逆的算法，不适用于我们这个场景，而是可以利用aes和rsa两者结合的方式，实现数据的加解密。

什么接口的参数需要做处理

从安全角度出发，这里一致认为，只要是对数据库有新增、修改、删除操作的，一律需要做混淆/加密，这一类接口，多为post、put、delete等请求。

而对于get请求，如果是规范化的接口，一般只是获取数据，不会对数据库有直接的操作，故不需要做参数处理。

当然还有post请求和一些文件上传等，不希望做参数处理的接口，需要特殊处理，以及在开发环境中，为了方便调试，也不需要做处理。

参数处理

因为rsa在处理数据量较大时优势不明显，适合处理数据量较小的场景，所以对参数数据的处理采用了aes加密，而参与加密的密钥key则采用rsa非对称加密提高破解难度。

涉及到的相关依赖及其版本号：

"crypto-js": "^4.1.1",
"jsencrypt": "^3.2.1"

这里使用的方案是，先将原始数据处理为query形式的字符串，然后将其使用随机字符串作为密钥，参与aes加密，并截取特定的字符串，作为原始密钥，再进行一次aes加密，最后将原始密钥使用与后端约定好的公钥进行rsa加密处理，具体流程和算法如下：

• 对参数排序、提取query字符串处理
• 将提取的字符串利用随机字符串加密并截取，得到密钥
• 利用密钥对原始参数进行aes加密
• 将密钥进行rsa非对称加密
• 输出最终的data和key

/**
* 加密请求数据
* @param {object} rawdata 原始数据
* @returns {data, key}
*/
export function encryptrequestdata(rawdata) {
 // 字典排序并赋值
 var result = {}, str = [], arr = object.keys(rawdata).sort();
 arr.map(m => { result[m] = rawdata[m] });
 // 处理成 query 形式字符串
 for (var p in result)
     result.hasownproperty(p) && str.push(encodeuricomponent(p) + "=" + encodeuricomponent(result[p]));
     result = str.join("&");
 // 参与 aes 加密的密钥，将处理后的字符串用 16 位随机码对称加密，再从第 3 位开始获取 16 位原始密钥
 const rawkey = aesencrypt(result, randomstring(16)).substr(3, 16);
 // 输出最后的加密参数
 const data = aesencrypt(json.stringify(rawdata), rawkey);
 const key = rsaencrypt(rawkey);
 return { data, key }
}

aes加密

/**
 * aes 加密
 * @param {string} data
 * @param {string} customer_key
 * @returns encrypted
 */
export function aesencrypt(data, customer_key = "") {
    var key = cryptojs.enc.utf8.parse(customer_key);
    var messagehex = cryptojs.enc.utf8.parse(data);
    var encrypted = cryptojs.aes.encrypt(messagehex, key, {
        "mode": cryptojs.mode.ecb,
        "padding": cryptojs.pad.pkcs7
    });
    return encrypted.tostring();
}

rsa加密

/**
 * rsa 加密
 */
export function rsaencrypt(rawdata) {
    let data;
    try {
        var rsa = new jsencrypt();
        rsa.setpublickey(publicpem);
        data = rsa.encrypt(rawdata)
    } catch (error) {
        return null
    }
    return data;
}

签名验证

如果需要进一步加强防篡改，可以在处理参数的时候，通过一定算法得出一个签名sign值，一并提交到后端，后端解密后，也通过同样的算法将解密后的数据生成一个sign值，与提交的作对比，判断是否为合法的请求来源。 这里不做详细介绍。

处理时机

我们需要在请求拦截的时候对参数做混淆处理，这里只针对post请求以及非本地环境，另外为了方便调试，除了开发环境外 在实例上还增加了uncrypt来标识哪些接口可以不参与处理。

// 请求拦截
instance.interceptors.request.use(
    config => {
        config.headers.contenttype = "application/x-www-form-urlencoded"
        const token = local.get('token')
        token && (config.headers.authorization = token)
        const { method, uncrypt = false, data = {} } = config;
        (method === 'post' && !uncrypt && cfg.node_env === 'development') && (config.data = encryptrequestdata(data));
        return config
    },
    error => promise.error(error)
)

后端实现

前端参数处理后以data和key组成的对象提交至后端，服务层接受后进行解密，这里以 egg.js 的实现为例子。 涉及依赖及其版本号：

"crypto-js": "^4.1.1",
"node-rsa": "^1.1.1"

rsa解密

// rsa 解密
rsadecrypt(data) {
    let dataobj;
    return new promise(function (resolve, reject) {
        // 私钥存放在app/extend/pem/private.pem
        fs.readfile('app/extend/pem/private.pem', function (err, pem) {
            const key = new nodersa(pem, 'pkcs8-private');
            key.setoptions({ encryptionscheme: 'pkcs1' });
            try {
                dataobj = key.decrypt(data, 'utf8');
            } catch (e) {
                const second = new nodersa(pem, 'pkcs8-private');
                try {
                    dataobj = second.decrypt(data, 'utf8');
                } catch (error) {
                    reject("rsa 解密失败");
                }
            }
            resolve(dataobj);
        });
    });
}

aes解密

// aes 解密
aesdecrypt(data, customer_key = "") {
    var key = cryptojs.enc.utf8.parse(customer_key || this.config.secret.aes.key);
    var decrypt = cryptojs.aes.decrypt(data, key, {
        "mode": cryptojs.mode.ecb,
        "padding": cryptojs.pad.pkcs7
    });
    return cryptojs.enc.utf8.stringify(decrypt);
}

处理中间件

新建解密处理的中间件app/middleware/security.js

module.exports = () => {
    return async function (ctx, next) {
        const { helper, request } = ctx;
        const { ajaxmsg } = helper;
        const { key, data } = request.body;
        if (!key || !data) return ajaxmsg(ctx, "-1", "请求参数错误", null, 400);
        let rawkey;
        try {
                rawkey = await helper.rsadecrypt(key);
        } catch (error) {
                return ajaxmsg(ctx, "-1", "密钥解析失败", null, 400)
        }
        if (!rawkey) return ajaxmsg(ctx, "-1", "密钥解析失败", null, 400);
        const decryptdata = json.parse(helper.aesdecrypt(data, rawkey));
        if (!decryptdata) return ajaxmsg(ctx, "-1", "安全验证未通过", null, 400);
        request.body = decryptdata;
        await next();
    };
};

路由中使用

const { router, controller, middleware } = app;
const security = middleware.security(); // 接口参数加密
router.post('/common/user/login', security, controller.common.user.login); // 登录

以上就是js前端接口请求参数混淆方案分享的详细内容，更多关于js前端接口请求参数混淆的资料请关注其它相关文章！