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

Eine andere Möglichkeit, Kopfzeileninformationen an JavaScript zu senden, wären Cookies. Der Server kann die benötigten Daten aus den Kopfzeilen der Anfrage extrahieren und sie in einer Set-Cookie Antwort-Header - und Cookies können in JavaScript gelesen werden. Wie keparo sagt, ist es jedoch am besten, dies nur für einen oder zwei Header zu tun und nicht für alle.

Answer 2

Für diejenigen, die nach einer Möglichkeit suchen, alle HTTP-Header in ein Objekt zu parsen, 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"]

Answer 3

Sie können nicht auf die http-Header zugreifen, aber einige der darin enthaltenen Informationen sind im DOM verfügbar. Wenn Sie zum Beispiel den http-Referer (sic) sehen wollen, verwenden Sie document.referrer. Für andere http-Header gibt es möglicherweise noch weitere dieser Art. Versuchen Sie, das Gewünschte zu googeln, z. B. "http referer javascript".

Ich weiß, das sollte offensichtlich sein, aber ich habe immer wieder nach Dingen wie "http headers javascript" gesucht, obwohl ich eigentlich nur den Referer wollte, und habe keine brauchbaren Ergebnisse erhalten. Ich weiß nicht, wie ich nicht erkennen konnte, dass ich eine spezifischere Abfrage machen konnte.

Answer 4

Wie viele andere habe auch ich das Netz durchforstet, ohne eine wirkliche Antwort zu finden :(

Trotzdem habe ich einen Bypass gefunden, der anderen helfen könnte. In meinem Fall habe ich die volle Kontrolle über meinen Webserver. In der Tat ist es Teil meiner Anwendung (siehe Endreferenz). Es ist einfach für mich, ein Skript zu meiner http-Antwort hinzuzufügen. Ich habe meinen httpd-Server so modifiziert, dass er ein kleines Skript in jede HTML-Seite einfügt. Ich füge nur eine zusätzliche "js script"-Zeile direkt nach dem Header ein, die eine bestehende Variable aus meinem Dokument in meinem Browser setzt [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 wird dieses Skript auf jeder HTML-Seite, die von meinem Server geladen wird, vom Browser beim Empfang ausgeführt. Ich kann dann mit JavaScript leicht überprüfen, ob die Variable existiert oder nicht. In meinem Anwendungsfall muss ich wissen, ob ich JSON oder JSON-P-Profil verwenden sollte, um CORS-Problem zu vermeiden, aber die gleiche Technik kann für andere Zwecke verwendet werden [dh: wählen Sie zwischen Entwicklungs-/Produktionsserver, erhalten vom Server einen REST/API-Schlüssel, etc ....].

Im Browser müssen Sie nur die Variable direkt von JavaScript aus überprüfen, wie in meinem Beispiel, in dem ich sie benutze, um mein Json/JQuery-Profil auszuwählen

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

Answer 5

Der Link von Allain Lalonde hat mir den Tag versüßt. Nur das Hinzufügen einige einfache Arbeits html-Code hier.
Funktioniert mit jedem vernünftigen Browser seit Ewigkeiten 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 die Kopfzeilen einer zweiten Anfrage, das Ergebnis kann von der ersten Anfrage abweichen.

---

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

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