it-swarm.com.de

Zugriff auf die HTTP-Header der Webseite in JavaScript

Wie greife ich über JavaScript auf die HTTP-Antwortheader einer Seite zu?

Bezogen auf diese Frage , die geändert wurde, um nach dem Zugriff auf zwei bestimmte HTTP-Header zu fragen.

Verwandte:
Wie greife ich über JavaScript auf die HTTP-Anforderungsheaderfelder zu?

383
keparo

Leider gibt es keine API, mit der Sie die HTTP-Antwortheader für Ihre erste Seitenanforderung erhalten. Das war die ursprüngliche Frage, die hier gepostet wurde. Es wurde auch wiederholt gefragt , da einige Benutzer die eigentlichen Antwort-Header der ursprünglichen Seitenanforderung erhalten möchten, ohne einen anderen auszugeben.


Für AJAX Anfragen:

Wenn eine HTTP-Anforderung über AJAX erfolgt, können die Antwortheader mit der Methode getAllResponseHeaders() abgerufen werden. Es ist Teil der XMLHttpRequest-API. Um zu sehen, wie dies angewendet werden kann, lesen Sie die folgende Funktion fetchSimilarHeaders(). Beachten Sie, dass dies eine Problemumgehung ist, die für einige Anwendungen nicht zuverlässig ist.

myXMLHttpRequest.getAllResponseHeaders();

Auf diese Weise erhalten Sie keine Informationen zu den HTTP-Antwort-Headern der ursprünglichen Seitenanforderung. Sie können jedoch fundierte Vermutungen zu diesen Headern anstellen. Mehr dazu wird als nächstes beschrieben.


Abrufen von Headerwerten aus der ersten Seitenanforderung:

Diese Frage wurde vor einigen Jahren zum ersten Mal gestellt und stellte die Frage, wie die ursprünglichen HTTP-Antwortheader für die aktuelle Seite (dh dieselbe Seite, auf der das Javascript ausgeführt wurde) abgerufen werden können. . Dies ist eine ganz andere Frage als das Abrufen der Antwortheader für eine HTTP-Anforderung. Bei der ersten Seitenanforderung sind die Header für Javascript nicht ohne Weiteres verfügbar. Ob die von Ihnen benötigten Header-Werte zuverlässig und ausreichend konsistent sind, wenn Sie dieselbe Seite erneut über AJAX anfordern, hängt von Ihrer jeweiligen Anwendung ab.

Im Folgenden finden Sie einige Vorschläge, um dieses Problem zu umgehen.


1. Anfragen zu Ressourcen, die weitgehend statisch sind

Wenn die Antwort weitgehend statisch ist und sich die Header zwischen den Anforderungen voraussichtlich nicht wesentlich ändern, können Sie eine AJAX -Anforderung 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. Auf diese Weise können Sie mithilfe der oben beschriebenen Nice XMLHttpRequest-API auf die benötigten Header zugreifen.

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 Anforderungen 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 Wert, den Sie benötigen, nicht von einer Anfrage zur nächsten ändert.


2. Rückschlüsse

Es gibt einige Stücklisteneigenschaften (Browser Object Model), die der Browser anhand der Überschriften ermittelt. Einige dieser Eigenschaften spiegeln HTTP-Header direkt wider (z. B. wird navigator.userAgent auf den Wert des HTTP-Header-Felds User-Agent gesetzt). Durch Durchsuchen der verfügbaren Eigenschaften können Sie möglicherweise herausfinden, was Sie benötigen, oder einige Hinweise darauf, was die HTTP-Antwort enthielt.


3. Verstaue sie

Wenn Sie die Serverseite steuern, können Sie auf jeden beliebigen Header zugreifen, während Sie die vollständige Antwort erstellen. Werte könnten mit der Seite an den Client übergeben werden, in einem Markup oder vielleicht in einer inline JSON-Struktur. Wenn Sie möchten, dass jeder HTTP-Anforderungsheader für Ihr Javascript verfügbar ist, können Sie ihn auf dem Server durchlaufen und ihn als ausgeblendete Werte im Markup zurücksenden. Es ist wahrscheinlich nicht ideal, Header-Werte auf diese Weise zu senden, aber Sie könnten es auf jeden Fall für den spezifischen Wert tun, den Sie benötigen. Diese Lösung ist wohl auch ineffizient, würde aber die Arbeit erledigen, wenn Sie sie benötigen.

290
keparo

