Zugriff auf die HTTP-Header der Webseite in JavaScript

Antworten:

365

Es ist nicht möglich, die aktuellen Header zu lesen. Sie könnten eine weitere Anfrage an dieselbe URL stellen und deren Header lesen, es gibt jedoch keine Garantie dafür, dass die Header genau dem aktuellen entsprechen.


Verwenden Sie den folgenden JavaScript-Code, um alle HTTP-Header durch Ausführen einer getAnforderung abzurufen:

var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
alert(headers);
Raja
quelle
58
Saeed, vielleicht nicht das Beste für den Autor der Frage. Ich denke, das liegt daran, dass es nicht auf die Header der geladenen Ressource
zugreift
18
Je nachdem, welchen Header Sie suchen, möchten Sie möglicherweise das Verb 'HEAD' verwenden.
Scottrudy
17
Das Erstellen einer neuen Anfrage funktioniert nur, wenn die von Ihnen benötigten Antwortwerte von einer Anfrage zur nächsten garantiert identisch sind. Dies hängt von Ihrer Anwendung ab, sodass Ihre Laufleistung bei einem solchen Ansatz variieren kann.
Keparo
6
Dieser Hack funktioniert möglicherweise in einigen Szenarien, funktioniert jedoch überhaupt nicht, wenn die Seite mit dem Skript als Antwort auf eine POST-Anforderung generiert wurde, und es hilft nicht, wenn Sie feststellen möchten, ob auf dem Server ein Fehler aufgetreten ist (HTTP 5XX) während der Verarbeitung der ursprünglichen Anforderung.
Claymation
9
Diese Antwort ist schrecklich falsch. Die richtige Antwort lautet "es ist nicht möglich". Oder um dieser Antwort zu entsprechen: "Es ist nicht möglich, aber hier ist ein Hack, um zu versuchen, es zu simulieren, was für Sie möglicherweise überhaupt nicht funktioniert."
Januar
301

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 gestellt wurde. Es wurde auch wiederholt gefragt , weil einige Leute die tatsächlichen Antwortheader der ursprünglichen Seitenanforderung erhalten möchten, ohne eine andere auszugeben.


Für AJAX-Anfragen:

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

myXMLHttpRequest.getAllResponseHeaders();

Dies gibt Ihnen keine Informationen über die HTTP-Antwortheader der ursprünglichen Seitenanforderung, kann jedoch verwendet werden, um fundierte Vermutungen über diese Header anzustellen. Mehr dazu wird als nächstes beschrieben.


Abrufen von Header-Werten aus der anfänglichen Seitenanforderung:

Diese Frage wurde vor einigen Jahren zum ersten Mal gestellt und speziell gefragt, 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 nur das Abrufen der Antwortheader für eine HTTP-Anforderung. Bei der ersten Seitenanforderung stehen die Header für Javascript nicht ohne weiteres zur Verfügung. 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 speziellen 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 Seiten waren HTTP-Antwort. Auf diese Weise können Sie mithilfe der oben beschriebenen netten 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 gleich sind. Es hängt von Ihrer spezifischen Anwendung ab und davon, ob Sie wissen, dass sich der von Ihnen benötigte Wert nicht von einer Anfrage zur nächsten ändert.


2. Schlüsse ziehen

Es gibt einige Stücklisteneigenschaften (Browserobjektmodell), die der Browser anhand der Überschriften ermittelt. Einige dieser Eigenschaften spiegeln HTTP-Header direkt wider (z. B. navigator.userAgentwird der Wert des HTTP- User-AgentHeaderfelds festgelegt). Durch Durchsuchen der verfügbaren Eigenschaften können Sie möglicherweise das finden, was Sie benötigen, oder einige Hinweise, die angeben, was die HTTP-Antwort enthielt.


3. Verstauen Sie sie

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

Keparo
quelle
2
Wie Google es erkennt,
kamaci
RE Update: Ajax-Anfragen waren bereits 2008 ein Standardbestandteil der Webentwicklung. -_-
BlueRaja - Danny Pflughoeft
5
Stückliste steht für "Browser Object Model", für diejenigen, die sich fragen. Hintergrundinformationen finden Sie unter stackoverflow.com/questions/2213594/… .
Myrne Stol
1
3) Sie können sie auch im http-Cookie-Header speichern. Dann müssten Sie das Dokument-Markup nicht ändern.
Skibulk
Es gibt eine einfache Möglichkeit, auf die Antwortheaderelemente
zuzugreifen
28

