深入理解 JavaScript 中拦截 XHR 和 Fetch 请求以获取 Authorization 头信息

在现代 Web 开发中，经常需要对网络请求进行拦截和分析，特别是对于包含敏感信息的请求头，如Authorization。这篇文章将详细介绍如何使用 JavaScript 拦截fetch和XMLHttpRequest（XHR）发出的网络请求，并获取其中的Authorization头信息。

拦截 Fetch 请求

// 保存原始的fetch函数
const originalFetch = window.fetch;
// 重写fetch函数
window.fetch = function(input, init={}) {
    // 获取Authorization头信息
    const authorizationHeader = init.headers.authorization;
    if (authorizationHeader) {
        console.log('拦截到的Authorization:', authorizationHeader);
    }
    // 调用原始的fetch函数
    return originalFetch.apply(this, arguments);
}

1. 保存原始的 fetch 函数

const originalFetch = window.fetch;

通过保存window.fetch的原始引用，我们确保在拦截逻辑执行后，仍能调用原始的fetch功能，从而保证正常的网络请求不受影响。

2. 重写 fetch 函数

window.fetch = function(input, init = {}) {
    const authorizationHeader = init.headers.authorization;
    if (authorizationHeader) {
        console.log('拦截到的Authorization:', authorizationHeader);
    }
    return originalFetch.apply(this, arguments);
};

在重写的fetch函数中，我们首先从init.headers对象中获取authorization头信息。如果该头信息存在，就将其打印到控制台。最后，通过originalFetch.apply(this, arguments)调用原始的fetch函数，传递原始的参数，以继续执行正常的网络请求。

拦截 XHR 请求

// 备份原始的 XMLHttpRequest 构造函数
const originalXhr = window.XMLHttpRequest;

// 重写 XMLHttpRequest 构造函数
window.XMLHttpRequest = function() {
    const xhr = new originalXhr();
    let authorizationHeader = null;

    // 重写 open 方法
    const originalOpen = xhr.open;
    xhr.open = function(method, url, async, user, password) {
        console.log(`Request opened: ${method} ${url}`);
        return originalOpen.call(this, method, url, async, user, password);
    }
    ;

    // 重写 setRequestHeader 方法
    const originalSetRequestHeader = xhr.setRequestHeader;
    xhr.setRequestHeader = function(header, value) {
        if (header.toLowerCase() === 'authorization') {
            authorizationHeader = value;
            console.log(`Authorization header set: ${authorizationHeader}`);
        }
        return originalSetRequestHeader.call(this, header, value);
    }
    ;

    // 监听请求完成事件
    xhr.addEventListener('load', function() {
        if (authorizationHeader) {
            console.log(`Request completed with Authorization: ${authorizationHeader}`);
        }
    });

    return xhr;
}
;

1. 备份原始的 XMLHttpRequest 构造函数

const originalXhr = window.XMLHttpRequest;

与fetch类似，我们先备份原始的XMLHttpRequest构造函数，以便后续使用。

2. 重写 XMLHttpRequest 构造函数

window.XMLHttpRequest = function() {
    const xhr = new originalXhr();
    let authorizationHeader = null;

    // 重写open方法
    const originalOpen = xhr.open;
    xhr.open = function(method, url, async, user, password) {
        console.log(`Request opened: ${method} ${url}`);
        return originalOpen.call(this, method, url, async, user, password);
    };

    // 重写setRequestHeader方法
    const originalSetRequestHeader = xhr.setRequestHeader;
    xhr.setRequestHeader = function(header, value) {
        if (header.toLowerCase() === 'authorization') {
            authorizationHeader = value;
            console.log(`Authorization header set: ${authorizationHeader}`);
        }
        return originalSetRequestHeader.call(this, header, value);
    };

    // 监听请求完成事件
    xhr.addEventListener('load', function() {
        if (authorizationHeader) {
            console.log(`Request completed with Authorization: ${authorizationHeader}`);
        }
    });

    return xhr;
};

在重写的构造函数中，我们创建了一个新的原始XMLHttpRequest实例。然后，我们重写了open方法，主要是为了在控制台打印请求的开始信息。更为关键的是，我们重写了setRequestHeader方法，当检测到设置的头信息为authorization时，保存其值并打印到控制台。最后，通过监听load事件，在请求完成时，如果authorization头存在，再次打印该头信息。

3. 模拟 XHR 请求

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data', true);
xhr.setRequestHeader('Authorization', 'Bearer your_token_here');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log('Request succeeded');
    }
};
xhr.send();

这里我们模拟了一个简单的 XHR 请求，设置了Authorization头信息，以便验证我们的拦截逻辑是否正确工作。

通过上述方法，我们可以有效地拦截fetch和XHR发出的网络请求，并获取其中的Authorization头信息，这在调试、安全监控等场景中具有重要的应用价值。