Zugriff auf die HTTP-Header der Webseite in JavaScript

Question

Wie kann ich über JavaScript auf die HTTP-Antwort-Header einer Seite zugreifen?

Verwandt mit diese Frage die geändert wurde, um den Zugriff auf zwei bestimmte HTTP-Header zu erfragen.

Verwandt:
Wie greife ich über JavaScript auf die Header-Felder der HTTP-Anfrage zu?

Answer 1

Es ist nicht möglich, die aktuellen Kopfzeilen zu lesen. Sie könnten eine weitere Anfrage an dieselbe URL stellen und deren Kopfzeilen lesen, aber es gibt keine Garantie, dass die Kopfzeilen genau mit der aktuellen übereinstimmen.

---

Verwenden Sie den folgenden JavaScript-Code, um alle HTTP-Header zu erhalten, indem Sie eine get Anfrage:

var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
alert(headers);

Answer 2

Leider gibt es keine API, die Ihnen die HTTP-Antwort-Header für Ihre erste Seitenanfrage liefert. Das war die ursprüngliche Frage, die hier gestellt wurde. Sie wurde wiederholt gefragt auch, weil manche Leute die tatsächlichen Antwort-Header der ursprünglichen Seitenanforderung erhalten möchten, ohne eine weitere Anfrage zu stellen.

Für AJAX-Anfragen:

Wenn eine HTTP-Anfrage über AJAX gestellt wird, ist es möglich, die Antwort-Header mit der getAllResponseHeaders() Methode. Sie ist Teil der XMLHttpRequest-API. Um zu sehen, wie dies angewendet werden kann, sehen Sie sich die fetchSimilarHeaders() Funktion unten. Beachten Sie, dass dies eine Umgehung des Problems ist, die für einige Anwendungen nicht zuverlässig ist.

myXMLHttpRequest.getAllResponseHeaders();

• Die API wurde in der folgenden Kandidatenempfehlung für XMLHttpRequest spezifiziert: XMLHttpRequest - W3C-Kandidatenempfehlung 3 August 2010

• Genauer gesagt, die getAllResponseHeaders() Methode wurde im folgenden Abschnitt beschrieben: [w3.org: XMLHttpRequest : die getallresponseheaders() Methode](http://www.w3.org/TR/XMLHttpRequest/#the-getallresponseheaders()-method)

• Auch die MDN-Dokumentation ist gut: entwickler.mozilla.org: XMLHttpRequest .

Dadurch erhalten Sie keine Informationen über die HTTP-Antwort-Header der ursprünglichen Seitenanforderung, aber Sie können damit fundierte Vermutungen darüber anstellen, was diese Header waren. Mehr dazu wird im nächsten Abschnitt beschrieben.

Abrufen von Kopfzeilenwerten aus dem Initial Page Request:

Diese Frage wurde erstmals vor einigen Jahren gestellt, und zwar mit der Frage, wie man an die ursprünglichen HTTP-Antwort-Header für die aktuelle Seite (d.h. dieselbe Seite, auf der das Javascript ausgeführt wurde). Dies ist eine ganz andere Frage als einfach immer die Antwort-Header für jede HTTP-Anfrage. Für die erste Seitenanforderung sind die Header für Javascript nicht ohne weiteres verfügbar. Ob die Header-Werte, die Sie benötigen, zuverlässig und ausreichend konsistent sind, wenn Sie die gleiche Seite erneut über AJAX anfordern, hängt von Ihrer speziellen Anwendung ab.

Im Folgenden finden Sie einige Vorschläge, wie Sie dieses Problem umgehen können.

1. Anfragen zu Ressourcen, die weitgehend statisch sind

Wenn die Antwort weitgehend statisch ist und sich die Kopfzeilen zwischen den Anfragen kaum ändern, können Sie eine AJAX-Anfrage für dieselbe Seite stellen, auf der Sie sich gerade befinden, und davon ausgehen, dass es sich um dieselben Werte handelt, die Teil der HTTP-Antwort der Seite waren. Dies könnte Ihnen den Zugriff auf die benötigten Header mit der oben beschriebenen XMLHttpRequest-API ermöglichen.

function fetchSimilarHeaders (callback) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE) {
            //
            // The following headers may often be similar
            // to those of the original page request...
            //
            if (callback && typeof callback === 'function') {
                callback(request.getAllResponseHeaders());
            }
        }
    };

    //
    // Re-request the same page (document.location)
    // We hope to get the same or similar response headers to those which 
    // came with the current page, but we have no guarantee.
    // Since we are only after the headers, a HEAD request may be sufficient.
    //
    request.open('HEAD', document.location, true);
    request.send(null);
}

Dieser Ansatz ist problematisch, wenn Sie sich wirklich darauf verlassen müssen, dass die Werte zwischen den Anfragen konsistent sind, da Sie nicht vollständig garantieren können, dass sie identisch sind. Es hängt von Ihrer spezifischen Anwendung ab und davon, ob Sie wissen, dass sich der benötigte Wert nicht von einer Anfrage zur nächsten ändert.

2. Schlüsse ziehen

Es gibt einige Stücklisteneigenschaften (Browser Object Model), das der Browser anhand der Kopfzeilen bestimmt. Einige dieser Eigenschaften spiegeln HTTP-Header direkt wider (z. B. navigator.userAgent wird auf den Wert der HTTP User-Agent Kopffeld). Wenn Sie in den verfügbaren Eigenschaften herumschnüffeln, können Sie vielleicht das finden, was Sie brauchen, oder einige Hinweise darauf, was die HTTP-Antwort enthält.

3. Verstecken Sie sie