Mit können XmlHttpRequestSie die aktuelle Seite aufrufen und dann die http-Header der Antwort untersuchen.

Am besten machen Sie einfach eine HEADAnfrage und untersuchen dann die Header.

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

Nur meine 2 Cent.

Allain Lalonde
quelle
24

Eine Lösung mit Servicemitarbeitern

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

Wie es funktioniert:

  1. Fügen Sie Ihrer Website einen Servicemitarbeiter hinzu.
  2. Beobachten Sie jede Anfrage, die gesendet wird.
  3. Machen Sie den Servicemitarbeiter fetchzur Anforderung mit der respondWithFunktion.
  4. Wenn die Antwort eintrifft, lesen Sie die Header.
  5. Senden Sie die Header vom Servicemitarbeiter an die Seite mit der postMessageFunktion.

Arbeitsbeispiel:

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

Einschränkungen:

  • Die Website muss auf HTTPS sein
  • Der Browser muss die Service Workers- API unterstützen
  • Die domänen- / domänenübergreifenden Richtlinien werden genau wie bei XMLHttpRequest ausgeführt
Gaël Métais
quelle
12

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

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"]
Diego
quelle
10

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

savetheclocktower
quelle
1
Für diesen Ansatz müssen Sie weiterhin den Server für Ihr JS steuern. Unabhängig davon, wie Sie diese Informationen kommunizieren, wurde Ihr Code plötzlich nicht mehr zwischenspeicherbar gemacht. Warum nicht einfach eine API für diese bestimmte Anforderung erstellen, um eine Beschädigung der Anforderung für das ursprüngliche Asset zu vermeiden?
MST
5

Wenn es sich um Anforderungsheader handelt , können Sie beim Ausführen von XmlHttpRequests eigene Header erstellen.

var request = new XMLHttpRequest();
request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
request.open("GET", path, true);
request.send(null);
Löwe
quelle
Sie können den Anforderungsheader in Mozilla aus Sicherheitsgründen nicht ändern. mxr.mozilla.org/mozilla1.8.0/source/extensions/xmlextras/base/…
user121196
1
Sie müssen open () aufrufen, bevor Sie die setRequestHeader () -Methode verwenden. developer.mozilla.org/en/…
XP1
1
Bei Access geht es in der ursprünglichen Frage darum, Header abzurufen und keine Header festzulegen.
Timo Tijhof
4

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-Referer (sic) anzeigen möchten, verwenden Sie document.referrer. Möglicherweise gibt es andere für solche http-Header. Versuchen Sie, die gewünschte Sache zu googeln, z. B. "http referer javascript".

Ich weiß, dass dies offensichtlich sein sollte, aber ich suchte weiter nach Dingen wie "http headers javascript", als ich nur den Referer wollte und keine nützlichen Ergebnisse erzielte. Ich weiß nicht, wie ich nicht realisiert habe, dass ich eine spezifischere Anfrage stellen könnte.

David Winiecki
quelle
4

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

Ich habe trotzdem einen Bypass gefunden, der anderen helfen könnte. In meinem Fall kontrolliere ich meinen Webserver vollständig. Tatsächlich ist es Teil meiner Bewerbung (siehe Endreferenz). 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 drücke nur direkt nach meiner Header-Konstruktion eine zusätzliche 'js script'-Zeile, die eine vorhandene Variable aus meinem Dokument in meinem Browser festlegt [ich wähle den Speicherort], aber jede andere Option ist möglich. Während mein Server in nodejs geschrieben ist, habe ich keinen Zweifel daran, dass dieselbe 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 Sie alle von meinem Server geladenen HTML-Seiten dieses Skript an der Rezeption vom Browser ausführen. Ich kann dann einfach anhand von JavaScript überprüfen, ob die Variable vorhanden ist oder nicht. In meinem Anwendungsfall muss ich wissen, ob ich ein JSON- oder JSON-P-Profil verwenden soll, um CORS-Probleme zu vermeiden. Die gleiche Technik kann jedoch auch für andere Zwecke verwendet werden Schlüssel usw. ....]

Im Browser müssen Sie nur die Variable direkt aus JavaScript überprüfen, wie in meinem Beispiel, wo ich damit mein Json / JQuery-Profil auswähle

 // 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

