Override/Intercept XMLHttpRequest response in all browsers

Question

What do I want to achieve ?

I want to intercept the XMLHttpRequest and modify the response for some particular requests. (For ex. decrypt content and assign it to back response)

What I have done so far ?

Below code intercepts the request and modifies the response. It works in all browsers (Chrome, Firefox, Opera, Edge) except IE 11.

const dummySend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function () {
  const _onreadystatechange = this.onreadystatechange;

  this.onreadystatechange = function () {
    if (this.readyState === 4) {
      if (this.status === 200 || this.status === 1223) {
        // as response is read-only and configurable, make it writable
        Object.defineProperty(this, 'response', {writable: true});
        this.response = modifyResponse(this.response);
      }
    }
    if (_onreadystatechange) {
      _onreadystatechange.apply(this, arguments);
    }
  }
  dummySend.apply(__self, arguments);
}

What is the Issue ?

All of that doesn't work only in IE 11, The Error thrown is 'TypeError: Assignment to read-only property is not allowed in strict mode'.

Can someone please help me with this ?

Answer 1

I could do it the other way, which is to have a dummy XMLHttpRequest object exposed to the original requester and then handle the actual XMLHttpRequest yourself. Please read code for more clarity.

  let oldXMLHttpRequest = window.XMLHttpRequest;

  // define constructor for XMLHttpRequest proxy object
  window.XMLHttpRequest = function() {
    let _originalXhr = new oldXMLHttpRequest();
    let _dummyXhr = this;

    function decryptResponse(actualResponse) {
      return base64Decrypted = decrypt(response, secret);
    }

    _dummyXhr.response = null;

    // expose dummy open
    _dummyXhr.open = function () {
      const _arguments = [].slice.call(arguments);

      // do any url modifications here before request open

      _dummyXhr._url = _arguments[1];
      return _originalXhr.open.apply(_originalXhr, _arguments);
    };

    // expose dummy send
    _dummyXhr.send = function () {
      let _onreadystatechange = _dummyXhr.onreadystatechange;

      _originalXhr.onreadystatechange = function() {
        if (this.readyState === 4 && (this.status === 200 || this.status === 1223)) {
          _dummyXhr.response = decryptResponse(this.response);
        }
        // call callback that was assigned on our object
        if (_onreadystatechange) {
          _onreadystatechange.apply(_dummyXhr, arguments);
        }
      }

      _originalXhr.send.apply(_originalXhr, arguments);
    };

    // iterate all properties in _originalXhr to proxy them according to their type
    // For functions, we call _originalXhr and return the result
    // For non-functions, we make getters/setters
    // If the property already exists on _dummyXhr, then don't proxy it
    for (let prop in _originalXhr) {
      // skip properties we already have - this will skip both the above defined properties
      // that we don't want to proxy and skip properties on the prototype belonging to Object
      if (!(prop in _dummyXhr)) {
        // create closure to capture value of prop
        (function(prop) {
          if (typeof _originalXhr[prop] === "function") {
            // define our own property that calls the same method on the _originalXhr
            Object.defineProperty(_dummyXhr, prop, {
              value: function() {return _originalXhr[prop].apply(_originalXhr, arguments);}
            });
          } else {
            // define our own property that just gets or sets the same prop on the _originalXhr
            Object.defineProperty(_dummyXhr, prop, {
              get: function() {return _originalXhr[prop];},
              set: function(val) {_originalXhr[prop] = val;}
            });
          }
        })(prop);
      }
    }