前端加密解密技术：使用Firefox调试工具分析加密过程

1. 前言

随着等保2.0的实施，传输过程中的数据加密变得必要。许多APP或手机浏览器端采用了加密措施来保护数据传输安全。本文将详细介绍如何使用Firefox浏览器调试工具来分析前端加密过程，特别是针对RSA加密的实现。

2. 准备工作

• Firefox浏览器（推荐使用最新版本）
• 开发者工具（快捷键Ctrl+F12）
• 目标网站（需要分析加密过程的网站）

3. 分析流程

3.1 定位关键元素

1. 打开目标网页，找到关键按钮（如"登录"、"发送"等）
2. 右键点击按钮，选择"查看元素"
3. Firefox会定位到该元素的HTML结构

3.2 分析事件绑定

1. 在开发者工具中，查看该按钮绑定的事件
2. 通常会有click事件绑定，可能使用jQuery语法如：

   $('#button_id').click(function(){...})
   

3.3 分析点击事件代码

示例代码分析：

function() {
    if (!$(this).prop('disabled')) {
        var mobilenum = /^(13[0-9]|15[0-9]|16[0-9]|17[013678]|18[0-9]|19[0-9]|14[57])[0-9]{8}$/;
        var mob = $('.row input').eq(3).val().replace(/\s/g, '')
        if (!mobilenum.test(mob)) {
            $('#modal-error').modal('show').children('.error-content').children('.modal-body').html('请输入有效的手机号');
            return;
        }
        if (needImg) {
            $('#modal-input').modal('show');
            $('#modal-input .msg-code-img').eq(0).click();
            var $_input = $('#modal-input input')[0];
            setTimeout(function() {
                $_input.focus();
            }, 500);
        } else {
            var params = {
                'MOBILE': $('.row input').eq(3).val().replace(/\s/g, '')
            };
            getPhoneCode(params);
        }
    }
}

关键点：

• 17-20行构造了一个params对象并传入getPhoneCode函数
• params对象包含手机号参数

3.4 跟踪getPhoneCode函数

function getPhoneCode(params) {
    if (!$('#msg-btn').prop("disabled")) {
        $('#msg-btn').prop("disabled", true);
        params['ajaxUrl'] = "/user2/sendSmsCode";
        params['ajaxCallBack'] = function(data) {
            // 回调处理逻辑
        }
        submitAjax(params);
    }
}

关键点：

• 添加了ajaxUrl和ajaxCallBack到params对象
• 最终调用submitAjax函数

3.5 分析submitAjax函数

var submitAjax = function(dataObject) {
    var ajaxUrl = UC_URL + dataObject.ajaxUrl;
    delete dataObject.ajaxUrl;
    var ajaxCallBack = dataObject.ajaxCallBack;
    delete dataObject.ajaxCallBack;
    dataObject.CHNLID = dataStore.getItem("CHNLID");
    dataObject.BACKURL = unescape(Base64.decode(dataStore.getItem("backUrl")));
    dataObject.VERSION = "1.32";
    
    if (null != dataObject.BACKURL) {
        dataObject.BACKURL = getDomain(dataObject.BACKURL);
    }
    if (null == dataObject.CHNLID && null == dataObject.BACKURL) {
        dataObject.CHNLID = 'SF';
        dataObject.BACKURL = location.host;
    }
    
    var JsonParams = JSON.stringify(dataObject);
    
    var rsaCommit = function(JsonParams) {
        var RSAParams = RSAUtils.encryptedString(rsaKey, JsonParams);
        $.ajax({
            type: "POST",
            cache: false,
            dataType: "json",
            url: ajaxUrl,
            contentType: 'text/plain',
            data: RSAParams,
            // ... 其他ajax参数
        });
    }
    // ... 其他代码
}

关键点：

1. 添加了CHNLID、BACKURL和VERSION等参数
2. 使用JSON.stringify将对象序列化为字符串
3. 调用RSAUtils.encryptedString进行加密
4. 通过ajax发送加密后的数据

3.6 调试加密过程

1. 在关键位置设置断点：

   • JSON.stringify之前
   • RSAUtils.encryptedString调用处

2. 观察变量值：

   • dataObject对象内容
   • JsonParams字符串
   • rsaKey值（本例中为undefined）

3. 分析加密函数：

   RSAUtils.encryptedString(rsaKey, JsonParams);
   

   虽然rsaKey为undefined，但实际加密可能使用了其他方式获取的密钥

4. 构造加密参数

通过分析，可以构造自己的参数：

var my = {
    MOBILE: "15012345678",
    CHNLID: "SF",
    BACKURL: "example.com.cn",
    VERSION: "1.32"
};
var data = JSON.stringify(my);
var rsaKey; // 实际应用中应有有效值
var encryptedData = RSAUtils.encryptedString(rsaKey, data);

5. 安全建议

5.1 对开发者的建议

1. 全面混淆：不仅混淆核心逻辑，也要混淆所有JS文件
2. 密钥管理：不要在前端暴露加密密钥
3. 增加复杂度：
   • 使用多个token混淆
   • 采用JS和浏览器hack技术增加分析难度
4. 代码压缩：减少可读性同时节省带宽

5.2 对安全分析师的建议

1. 使用Tamper Data等插件分析数据流
2. 编写自定义脚本反射对象属性
3. 关注关键函数调用链
4. 分析加密前后的数据变化

6. 总结

通过Firefox开发者工具，我们可以：

1. 定位关键元素和事件
2. 跟踪函数调用链
3. 分析加密过程
4. 构造自定义参数

前端加密虽然增加了分析难度，但通过系统性的调试和分析，仍然可以理解其加密逻辑并构造所需参数。对于开发者而言，应该采用更全面的安全措施来提高前端安全性。