JS前端响应劫持

霄
2023-06-30 / 0 评论 / 52 阅读 / 正在检测是否收录...

const trackerXHR = () => {
    // 拿到 XMLHttpRequest 
    let XMLHttpRequest = window.XMLHttpRequest
    // 保存原有的open方法
    let XMLOriginOpen = XMLHttpRequest.prototype.open
    // 重写 open 方法 目的是为了保存 ethods, url 这个参数的值 用于埋点上报
    // 不能用箭头函数
    // 1. 箭头函数没有 arguments
    // 2. 箭头函数会改变指向 我们需要将 this指向 XMLHttpRequest
    // 3. 箭头函数this绑定的是上一层的this
    XMLHttpRequest.prototype.open = function (methods, url, async) {
        // 将值挂在XMLHttpRequest.logData 中
        this.logData = {
            methods,
            url
        }
        // 执行原有的open方法
        return XMLOriginOpen.apply(this, arguments)
    }
    // 保留原有的send方法
    let XMLOriginSend = XMLHttpRequest.prototype.send
    XMLHttpRequest.prototype.send = function (request) {
        //  send 里 去监听
        const startTime = new Date() // 计算接口的duration, send 时记录请求时刻
        const handle = (eventType) => {
            return () => {
                //延迟两秒后初始化,防止用户切换页面过快
               setTimeout(()=>{
                    window.pageChange.RefreshState()
               },2000)
            }
        }
        this.addEventListener('load', handle('load'), false)
        this.addEventListener('error', handle('error'), false)
        this.addEventListener('abort', handle('abort'), false)
        return XMLOriginSend.apply(this, arguments)
    }
}
trackerXHR()
扫描二维码,在手机上阅读!
42

评论

博主关闭了当前页面的评论