Es ist nicht möglich, die aktuellen Header zu lesen. Sie können eine weitere Anfrage an dieselbe URL senden und deren Überschriften lesen, es kann jedoch nicht garantiert werden, dass die Überschriften exakt mit der aktuellen übereinstimmen.


Verwenden Sie den folgenden JavaScript-Code, um alle HTTP-Header abzurufen, indem Sie eine get -Anforderung ausführen:

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

Mit XmlHttpRequest können Sie die aktuelle Seite aufrufen und anschließend die http-Header der Antwort überprüfen.

Am besten machen Sie einfach eine HEAD -Anforderung und untersuchen dann die Header.

Beispiele dafür finden Sie unter http://www.jibbering.com/2002/4/httprequest.html

Nur meine 2 Cent.

27
Allain Lalonde

Eine Lösung mit Servicemitarbeitern

Servicemitarbeiter können auf Netzwerkinformationen zugreifen, einschließlich Header. Der gute Teil ist, dass es auf jede Art von Anfrage funktioniert, nicht nur auf XMLHttpRequest.

Wie es funktioniert:

  1. Fügen Sie Ihrer Website einen Servicemitarbeiter hinzu.
  2. Beobachten Sie jede gesendete Anfrage.
  3. Machen Sie den Servicemitarbeiter fetch zur Anfrage mit der Funktion respondWith.
  4. Wenn die Antwort eintrifft, lesen Sie die Überschriften.
  5. Senden Sie die Header vom Servicemitarbeiter mit der Funktion postMessage an die Seite.

Arbeitsbeispiel:

Servicemitarbeiter sind etwas kompliziert zu verstehen, deshalb habe ich eine kleine Bibliothek gebaut, die all dies erledigt. Es ist auf github verfügbar: https://github.com/gmetais/sw-get-headers .

Einschränkungen:

  • die Website muss eingeschaltet sein HTTPS
  • der Browser muss die Service Workers API unterstützen
  • die gleichen domänen-/domänenübergreifenden Richtlinien sind in Aktion, genau wie bei XMLHttpRequest
15
Gaël Métais

Für diejenigen, die nach einer Möglichkeit suchen, alle HTTP-Header in ein Objekt zu analysieren, auf das als Dictionary headers["content-type"] zugegriffen werden kann, habe ich eine Funktion parseHttpHeaders erstellt:

function parseHttpHeaders(httpHeaders) {
    return httpHeaders.split("\n")
     .map(x=>x.split(/: */,2))
     .filter(x=>x[0])
     .reduce((ac, x)=>{ac[x[0]] = x[1];return ac;}, {});
}

var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = parseHttpHeaders(req.getAllResponseHeaders());
// Now we can do:  headers["content-type"]
10
Diego

Eine andere Möglichkeit, Header-Informationen an JavaScript zu senden, sind Cookies. Der Server kann alle benötigten Daten aus den Anforderungsheadern extrahieren und sie in einem Antwortheader Set-Cookie zurücksenden. Cookies können in JavaScript gelesen werden. Wie Keparo jedoch sagt, ist es am besten, dies nur für ein oder zwei Überschriften zu tun, anstatt für alle.

9

Wenn es sich um Request Header handelt, können Sie Ihre eigenen Header erstellen, wenn Sie XmlHttpRequests ausführen.

var request = new XMLHttpRequest();
request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
request.open("GET", path, true);
request.send(null);
5
Leo

Sie können nicht auf die http-Header zugreifen, aber einige der darin enthaltenen Informationen sind im DOM verfügbar. Wenn Sie beispielsweise den http-Verweis anzeigen möchten, verwenden Sie document.referrer. Möglicherweise gibt es für andere http-Header auch solche. Versuchen Sie, genau das zu googeln, was Sie möchten, z. B. "http referer javascript".

Ich weiß, dass dies offensichtlich sein sollte, aber ich suchte weiter nach Dingen wie "http headers javascript", als alles, was ich wirklich wollte, der Referrer war, und bekam keine nützlichen Ergebnisse. Ich weiß nicht, wie ich nicht realisiert habe, dass ich eine spezifischere Abfrage durchführen kann.

4
David Winiecki

Mit mootools können Sie this.xhr.getAllResponseHeaders () verwenden.

3
aman

