Question

我想要实现什么？

我想拦截XMLHttpRequest并修改某些特定请求的响应。（例如，解密内容并将其分配给反馈）

到目前为止我做了什么？

下面的代码拦截请求并修改响应。它适用于除IE 11之外的所有浏览器（Chrome，Firefox，Opera，Edge）。

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

问题是什么？

所有这些仅在IE 11中不起作用，抛出的错误是＆＃39; TypeError：严格模式下不允许分配给只读属性＆＃39;。

有人可以帮帮我吗？

Answer 1

我可以用另一种方式做到这一点，即将一个伪XMLHttpRequest对象暴露给原始请求者，然后自己处理实际的XMLHttpRequest。请阅读代码以获得更清晰的信息。

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

在所有浏览器中覆盖/拦截XMLHttpRequest响应

1 个答案: