如何修改另一个函数接收到的 XMLHttpRequest 响应文本?

IT技术 javascript ajax xmlhttprequest monkeypatching
2021-02-22 20:53:22

我正在尝试修改我无法修改的函数接收到的 responseText。此函数创建了一个我可以附加到的 XMLHttpRequest,但是我无法以允许我在原始函数接收内容之前修改内容的方式“包装”responseText。

这是完整的原始函数:

function Mj(a, b, c, d, e) {
    function k() {
        4 == (m && 'readyState' in m ? m.readyState : 0) && b && ff(b) (m)
    }
    var m = new XMLHttpRequest;
    'onloadend' in m ? m.addEventListener('loadend', k, !1)  : m.onreadystatechange = k;
    c = ('GET').toUpperCase();
    d = d || '';
    m.open(c, a, !0);
    m.send(d);
    return m
}
function ff(a) {
    return a && window ? function () {
        try {
            return a.apply(this, arguments)
        } catch(b) {
            throw jf(b),
                b;
        }
    } : a
}

我也试图操纵接收函数 k(); 试图达到我的目标,但由于它不依赖于传递给函数的任何数据(例如 k(a.responseText);),我没有成功。

有什么办法可以实现这一目标吗?我不想使用 js 库(例如 jQuery);


编辑:我知道我不能直接更改 .responseText 因为它是只读的,但我试图找到一种方法来更改响应和接收函数之间的内容。


EDIT2:在我尝试拦截和更改从这里添加的 .responseText 的方法之一下面添加:Monkey patch XMLHTTPRequest.onreadystatechange

(function (open) {
XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {
    if(/results/.test(url)) {
      console.log(this.onreadystatechange);
        this.addEventListener("readystatechange", function () {
            console.log('readystate: ' + this.readyState);
            if(this.responseText !== '') {
                this.responseText = this.responseText.split('&')[0];
            }
        }, false);
    }
    open.call(this, method, url, async, user, pass);
};
})(XMLHttpRequest.prototype.open);

EDIT3:我忘了包括函数 Mj 和 ff 不是全局可用的,它们都包含在一个匿名函数中(function(){functions are here})();


EDIT4:我已经更改了接受的答案,因为 AmmarCSE 没有任何与 jfriend00 的答案相关的问题和复杂性。

简而言之,最佳答案如下:

侦听您要修改的任何请求(确保您的侦听器会在原始函数目标执行之前拦截它,否则在响应已被使用后修改它是没有意义的)。

将原始响应(如果要修改)保存在临时变量中

将您要修改的属性更改为“writable: true”,它将擦除它所具有的任何值。在我的情况下,我使用

Object.defineProperty(event, 'responseText', {
    writable: true
});

event监听xhr请求loadorreadystatechange事件返回的对象在哪里

现在你可以为你的响应设置任何你想要的,如果你只想修改原始响应,那么你可以使用临时变量中的数据,然后将修改保存在响应中。

6个回答

编辑:请参阅下面的第二个代码选项(它经过测试并有效)。第一个有一些限制。


由于您无法修改任何这些函数,因此您似乎必须遵循 XMLHttpRequest 原型。这是一个想法(未经测试,但您可以看到方向):

(function() {
    var open = XMLHttpRequest.prototype.open;

    XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
        var oldReady;
        if (async) {   
            oldReady = this.onreadystatechange;
            // override onReadyStateChange
            this.onreadystatechange = function() {
                if (this.readyState == 4) {
                    // this.responseText is the ajax result
                    // create a dummay ajax object so we can modify responseText
                    var self = this;
                    var dummy = {};
                    ["statusText", "status", "readyState", "responseType"].forEach(function(item) {
                        dummy[item] = self[item];
                    });
                    dummy.responseText = '{"msg": "Hello"}';
                    return oldReady.call(dummy);
                } else {
                    // call original onreadystatechange handler
                    return oldReady.apply(this, arguments);
                }
            }
        } 
        // call original open method
        return open.apply(this, arguments);
    }

})();

这会为 XMLHttpRequestopen()方法做一个猴子补丁,然后当它被异步请求调用时,它会为 onReadyStateChange 处理程序做一个猴子补丁,因为它应该已经被设置了。然后,在调用原始 onReadyStateChange 处理程序之前,该修补函数可以查看 responseText,因此它可以为其分配不同的值。

并且,最后因为它.responseText是仅就绪的,所以在调用onreadystatechange处理程序之前替换了一个虚拟的 XMLHttpResponse 对象这不会在所有情况下都有效,但如果 onreadystatechange 处理程序用于this.responseText获取响应,则会起作用


并且,这里尝试将 XMLHttpRequest 对象重新定义为我们自己的代理对象。因为它是我们自己的代理对象,所以我们可以将responseText属性设置为我们想要的任何值。对于除 之外的所有其他属性onreadystatechange,该对象只是将 get、set 或函数调用转发到真正的 XMLHttpRequest 对象。