Wie viele Leute habe ich das Netz ohne wirkliche Antwort gegraben :(

Ich habe trotzdem eine Umgehungsstraße gefunden, die anderen helfen könnte. In meinem Fall kontrolliere ich meinen Webserver vollständig. Tatsächlich ist es Teil meiner Bewerbung (siehe Endverweis). Es fällt mir leicht, meiner http-Antwort ein Skript hinzuzufügen. Ich habe meinen httpd-Server so geändert, dass in jede HTML-Seite ein kleines Skript eingefügt wird. Ich schiebe nur eine zusätzliche 'js script'-Zeile direkt nach meiner Header-Konstruktion, die eine vorhandene Variable aus meinem Dokument in meinem Browser festlegt [ich wähle den Ort], aber jede andere Option ist möglich. Während mein Server in nodejs geschrieben ist, habe ich keinen Zweifel, dass die gleiche Technik von PHP oder anderen verwendet werden kann.

  case ".html":
    response.setHeader("Content-Type", "text/html");
    response.write ("<script>location['GPSD_HTTP_AJAX']=true</script>")
    // process the real contend of my page

Jetzt lassen alle von meinem Server geladenen HTML-Seiten dieses Skript vom Browser an der Rezeption ausführen. Ich kann dann einfach über JavaScript prüfen, ob die Variable existiert oder nicht. In meinem Anwendungsfall muss ich wissen, ob ich ein JSON- oder JSON-P-Profil verwenden soll, um ein CORS-Problem zu vermeiden. Die gleiche Technik kann jedoch auch für andere Zwecke verwendet werden [z Schlüssel, etc ....]

Im Browser müssen Sie lediglich die Variable direkt in JavaScript überprüfen, wie in meinem Beispiel, in dem ich sie zur Auswahl meines Json/JQuery-Profils verwende

 // Select direct Ajax/Json profile if using GpsdTracking/HttpAjax server otherwise use JsonP
  var corsbypass = true;  
  if (location['GPSD_HTTP_AJAX']) corsbypass = false;

  if (corsbypass) { // Json & html served from two different web servers
    var gpsdApi = "http://localhost:4080/geojson.rest?jsoncallback=?";
  } else { // Json & html served from same web server [no ?jsoncallback=]
    var gpsdApi = "geojson.rest?";
  }
  var gpsdRqt = 
      {key   :123456789 // user authentication key
      ,cmd   :'list'    // rest command
      ,group :'all'     // group to retreive
      ,round : true     // ask server to round numbers
   };
   $.getJSON(gpsdApi,gpsdRqt, DevListCB);

Für alle, die meinen Code überprüfen möchten: https://www.npmjs.org/package/gpsdtracking

3
Fulup

Ich habe es gerade getestet und das funktioniert für mich mit Chrome Version 28.0.1500.95.

Ich musste eine Datei herunterladen und den Dateinamen lesen. Der Dateiname befindet sich im Header, daher habe ich Folgendes ausgeführt:

var xhr = new XMLHttpRequest(); 
xhr.open('POST', url, true); 
xhr.responseType = "blob";
xhr.onreadystatechange = function () { 
    if (xhr.readyState == 4) {
        success(xhr.response); // the function to proccess the response

        console.log("++++++ reading headers ++++++++");
        var headers = xhr.getAllResponseHeaders();
        console.log(headers);
        console.log("++++++ reading headers end ++++++++");

    }
};

Ausgabe:

Date: Fri, 16 Aug 2013 16:21:33 GMT
Content-Disposition: attachment;filename=testFileName.doc
Content-Length: 20
Server: Apache-Coyote/1.1
Content-Type: application/octet-stream
3
rushmore

Dies ist mein Skript, um alle Antwort-Header zu erhalten:

var url = "< URL >";

var req = new XMLHttpRequest();
req.open('HEAD', url, false);
req.send(null);
var headers = req.getAllResponseHeaders();

//Show alert with response headers.
alert(headers);

Infolgedessen die Antwortheader haben.

enter image description here

Dies ist ein Vergleichstest mit Hurl.it:

enter image description here

2
Jorgesys

Um die Header als ein Objekt zu erhalten, das handlicher ist (Verbesserung von Rajas Antwort ):

var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
headers = headers.split(/\n|\r|\r\n/g).reduce(function(a, b) {
    if (b.length) {
        var [ key, value ] = b.split(': ');
        a[key] = value;
    }
    return a;
}, {});
console.log(headers);
2
shaedrich

Das ist eine alte Frage. Ich bin mir nicht sicher, wann die Unterstützung breiter wurde, aber getAllResponseHeaders() und getResponseHeader() scheinen nun ziemlich standard zu sein: http://www.w3schools.com/xml/dom_http.asp

1
dlo