How to intercept all AJAX requests made by different JS libraries

Question

I am building a web app with different JS libraries (AngularJS, OpenLayers,...) and need a way to intercept all AJAX responses to be able, in case the logged user session expired (response gets back with 401 Unauthorized status), to redirect him to the login page.

I know AngularJS offers interceptors to manage such scenarios, but wasn't able to find a way to achieve such injection into OpenLayers requests. So I opted for a 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 last Google Chrome).

As it modifies the prototype of XMLHTTPRequest I am wondering how dangerous this could result or if it could produce serious performance issues. And by the way would there be any valid alternative?

Update: how to intercept requests before they get sent

The previous trick works ok. But what if in the same scenarion you want to inject some headers before the request gets sent? Do the following:

(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);

The only performance impact is that it will run an extra function during every AJAX response, but that's what you want to do. — Barmar, Aug 15 '14 at 23:57
Possible duplicate of [Add a "hook" to all AJAX requests on a page](https://stackoverflow.com/questions/5202296/add-a-hook-to-all-ajax-requests-on-a-page) — T.Todua, Oct 12 '19 at 08:50

jfriend00 · Accepted Answer · 2017-01-02T13:13:48.653

40

This type of function hooking is perfectly safe and is done regularly on other methods for other reasons.

And, the only performance impact is really only one extra function call for each .open() plus whatever code you execute yourself which is probably immaterial when a networking call is involved.

In IE, this won't catch any code that tries to use the ActiveXObject control method of doing Ajax. Well written code looks first for the XMLHttpRequest object and uses that if available and that has been available since IE 7. But, there could be some code that uses the ActiveXObject method if it's available which 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 one is looking to hook all Ajax calls, you have to hook more than just XMLHttpRequest.

edited Jan 02 '17 at 13:13

answered Aug 16 '14 at 00:13

jfriend00

683,504
96
985
979

1

Hi @jfriend00 - how would you hook all fetch api requests - https://stackoverflow.com/questions/44728723/hook-all-fetch-api-ajax-requests? – colemerrick Jun 23 '17 at 19:33
1

@bagofcole - You could presumably monkey-patch the `fetch()` function in order to intercept all calls to it - though I've never tried that myself. It looks like [this module](https://github.com/werk85/fetch-intercept/blob/develop/src/index.js) does that. – jfriend00 Jun 23 '17 at 19:42
Breaks YouTube when trying to hook `comment_service_ajax` requests. – Leeroy May 09 '18 at 11:48
@jfriend00 That link is broken but it used to lead somewhere into this repository: https://github.com/mlegenhausen/fetch-intercept – Daniel Kaplan Mar 31 '23 at 07:42

score 3 · Answer 2 · answered Aug 16 '14 at 00:13

This won't catch XMLHttpRequests for some versions of IE (9 and below). Depending upon the library, they may look for IE's proprietary ActiveX control first.

And, of course, all bets are off if you are using a non-strict DOCTYPE under IE, but I'm sure you knew that.

Reference: CanIuse

Walty Yeung · Answer 3 · 2017-06-05T15:58:35.550

As kindly pointed out by by Firefox AMO Editor Rob W,

The following code changes the behavior of XMLHttpRequest. By default, if the third ("async") parameter is not specified, it defaults to true. When it is specified and undefined, it is equivalent to "false", which turns a request in a synchronous HTTP request. This causes the UI to block while the request is being processed, and some features of the XMLHttpRequest API are disabled too.

...

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

And here is a reference link:

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

(where "The following code" refers to the snippet from the question) — Rob W, Jun 11 '17 at 09:40

score 1 · Answer 4 · answered Mar 10 '21 at 12:09

Try this

let oldXHROpen = window.XMLHttpRequest.prototype.open;
window.XMLHttpRequest.prototype.open = function(method, url, async, user, password) {

console.log({method});

// Show loader

 this.addEventListener('load', function() {
  console.log('load: ' + this.responseText);
  // Hide loader
 });
           
  return oldXHROpen.apply(this, arguments);
}

How to intercept all AJAX requests made by different JS libraries

Update: how to intercept requests before they get sent

4 Answers4

Linked

Related