(function() {
    // create XMLHttpRequest proxy object
    var oldXMLHttpRequest = XMLHttpRequest;

    // define constructor for my proxy object
    XMLHttpRequest = function() {
        var actual = new oldXMLHttpRequest();
        var self = this;

        this.onreadystatechange = null;

        // this is the actual handler on the real XMLHttpRequest object
        actual.onreadystatechange = function() {
            if (this.readyState == 4) {
                // actual.responseText is the ajax result

                // add your own code here to read the real ajax result
                // from actual.responseText and then put whatever result you want
                // the caller to see in self.responseText
                // this next line of code is a dummy line to be replaced
                self.responseText = '{"msg": "Hello"}';
            }
            if (self.onreadystatechange) {
                return self.onreadystatechange();
            }
        };

        // add all proxy getters
        ["status", "statusText", "responseType", "response",
         "readyState", "responseXML", "upload"].forEach(function(item) {
            Object.defineProperty(self, item, {
                get: function() {return actual[item];}
            });
        });

        // add all proxy getters/setters
        ["ontimeout, timeout", "withCredentials", "onload", "onerror", "onprogress"].forEach(function(item) {
            Object.defineProperty(self, item, {
                get: function() {return actual[item];},
                set: function(val) {actual[item] = val;}
            });
        });

        // add all pure proxy pass-through methods
        ["addEventListener", "send", "open", "abort", "getAllResponseHeaders",
         "getResponseHeader", "overrideMimeType", "setRequestHeader"].forEach(function(item) {
            Object.defineProperty(self, item, {
                value: function() {return actual[item].apply(actual, arguments);}
            });
        });
    }
})();

工作演示:http : //jsfiddle.net/jfriend00/jws6g691/

我在最新版本的 IE、Firefox 和 Chrome 中尝试过它,它可以处理一个简单的 ajax 请求。

注意:我还没有研究 Ajax 的所有高级方法(如二进制数据、上传等...),以查看该代理是否足够彻底以完成所有这些工作(我猜它可能还没有没有进一步的工作,但它适用于基本请求,所以看起来这个概念是有能力的)。


其他失败的尝试:

  1. 尝试从 XMLHttpRequest 对象派生,然后用我自己的构造函数替换构造函数,但这不起作用,因为真正的 XMLHttpRequest 函数不会让您将其作为函数调用来初始化我的派生对象。

  2. 尝试覆盖onreadystatechange处理程序并更改.responseText,但该字段是只读的,因此您无法更改它。

  3. 尝试创建一个this在调用时作为对象发送的虚拟对象onreadystatechange,但很多代码没有引用this,而是将实际对象保存在闭包中的局部变量中 - 从而击败了虚拟对象。

@Shadow - 在我的答案中查看我的第二个代码块。我创建了一个代理对象,用我自己的代理对象构造函数替换了 XMLHttpRequest 构造函数,然后允许我修改.responseText.
2021-04-25 20:53:22
@Shadow - 这是一个更安全的版本(特别是供将来使用),它代理 XMLHttpRequest 对象上的所有属性(通过迭代它们)而不是仅列出特定的属性列表:jsfiddle.net/jfriend00/banxvu2c
2021-04-25 20:53:22
但是我无法为 responseText 分配新值,因为它是只读的,否则我以前的方法(与您共享的方法非常相似)会起作用。尽管如此,我确实尝试了您的代码,并且 responseText 值按预期保持不变。
2021-05-17 20:53:22
@Shadow - 您会注意到我添加了对.onload.addEventListener("load", ...)其他两种查看 xhr 请求何时完成的方法的支持。你的代码没有使用这些,但我想我会让它更完整。
2021-05-18 20:53:22
@Shadow - 我正在努力。快好了。当我得到它时,我会发表评论给你。
2021-05-20 20:53:22

一种非常简单的解决方法是更改responseText自身的属性描述符

Object.defineProperty(wrapped, 'responseText', {
     writable: true
});

所以,你可以XMLHttpRequest像这样扩展

(function(proxied) {
    XMLHttpRequest = function() {
        //cannot use apply directly since we want a 'new' version
        var wrapped = new(Function.prototype.bind.apply(proxied, arguments));

        Object.defineProperty(wrapped, 'responseText', {
            writable: true
        });

        return wrapped;
    };
})(XMLHttpRequest);

演示

