Problem with javascript xhook, and an alternative for it - xhrhook

xhook is a javascript library that is used to intercept xmlhttprequests, and manipulate the request and response.

However, it needs cautions to use xhook in your javascript project, as it may cause errors if your project customizes xmlhttprequest object. For example, after including xhook.js in your html file,  calling the below code returns undefined instead of a function object as expected.

XMLHttpRequest.prototype.open 

The problem is, xhook uses an proxy approach to override the xmlhttprequest's behavior. Internally xhook overrides the xmlhttprequest construct function, and when caller calls

var xhr = new xmlhttprequest(),;

it just create and return a regular javascript object instead of a real xmlhttprequest object, and this regular javascript object has a private member which points to a real xmlhttprequest object. So when caller calls any xmlhttprequest method, the regular javascript object just forwards the call to the internal real xmlhttprequest to do the job.

Using the proxy approach gives xhook the full control of the request and response. However, the issue is although caller thinks he is dealing with a real xmlhttprequest object,  but actually it is not, so when caller talks to this fake xmlhttprequest object, it may fail to return the expected result as a real xmlhttprequest does.

So, as an alternative, if your project only needs to monitor the request and response data, but does not need to modify the response data, (you can still modify the request data), then xhook may not be the best choice. As it is more reliable and safe to return a real xmlhttprequest object to caller when it is requested,  and then just override each individual methods or event listener. Actually many projects already did the similar thing for the open or send method.

To test with this approach, a new xhrhook project has been started in github at

https://github.com/jonathanli2/xhrhook


Currently xhrhook.js only supports monitor open, send method, and onreadystatechanged and onload event listener. But it should be easy to support all methods and event listeners.

Note all event listener may not be set by application until send method is called, so a default send handler is added automatically when loading xhrhook to hook the event listener handler.