【整理】js逆向工程

JavaScript逆向工程（ReverseEngineering）是指分析和理解已编译或已部署的JavaScript代码的过程，以便了解其工作原理、找到漏洞、进行修改或复制其功能。这个过程通常用于安全研究、调试、性能优化或破解某些软件。

注意： 逆向工程在某些情况下可能涉及法律问题，尤其是当用于破解版权保护的软件时。确保你的行为符合当地法律和行业准则。

以下是一些JavaScript逆向工程的基本步骤和技巧：

1. 收集信息

• 确定目标 ：确定你要逆向的JavaScript代码的位置。这可以是网页中的 <script>标签、外部JavaScript文件或嵌入在HTML中的内联脚本。
• 工具准备 ：准备必要的工具，如浏览器开发者工具（如Chrome DevTools）、文本编辑器（如VS Code）、JavaScript解析器或反编译器（如UglifyJS、JSNice）。

2. 获取代码

• 使用浏览器开发者工具 ：在浏览器中打开目标网页，使用开发者工具查看和下载JavaScript文件。
• 网络请求拦截 ：使用工具如Fiddler、Wireshark或浏览器的网络监视功能拦截和保存JavaScript文件的网络请求。

3. 分析代码

• 格式化代码 ：如果代码是压缩或混淆的，使用工具如Prettier、Beautify或在线JavaScript格式化工具将代码格式化，使其更易读。
• 理解代码逻辑 ：逐行阅读代码，理解其逻辑、函数、变量和数据流。
• 调试 ：在浏览器中设置断点，使用开发者工具的调试功能逐步执行代码，观察变量值和程序行为。

4. 逆向特定功能

• 查找入口点 ：确定你感兴趣的特定功能的入口点，如事件监听器、定时器回调或特定的函数调用。
• 跟踪执行路径 ：从入口点开始，跟踪代码的执行路径，理解它是如何处理输入、执行逻辑并产生输出的。
• 提取逻辑 ：一旦理解了特定功能的逻辑，你可以尝试将其提取出来，以便在其他地方重用或分析。

5. 修改或复制功能

• 手动修改 ：如果你需要修改代码的功能，可以在开发者工具中直接编辑代码，然后观察效果。
• 自动化工具 ：对于更复杂的修改，你可以编写脚本来自动化这个过程，或使用工具如Tampermonkey/Greasemonkey来创建用户脚本。
• 重建项目 ：如果目标是完全复制功能，你可能需要重建整个逻辑，包括HTML、CSS和JavaScript，以确保在新的环境中正确工作。

6. 法律和道德考虑

• 版权法 ：确保你的逆向工程活动不违反任何版权法。通常，逆向工程用于合法的调试、兼容性分析或安全评估是合法的。
• 隐私和保密 ：尊重用户的隐私和数据的保密性，不要泄露敏感信息。
• 道德准则 ：遵循道德准则，不要滥用逆向工程技能进行恶意活动。

示例工具

• Chrome DevTools ：用于查看、调试和修改网页上的JavaScript代码。
• Firefox Developer Tools ：与Chrome DevTools类似，但提供了不同的调试和性能分析工具。
• Prettier ：用于代码美化和格式化。
• JSNice ：用于分析和理解混淆的JavaScript代码。
• Tampermonkey/Greasemonkey ：用于创建和管理用户脚本，以修改网页行为。

通过遵循这些步骤和技巧，你可以更有效地进行JavaScript逆向工程。然而，始终要牢记法律和道德约束，确保你的活动合法且正当。

JavaScript逆向时，常用hook方法

在逆向分析JavaScript代码时，开发者经常使用一些用于hook（钩子）的技术来监视或修改程序的行为。以下是一些常用的hook技术及其示例代码。

01、dom操作

在JS逆向油猴脚本中，DOM操作是最常用的一种Hook方式。通过修改DOM元素的属性和样式，我们可以实现对网页的控制和修改。

// 修改DOM元素的属性document.getElementById('elementId').setAttribute('attrName', 'attrValue'); // 修改DOM元素的样式
document.getElementById('elementId').style.property = 'value';

02、Cookie操作

Cookie Hook 用于定位 Cookie 中关键参数生成位置，以下代码演示了当 Cookie 中匹配到了 __dfp 关键字， 则插入断点：

<script>
  (function () {
    'use strict';
    var cookieTemp = '';
    Object.defineProperty(document, 'cookie', {
      set: function (val) {
        if (val.indexOf('__dfp') != -1) {
          debugger;
        }
        console.log('Hook捕获到cookie设置->', val);
        cookieTemp = val; return val;
      },
      get: function () {
        return cookieTemp;
      },
    });
  })();
  (function () {
    'use strict';
    var org = document.cookie.__lookupSetter__('cookie');
    document.__defineSetter__('cookie', function (cookie) {
      if (cookie.indexOf('__dfp') != -1) {
        debugger;
      }
      org = cookie;
    });
    document.__defineGetter__('cookie', function () {
      return org;
    });
  })();