我一直想知道这样的方法是否可行并且可能更容易,但是每当我尝试通过 defineProperty 更改它时,我都会以无限的递归循环结束(responseText 更改 responseText 从而更改 responseText 等)。我一定会尝试一下,它的简单性非常适合预期用途。
2021-04-26 20:53:22
@Shadow 你有一个片段来展示你的最终解决方案是如何完成的吗?
2021-05-02 20:53:22
此选项似乎不合适,因为它完全清空了 responseText 返回的任何内容,结果是 responseText 尽管能够向其添加值,但始终返回“未定义”。目的是修改 responseText,而不是删除它并完全替换为新值。
2021-05-07 20:53:22
@Crwth 我在 EDIT5 的问题末尾包含了一个示例片段
2021-05-10 20:53:22
我终于想出了如何使这项工作。在拦截期间,特定的 XMLHttpRequest 必须在需要修改属性之前覆盖其属性。例如,如果在此之前完成,则 responseText 值将丢失。
2021-05-19 20:53:22

我需要拦截和修改请求响应,所以我想出了一些代码。我还发现一些网站喜欢使用 response 和 responseText 这就是为什么我的代码修改这两者。

代码

var open_prototype = XMLHttpRequest.prototype.open,
intercept_response = function(urlpattern, callback) {
   XMLHttpRequest.prototype.open = function() {
      arguments['1'].match(urlpattern) && this.addEventListener('readystatechange', function(event) {
         if ( this.readyState === 4 ) {
            var response = callback(event.target.responseText);
            Object.defineProperty(this, 'response',     {writable: true});
            Object.defineProperty(this, 'responseText', {writable: true});
            this.response = this.responseText = response;
         }
      });
      return open_prototype.apply(this, arguments);
   };
};

intercept_response 函数的第一个参数是匹配请求 url 的正则表达式,第二个参数是用于修改响应的函数。

使用示例

intercept_response(/fruit\.json/i, function(response) {
   var new_response = response.replace('banana', 'apple');
   return new_response;
});

根据请求,我在下面包含了一个示例片段,展示了如何在原始函数接收之前修改 XMLHttpRequest 的响应。

// In this example the sample response should be
// {"data_sample":"data has not been modified"}
// and we will change it into
// {"data_sample":"woops! All data has gone!"}

/*---BEGIN HACK---------------------------------------------------------------*/

// here we will modify the response
function modifyResponse(response) {

    var original_response, modified_response;

    if (this.readyState === 4) {

        // we need to store the original response before any modifications
        // because the next step will erase everything it had
        original_response = response.target.responseText;

        // here we "kill" the response property of this request
        // and we set it to writable
        Object.defineProperty(this, "responseText", {writable: true});

        // now we can make our modifications and save them in our new property
        modified_response = JSON.parse(original_response);
        modified_response.data_sample = "woops! All data has gone!";
        this.responseText = JSON.stringify(modified_response);

    }
}

// here we listen to all requests being opened
function openBypass(original_function) {

    return function(method, url, async) {

        // here we listen to the same request the "original" code made
        // before it can listen to it, this guarantees that
        // any response it receives will pass through our modifier
        // function before reaching the "original" code
        this.addEventListener("readystatechange", modifyResponse);

        // here we return everything original_function might
        // return so nothing breaks
        return original_function.apply(this, arguments);

    };

}

// here we override the default .open method so that
// we can listen and modify the request before the original function get its
XMLHttpRequest.prototype.open = openBypass(XMLHttpRequest.prototype.open);
// to see the original response just remove/comment the line above

/*---END HACK-----------------------------------------------------------------*/

// here we have the "original" code receiving the responses
// that we want to modify
function logResponse(response) {

    if (this.readyState === 4) {

        document.write(response.target.responseText);

    }

}

// here is a common request
var _request = new XMLHttpRequest();
_request.open("GET", "https://gist.githubusercontent.com/anonymous/c655b533b340791c5d49f67c373f53d2/raw/cb6159a19dca9b55a6c97d3a35a32979ee298085/data.json", true);
_request.addEventListener("readystatechange", logResponse);
_request.send();

您可以responseText使用新函数将 getter for 包装在原型中,并对那里的输出进行更改。

这是一个将 html 注释附加<!-- TEST -->到响应文本的简单示例

(function(http){
  var get = Object.getOwnPropertyDescriptor(
    http.prototype,
    'responseText'
  ).get;

  Object.defineProperty(
    http.prototype,
    "responseText",
    {
      get: function(){ return get.apply( this, arguments ) + "<!-- TEST -->"; }
    }
  );
})(self.XMLHttpRequest);

上述函数将更改所有请求的响应文本。

如果您只想对一个请求进行更改,则不要使用上面的函数,而只需在单个请求上定义 getter:

var req = new XMLHttpRequest();
var get = Object.getOwnPropertyDescriptor(
  XMLHttpRequest.prototype,
  'responseText'
).get;
Object.defineProperty(
  req,
  "responseText", {
    get: function() {
      return get.apply(this, arguments) + "<!-- TEST -->";
    }
  }
);
var url = '/';
req.open('GET', url);
req.addEventListener(
  "load",
   function(){
     console.log(req.responseText);
   }
);
req.send();