How to intercept all AJAX requests made by different JS libraries

Question

I am creating a web application with various JS libraries (AngularJS, OpenLayers, ...) and need the ability to intercept all AJAX responses in order to be able, in case the expired user session (the response is returned with 401 Unauthorized status) so that redirect it to the login page.

I know that AngularJS offers interceptors to manage such scenarios, but could not find a way to achieve such an injection into OpenLayers queries. So I chose the Vanilla JS approach.

Here I found this piece of code ...

 (function(open) { XMLHttpRequest.prototype.open = function(method, url, async, user, pass) { this.addEventListener("readystatechange", function() { console.log(this.readyState); // this one I changed }, false); open.call(this, method, url, async, user, pass); }; })(XMLHttpRequest.prototype.open); 

... which I adapted and looks like it behaves as expected (only tested it on the latest Google Chrome).

As soon as it modifies the XMLHTTPRequest prototype, I wonder how dangerous this can be, or it can cause serious performance problems. And, by the way, will there be some valid alternative?

Update: How to intercept requests before sending them

The previous trick is working fine. But what if in the same scenario you want to enter some headers before sending a request? Follow these steps:

 (function(send) { XMLHttpRequest.prototype.send = function(data) { // in this case I'm injecting an access token (eg. accessToken) in the request headers before it gets sent if(accessToken) this.setRequestHeader('x-access-token', accessToken); send.call(this, data); }; })(XMLHttpRequest.prototype.send); 

Answer 1

This type of function connection is completely safe and regularly performed in other ways for other reasons.

And the only performance impact is just one extra function call for each .open() plus any code that you execute yourself, which is probably irrelevant when a network call is involved.

---

In IE, this will not catch any code that tries to use the ActiveXObject control ActiveXObject to execute Ajax. Well-written code looks first for the XMLHttpRequest object and uses it, if available, and is available with IE 7. But there might be some code that uses the ActiveXObject method, if available, that would be true through much later versions of IE.

---

In modern browsers, there are other ways to issue Ajax calls, such as the fetch() interface , so if you want to connect all Ajax you have to intercept more than just XMLHttpRequest .

Answer 2

This will not crash XMLHttpRequests for some versions of IE (9 and below). Depending on the library, they may first search for their own ActiveX IE control.

And, of course, all bets are disabled if you use non-standard DOCTYPE in IE, but I'm sure you knew that.

Link: CanIuse

Answer 3

As kindly pointed out by Firefox AMO Editor Rob W ,

The following code modifies the behavior of XMLHttpRequest. By default, if the third ("asynchronous") parameter is not specified, the default is true. When it is specified and undefined, it is equivalent to "false", which turns the request into a synchronous HTTP request. This causes the UI to lock during request processing, and some XMLHttpRequest API functions are also disabled.

...

To fix this, replace open.call (....) with open.apply (this, arguments);

And here is the link:

https://xhr.spec.whatwg.org/#the-open()-method