Wenn Sie die Serverseite kontrollieren, können Sie auf jede beliebige Kopfzeile zugreifen, während Sie die vollständige Antwort erstellen. Die Werte können mit der Seite an den Client weitergegeben werden, in einem Markup oder vielleicht in einer inline JSON-Struktur versteckt werden. Wenn Sie jeden HTTP-Anfrage-Header für Ihr Javascript verfügbar haben wollen, könnten Sie sie auf dem Server durchgehen und als versteckte Werte im Markup zurücksenden. Es ist wahrscheinlich nicht ideal, um Header-Werte auf diese Weise zu senden, aber Sie könnten sicherlich tun es für den spezifischen Wert, den Sie benötigen. Diese Lösung ist wohl auch ineffizient, aber es würde die Arbeit tun, wenn Sie es brauchen.

Answer 3

Verwendung von XmlHttpRequest können Sie die aktuelle Seite aufrufen und dann die http-Header der Antwort untersuchen.

Im besten Fall wird einfach eine HEAD Anfrage und untersuchen dann die Kopfzeilen.

Einige Beispiele für diese Vorgehensweise finden Sie unter http://www.jibbering.com/2002/4/httprequest.html

Nur meine 2 Cents.

Answer 4

Eine Lösung mit Service Workers

Service Worker können auf Netzwerkinformationen zugreifen, zu denen auch Header gehören. Das Gute daran ist, dass es mit jeder Art von Anfrage funktioniert, nicht nur mit XMLHttpRequest.

Wie es funktioniert:

1. Fügen Sie einen Service-Worker auf Ihrer Website hinzu.
2. Beobachten Sie jede Anfrage, die gesendet wird.
3. Machen Sie den Servicemitarbeiter fetch die Anfrage mit dem respondWith Funktion.
4. Wenn die Antwort eintrifft, lesen Sie die Kopfzeilen.
5. Senden Sie die Kopfzeilen vom Service Worker an die Seite mit dem postMessage Funktion.

Arbeitsbeispiel:

Service Worker sind ein bisschen kompliziert zu verstehen, deshalb habe ich eine kleine Bibliothek gebaut, die all das erledigt. Sie ist auf Github verfügbar: https://github.com/gmetais/sw-get-headers .

Beschränkungen:

• die Website muss auf HTTPS
• muss der Browser die Option Servicekräfte API
• die domänengleichen/domänenübergreifenden Richtlinien sind im Einsatz, genau wie bei XMLHttpRequest

Answer 5

(2021) Eine Antwort ohne zusätzlicher HTTP-Aufruf

Es ist zwar nicht möglich im Allgemeinen um beliebige HTTP-Antwort-Header der Top-Level-HTML-Navigation zu lesen, wenn Sie den Server (oder Middleboxen auf dem Weg) kontrollieren und einige Informationen an JavaScript weitergeben wollen, die nicht einfach auf andere Weise als über einen Header weitergegeben werden können:

Sie können verwenden Server-Timing Header, um beliebige Schlüssel-Wert-Daten zu veröffentlichen, die von JavaScript gelesen werden können.

_(*in unterstützten Browsern: Firefox 61, Chrome 65, Edge 79; noch kein Safari und keine unmittelbaren Pläne für den Versand ab 2021.09; kein IE)_

Beispiel:

server-timing: key;desc="value"

• Sie können diese Überschrift verwenden mehrere Male für mehrere Daten :

  server-timing: key1;desc="value1" server-timing: key2;desc="value2"

• oder verwenden Sie die kompakte Version, bei der Sie mehrere Daten in einer durch Komma getrennten Kopfzeile ausgeben.

  server-timing: key1;desc="value1", key2;desc="value2"

Beispiel dafür, wie Wikipedia verwendet diesen Header, um Informationen über Cache-Treffer/Fehlschläge zu veröffentlichen:

Codebeispiel (wegen fehlender Browserunterstützung in Safari und IE):

if (window.performance && performance.getEntriesByType) { // avoid error in Safari 10, IE9- and other old browsers
    let navTiming = performance.getEntriesByType('navigation')
    if (navTiming.length > 0) { // still not supported as of Safari 14...
        let serverTiming = navTiming[0].serverTiming
        if (serverTiming && serverTiming.length > 0) {
            for (let i=0; i<serverTiming.length; i++) {
                console.log(`${serverTiming[i].name} = ${serverTiming[i].description}`)
            }
        }
    }
}

Diese Protokolle cache = hit-front in unterstützten Browsern.

Anmerkungen:

• wie auf MDN erwähnt Die API wird nur über HTTPS unterstützt.
• wenn Ihr JS von einer anderen Domäne bereitgestellt wird, müssen Sie Timing-Allow-Origin Antwort-Header, um die Daten für JS lesbar zu machen ( Timing-Allow-Origin: * o Timing-Allow-Origin: https://www.example.com )
• Server-Timing Kopfzeilen unterstützen auch dur (Header)-Feld, lesbar als duration auf der JS-Seite, aber es ist optional und standardmäßig auf 0 in JS, wenn nicht übergeben
• zur Safari-Unterstützung: siehe Wanze 1 y Wanze 2 y Wanze 3
• Mehr zum Thema Server-Timing finden Sie unter dieser Blogbeitrag
• Beachten Sie, dass die Puffer für Leistungseinträge möglicherweise von JS auf der Seite (über einen API-Aufruf) oder vom Browser bereinigt werden, wenn die Seite zu viele Aufrufe für Subressourcen ausgibt. Aus diesem Grund sollten Sie die Daten so bald wie möglich erfassen und/oder die PerformanceObserver API stattdessen. Siehe die Blog-Beitrag für Einzelheiten.