截取xhr请求获取网络信息

这段代码可以应用于chrome的扩展应用,在对网站插入的content-script里插入这段javascript截取网络请求信息。

function getRequestParams (url) {
    let temp = url.split('?');
    if (temp.length > 1) {
        let param = temp[1];
        let keyValue = param.split('&');
        let obj = {};
        for (let i = 0; i < keyValue.length; i++){
            let item = keyValue[i].split('=');
            let key = item[0];
            let value = item[1];
            obj[key] = value;
        }
        return obj
    } else {
        return null
    }
}

function requestType (value) {
    if ((value instanceof File) || (value instanceof Blob) || (value instanceof ArrayBuffer)) {
        return 'binary'
    } else if ((value instanceof FormData)) {
        return 'form-data'
    } else {
        return 'x-www-form-urlencoded'
    }
}

(function captureXMLHttpRequest(recorder) {
    let XHR = XMLHttpRequest.prototype;
    let open = XHR.open;
    let send = XHR.send;
    let setRequestHeader = XHR.setRequestHeader;
    XHR.open = function (method, url) {
        this._method = method;
        this._url = url;
        this._requestHeaders = {};
        this._startTime = new Date().getTime();
        return open.apply(this, arguments);
    };

    XHR.setRequestHeader = function (header, value) {
        this._requestHeaders[header] = value;
        return setRequestHeader.apply(this, arguments);
    };
    
    XHR.send = function (postData) {
        this.addEventListener('load', function () {
          
            let endTime = new Date().getTime();
            let time = endTime - this._startTime
            if (recorder) {
                let myUrl = this._url ? this._url.toLowerCase() : this._url;
                if (myUrl) {
                    let requestModel = {
                        'url': this._url,
                        'method': this._method,
                        'timestamp': this._startTime,
                        'headers': this._requestHeaders
                    };

                    let params = getRequestParams(myUrl)

                    if (params) {
                        requestModel['params'] = params
                    }
                    if (postData) {
                        if (typeof postData === 'string') {
                            let _dataType
                            // 判断是否json字符串
                            try {
                                const obj = JSON.parse(postData);
                                if(typeof obj == 'object' && obj ){
                                    _dataType = 'JSON';
                                }else{
                                    _dataType = 'text';
                                }
                            } catch(e) {
                                _dataType = 'text';
                            }
                            requestModel['body'] = postData;
                            requestModel['dataType'] = _dataType
                        } else if (typeof postData === 'object' || typeof postData === 'array' || typeof postData === 'number' || typeof postData === 'boolean') {
                            requestModel['body'] = postData;
                            requestModel['dataType'] = requestType(postData)
                        }
                    } else {
                        requestModel['dataType'] = 'none'
                    }

                    let responseHeaders = this.getAllResponseHeaders();

                    let responseModel = {
                        'status': this.status,
                        'timestamp': endTime,
                        'time': time,
                        'headers': responseHeaders
                    };

                    if (this.responseText) {
                        responseModel['body'] = this.responseText;
                    }
                    let network = {
                        'request': requestModel,
                        'response': responseModel
                    };
                    recorder(network);
                }
            }
        });
        
        return send.apply(this, arguments);
    };
})(recorder);

function recorder(network){
    console.log(network)
}

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值