Как перехватить вызов функции в JavaScript

Как просто сделать удобный дебаг и не лазить в код или как бородатые хакеры перехватывают ajax-запросы, нарушая вашу безопасность.

Listener вызова метода у объекта

Допустим, у нас есть объект app, у него есть метод doStaf() и нам нужно узнать, что приходит ему на вход.

Для этого нам необходимо выполнить следующий код:

(function(doStaf) {

   app.doStaf = function() {

       // здесь выводим все аргументы, с которыми был вызван app.doStaf()
       console.log('app.doStaf args', arguments);
                
       return doStaf.apply(this, arguments);
   };
    
})(app.doStaf);

Данный код используя анонимную функцию переопределяет app.doStaf() функцией, в которой мы выполняем нужные нам манипуляции с аргументами, после чего вызываем прежний app.doStaf(), сохранившийся в замыкании.

Далее, для удобства, завернем весь этот код в функцию:

function listenCall (method, callback, obj) {
    if (typeof method !== "string" || typeof callback !== "function") return;
        
    obj = obj || window;
            
    (function(objMethod) {

        obj[method] = function() {
            try {
                callback.apply(obj, arguments);
            } catch (e) {}
                
            return objMethod.apply(obj, arguments);
        };
    
    })(obj[method]);
}

Обратите внимание на порядок аргументов: первым передаем строку-название метода или функции, которую нужно слушать (перехватить), вторым — колбэк, который нужно выполнить на вызов функции или метода и только третим передаем объект, метод которого нужно перехватить. Так сделано, потому что 3-й параметр — не обязательный и если его нет, то метод будет браться из объекта window.

Данная функция может перехватить вызов только глобально объявленых объектов или функций.

Так же вызов callback завернут в try. Это нужно для того, что бы не сломать выполнение функции в случае, если в вашем коде возникнут ошибки.

Перехват ajax-запроса

На завершение, используя описанную выше функцию, перехватим вызов любого ajax-запроса, повешав слушатель метода send() на объекте xmlHttpRequest:

listenCall('send', function () {

    // запрос получил ответ
    if (this.readyState == 4) {

        console.log('Запрос успешно перехвачен!');
        
    }

}, xmlHttpRequest);

Теперь, имея необходимые навыки, вы можете перехватывать как вызовы console.log(), так и, к примеру… запросы внутри платежной системы.

Этот текст был написан несколько лет назад. С тех пор упомянутые здесь инструменты и софт могли получить обновления. Пожалуйста, проверяйте их актуальность.