Bagaimana untuk Menangkap Pengepala Respons HTTP dalam Sambungan Chrome?

Cara Membaca Pengepala Respons HTTP dalam Sambungan Chrome

Siaran Asal:

Soalan ini bertujuan untuk melanjutkan sambungan Chrome yang memanipulasi pengepala permintaan untuk membolehkan pemeriksaan pengepala respons. Pengguna tidak dapat mencari API yang berkaitan dalam API Sambungan Chrome.

Penyelesaian:

Merakam respons HTTP memerlukan suntikan skrip ke dalam DOM. Kod berikut menunjukkan pendekatan ini:

// inject.js
var s = document.createElement('script');
s.src = chrome.runtime.getURL('injected.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);

Skrip ini menyuntik injected.js, yang mengandungi kod untuk menangkap permintaan dan respons:

// injected.js
(function(xhr) {

    // Override XMLHttpRequest methods
    var XHR = XMLHttpRequest.prototype;
    var open = XHR.open;
    var send = XHR.send;
    var setRequestHeader = XHR.setRequestHeader;

    // Intercept open() to capture request details
    XHR.open = function(method, url) {
        this._method = method;
        this._url = url;
        this._requestHeaders = {};
        this._startTime = (new Date()).toISOString();

        return open.apply(this, arguments);
    };

    // Intercept setRequestHeader() to track request headers
    XHR.setRequestHeader = function(header, value) {
        this._requestHeaders[header] = value;
        return setRequestHeader.apply(this, arguments);
    };

    // Intercept send() to capture response details
    XHR.send = function(postData) {

        this.addEventListener('load', function() {
            var endTime = (new Date()).toISOString();

            // Retrieve request URL, headers, and response headers
            var myUrl = this._url ? this._url.toLowerCase() : this._url;
            if (myUrl) {
                // Print request headers, response headers, and response body (if available in string format)
                console.log(this._url);
                console.log(JSON.parse(this._requestHeaders));
                console.log(this.getAllResponseHeaders());
                if ( this.responseType != 'blob' && this.responseText) {
                    console.log(JSON.parse(this.responseText));
                }
            }
        });

        return send.apply(this, arguments);
    };

})(XMLHttpRequest);

Akhir sekali, kemas kini manifest.json anda kepada sertakan skrip dan sumber yang diperlukan:

// manifest.json (MV3)
{
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["*://website.com/*"],
      "run_at": "document_start",
      "js": ["contentscript.js", "inject.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["injected.js"],
      "matches": ["*://website.com/*"]
    }
  ]
}

// manifest.json (MV2)
{
  "web_accessible_resources": ["injected.js"]
}

Dengan pendekatan ini, anda kini boleh mengubah suai pengepala permintaan dan menangkap pengepala respons dalam sambungan Chrome yang sama.

Atas ialah kandungan terperinci Bagaimana untuk Menangkap Pengepala Respons HTTP dalam Sambungan Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!