</script>

03、事件监听操作

事件监听也是JS逆向油猴脚本中常用的一种Hook方式。通过监听网页上的事件，我们可以触发自定义的操作和行为。

<script>
  // 监听按钮点击事件
  document.getElementById('buttonId').addEventListener('click', function () {
    // 自定义操作和行为
  });
</script>

04、AJAX拦截操作

AJAX拦截也是JS逆向油猴脚本中常用的一种Hook方式。通过拦截网页上的AJAX请求，我们可以实现对数据的控制和修改。

<script>
  // 拦截AJAX请求
  XMLHttpRequest.prototype._send = XMLHttpRequest.prototype.send;
  XMLHttpRequest.prototype.send = function () {
    // 自定义操作和行为
    this._send.apply(this, arguments);
  };
</script>

05、函数替换操作

函数替换也是JS逆向油猴脚本中常用的一种Hook方式。通过替换网页上的函数，我们可以实现对函数的控制和修改。

<script>
  // 替换原有函数
  var originalFunction = window.functionName;
  window.functionName = function () {
    // 自定义操作和行为
    originalFunction.apply(this, arguments);
  };
</script>

06、Header操作

Header Hook 用于定位 Header 中关键参数生成位置，以下代码演示了当 Header 中包含 Authorization 关键字时，则插入断点：

<script>
  (function () {
    var org = window.XMLHttpRequest.prototype.setRequestHeader;
    window.XMLHttpRequest.prototype.setRequestHeader = function (key, value) {
      if (key == 'Authorization') {
        debugger;
      }
      return org.apply(this, arguments);
    };
  })()
</script>

07、URL操作

URL Hook 用于定位请求 URL 中关键参数生成位置，以下代码演示了当请求的 URL 里包含 login 关键字时，则插入断点：

<script>
  (function () {
    var open = window.XMLHttpRequest.prototype.open;
    window.XMLHttpRequest.prototype.open = function (method, url, async) {
      if (url.indexOf("login") != 1) {
        debugger;
      } return open.apply(this, arguments);
    };
  })();
</script>

08、JSON.stringify操作

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串，在某些站点的加密过程中可能会遇到，以下代码演示了遇到 JSON.stringify() 时，则插入断点：

<script>
 (function() {
    var stringify = JSON.stringify;
    JSON.stringify = function(params) {
        console.log("Hook JSON.stringify ------> ", params);
        debugger;
        return stringify(params);
    }
})();
</script>

09、JSON.parse操作

JSON.parse() 方法用于将一个 JSON 字符串转换为对象，在某些站点的加密过程中可能会遇到，以下代码演示了遇到 JSON.parse() 时，则插入断点：

(function() {
    var parse = JSON.parse;
    JSON.parse = function(params) {
        console.log("Hook JSON.parse ------> ", params);
        debugger;
        return parse(params);
    }
})();

10、eval操作

JavaScript eval() 函数的作用是计算 JavaScript 字符串，并把它作为 脚本代码来执行。如果参数是一个表达式，eval() 函数将执行表达式。如果参数是 Javascript 语句，eval() 将执行 Javascript 语句，经常被用来动态执行 JS。以下代码执行后，之后所有的 eval() 操作都会在控制台打印输出将要执行的 JS 源码：

(function() {
    // 保存原始方法
    window.__cr_eval = window.eval;
    // 重写 eval
    var myeval = function(src) {
        console.log(src);
        console.log("=============== eval end ===============");
        debugger;
        return window.__cr_eval(src);
    }
    // 屏蔽 JS 中对原生函数 native 属性的检测
    var _myeval = myeval.bind(null);
    _myeval.toString = window.__cr_eval.toString;
    Object.defineProperty(window, 'eval', {
        value: _myeval
    });
})();

11、Function操作

以下代码执行后，所有的函数操作都会在控制台打印输出将要执行的 JS 源码：

(function() {
    // 保存原始方法
    window.__cr_fun = window.Function;
    // 重写 function
    var myfun = function() {
        var args = Array.prototype.slice.call(arguments, 0, -1).join(","),
            src = arguments[arguments.length - 1];
        console.log(src);
        console.log("=============== Function end ===============");
        debugger;
        return window.__cr_fun.apply(this, arguments);
    }
    // 屏蔽js中对原生函数native属性的检测
    myfun.toString = function() {
        return window.__cr_fun + ""
    }
    Object.defineProperty(window, 'Function', {
        value: myfun
    });
})();