Bagaimanakah saya boleh menangkap pengepala HTTP permintaan dan respons daripada tapak web tertentu dalam sambungan Chrome?

Baca Respons HTTP dalam Sambungan Chrome

Mendapatkan pengepala respons yang diterima daripada tapak web dalam sambungan Chrome bukanlah mudah. API Sambungan Chrome tidak menyediakan fungsi langsung seperti itu untuk permintaan. Walau bagaimanapun, penyelesaian alternatif wujud.

Dengan melaksanakan teknik yang menyuntik skrip ke dalam DOM tapak web, anda boleh menangkap kedua-dua permintaan HTTP dan respons yang dibuat oleh tapak web tersebut. Pelbagai kaedah wujud untuk suntikan skrip, tetapi satu pendekatan yang sesuai untuk tugas ini ialah skrip kandungan perisytiharan ManifestV2/V3 yang dipasangkan dengan injection.js.

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

injected.js:

Skrip ini menyuntik ke dalam halaman dan memintas permintaan dan respons. Ia diilhamkan oleh kaedah yang diterangkan dalam Cara kami menangkap permintaan AJAX daripada tab tapak web dengan Sambungan Chrome.

(function(xhr) {
    var XHR = XMLHttpRequest.prototype;
    var open = XHR.open;
    var send = XHR.send;
    var setRequestHeader = XHR.setRequestHeader;

    XHR.open = function(method, url) {
        this._method = method;
        this._url = url;
        this._requestHeaders = {};
        this._startTime = (new Date()).toISOString();

        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() {
            var endTime = (new Date()).toISOString();
            var myUrl = this._url ? this._url.toLowerCase() : this._url;
            if (myUrl) {
                if (postData) {
                    if (typeof postData === 'string') {
                        try {
                            this._requestHeaders = postData; 
                        } catch(err) {
                            console.log('Request Header JSON decode failed, transfer_encoding field could be base64');
                            console.log(err);
                        }
                    } else if (typeof postData === 'object' || typeof postData === 'array' || typeof postData === 'number' || typeof postData === 'boolean') {
                            // do something if you need
                    }
                }
                var responseHeaders = this.getAllResponseHeaders();
                if (this.responseType != 'blob' && this.responseText) {
                    try {
                        var arr = this.responseText;
                        console.log(this._url);
                        console.log(JSON.parse(this._requestHeaders));
                        console.log(responseHeaders);
                        console.log(JSON.parse(arr));                        
                    } catch(err) {
                        console.log("Error in responseType try catch");
                        console.log(err);
                    }
                }
            }
        });

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

manifest.json:

{
  "manifest_version": 3,
  "name": "Extension Name",
  "description": "Some Desc.",
  "version": "1.1",
  "content_scripts": [
    {
      "matches": ["*://website.com/*"],
      "run_at": "document_start",
      "js": ["contentscript.js", "inject.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["injected.js"],
      "matches": ["*://website.com/*"]
    }
  ]
}

Dengan teknik ini, anda boleh mengakses pengepala HTTP untuk kedua-dua permintaan dan respons dalam Chrome anda sambungan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menangkap pengepala HTTP permintaan dan respons daripada tapak web tertentu dalam sambungan Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!