Fulup
quelle
3

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


quelle
3

Ich habe gerade getestet, und dies funktioniert bei mir mit Chrome Version 28.0.1500.95.

Ich musste eine Datei herunterladen und den Dateinamen lesen. Der Dateiname befindet sich in der Kopfzeile, daher habe ich Folgendes getan:

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
Rushmore
quelle
2

Dies ist mein Skript, um alle Antwortheader abzurufen:

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

Als Ergebnis die Antwort-Header.

Geben Sie hier die Bildbeschreibung ein

Dies ist ein Vergleichstest mit Hurl.it:

Geben Sie hier die Bildbeschreibung ein

Jorgesys
quelle
2

So erhalten Sie die Überschriften als handlicheres Objekt (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);
shaedrich
quelle
2

Allain Lalondes Link machte meinen Tag. Fügen Sie hier einfach einfachen HTML-Code hinzu.
Funktioniert mit jedem vernünftigen Browser seit Jahren plus IE9 + und Presto-Opera 12.

<!DOCTYPE html>
<title>(XHR) Show all response headers</title>

<h1>All Response Headers with XHR</h1>
<script>
 var X= new XMLHttpRequest();
 X.open("HEAD", location);
 X.send();
 X.onload= function() { 
   document.body.appendChild(document.createElement("pre")).textContent= X.getAllResponseHeaders();
 }
</script>

Hinweis: Sie erhalten Header einer zweiten Anforderung. Das Ergebnis kann von der ursprünglichen Anforderung abweichen.


Ein anderer Weg
ist die modernere fetch()API
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
Per caniuse.com , die von Firefox 40, Chrome 42, Edge 14, Safari 11 unterstützt wird.
Arbeitsbeispiel Code:

<!DOCTYPE html>
<title>fetch() all Response Headers</title>

<h1>All Response Headers with fetch()</h1>
<script>
 var x= "";
 if(window.fetch)
    fetch(location, {method:'HEAD'})
    .then(function(r) {
       r.headers.forEach(
          function(Value, Header) { x= x + Header + "\n" + Value + "\n\n"; }
       );
    })
    .then(function() {
       document.body.appendChild(document.createElement("pre")).textContent= x;
    });
 else
   document.write("This does not work in your browser - no support for fetch API");
</script>
jj
quelle
0

Dies ist eine alte Frage. Nicht sicher , wenn Unterstützung breiter geworden, aber getAllResponseHeaders()und getResponseHeader()scheinen nun ziemlich Standard zu sein: http://www.w3schools.com/xml/dom_http.asp

dlo
quelle
50
getAllResponseHeaders () und getResponseHeader () sind Methoden des XMLHttpRequest-Objekts. Dh für Ajax-Anfragen. Sie können diese Methoden nicht verwenden, um Kopfzeilen der ersten Seite anzuzeigen - was meiner Meinung nach die ursprüngliche Frage wirklich war.
Asgeo1
-1

Wie bereits erwähnt, sollte es möglich sein, die anfänglichen Anforderungsheader in der ersten Antwort an den Client zurückzusenden, wenn Sie die Serverseite steuern.

In Express funktioniert beispielsweise Folgendes:

app.get('/somepage', (req, res) => { res.render('somepage.hbs', {headers: req.headers}); }) Die Header sind dann in der Vorlage verfügbar, können also visuell ausgeblendet, aber im Markup enthalten und von clientseitigem Javascript gelesen werden.

Ollie Williams
quelle
Die Frage fragt nach Antwort - Header, nicht - Request - Header.
Quentin
-1

Ich denke, die Frage ist falsch gelaufen. Wenn Sie den Anforderungsheader von JQuery / JavaScript übernehmen möchten, lautet die Antwort einfach Nein. Die andere Lösung besteht darin, eine Aspx- oder JSP-Seite zu erstellen. Dann können wir problemlos auf den Anforderungsheader zugreifen. Nehmen Sie alle Anfragen auf der Aspx-Seite entgegen und setzen Sie sie in eine Sitzung / Cookies. Dann können Sie auf die Cookies auf der JavaScript-Seite zugreifen.

Santhos Jery
quelle
1
Die Frage ist zu fragen über die Lese Antwort - Header. Die Anforderungsheader werden nur im Zusammenhang mit der möglicherweise verwandten Frage erwähnt.
Quentin