Come posso accedere alle intestazioni di risposta HTTP di una pagina tramite JavaScript?

Relativo a questa domanda , che è stata modificata per chiedere l'accesso a due specifiche intestazioni HTTP.

Correlati:
Come posso accedere ai campi dell'intestazione della richiesta HTTP tramite JavaScript?

Non è possibile leggere le intestazioni correnti. Puoi fare un'altra richiesta allo stesso URL e leggere le sue intestazioni, ma non vi è alcuna garanzia che le intestazioni siano esattamente uguali alla corrente.

Utilizzare il seguente codice JavaScript per ottenere tutte le intestazioni HTTP eseguendo una getrichiesta:

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

Sfortunatamente, non esiste un'API che ti dia le intestazioni di risposta HTTP per la tua richiesta di pagina iniziale. Questa era la domanda originale pubblicata qui. È stato anche chiesto più volte , perché alcune persone vorrebbero ottenere le intestazioni di risposta effettive della richiesta di pagina originale senza emetterne un'altra.

Per richieste AJAX:

Se viene effettuata una richiesta HTTP su AJAX, è possibile ottenere le intestazioni di risposta con il getAllResponseHeaders()metodo. Fa parte dell'API XMLHttpRequest. Per vedere come può essere applicato, dai un'occhiata alla fetchSimilarHeaders()seguente funzione. Si noti che questa è una soluzione al problema che non sarà affidabile per alcune applicazioni.

myXMLHttpRequest.getAllResponseHeaders();

• L'API è stata specificata nella seguente raccomandazione del candidato per XMLHttpRequest: XMLHttpRequest - Raccomandazione per il candidato W3C 3 agosto 2010

• In particolare, il getAllResponseHeaders()metodo è stato specificato nella seguente sezione: w3.org XMLHttpRequest:: il getallresponseheaders()metodo

• La documentazione MDN è buono, troppo: developer.mozilla.org:XMLHttpRequest .

Questo non ti darà informazioni sulle intestazioni di risposta HTTP della richiesta della pagina originale, ma potrebbe essere usato per fare ipotesi istruite su quali fossero quelle intestazioni. Ulteriori informazioni verranno descritte di seguito.

Ottenere valori di intestazione dalla richiesta di pagina iniziale:

Questa domanda è stata posta per la prima volta diversi anni fa, chiedendo in particolare come ottenere le intestazioni di risposta HTTP originali per la pagina corrente (ovvero la stessa pagina all'interno della quale era in esecuzione il javascript). Questa è una domanda piuttosto diversa rispetto al semplice ottenere le intestazioni di risposta per qualsiasi richiesta HTTP. Per la richiesta di pagina iniziale, le intestazioni non sono prontamente disponibili per JavaScript. Se i valori di intestazione necessari saranno affidabili e sufficientemente coerenti se si richiede nuovamente la stessa pagina tramite AJAX dipenderà dalla propria applicazione specifica.

Di seguito sono riportati alcuni suggerimenti per aggirare il problema.

1. Richieste di risorse ampiamente statiche

Se la risposta è in gran parte statica e non ci si aspetta che le intestazioni cambino molto tra le richieste, è possibile effettuare una richiesta AJAX per la stessa pagina in cui ci si trova attualmente e supporre che siano gli stessi valori che facevano parte della pagina Risposta HTTP. Ciò potrebbe consentire di accedere alle intestazioni necessarie utilizzando la bella API XMLHttpRequest descritta sopra.

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

Questo approccio sarà problematico se devi veramente fare affidamento sul fatto che i valori siano coerenti tra le richieste, poiché non puoi garantire completamente che siano uguali. Dipenderà dalla tua specifica applicazione e se sai che il valore che ti serve è qualcosa che non cambierà da una richiesta all'altra.

2. Fai Inferenze

Esistono alcune proprietà della distinta componenti (modello a oggetti del browser) che il browser determina osservando le intestazioni. Alcune di queste proprietà riflettono direttamente le intestazioni HTTP (ad es. navigator.userAgentÈ impostato sul valore del User-Agentcampo dell'intestazione HTTP ). Annusando le proprietà disponibili potresti essere in grado di trovare ciò di cui hai bisogno o alcuni indizi per indicare cosa conteneva la risposta HTTP.

3. Stash loro

Se controlli il lato server, puoi accedere a qualsiasi intestazione che ti piace mentre costruisci la risposta completa. I valori possono essere passati al client con la pagina, inseriti in un markup o forse in una struttura JSON incorporata. Se si desidera avere tutte le intestazioni delle richieste HTTP disponibili sul proprio javascript, è possibile scorrere attraverso di esse sul server e inviarle come valori nascosti nel markup. Probabilmente non è l'ideale inviare i valori di intestazione in questo modo, ma potresti certamente farlo per il valore specifico di cui hai bisogno. Anche questa soluzione è probabilmente inefficiente, ma farebbe il lavoro se ne avessi bisogno.

Utilizzando XmlHttpRequestè possibile visualizzare la pagina corrente e quindi esaminare le intestazioni http della risposta.

Il caso migliore è semplicemente fare una HEADrichiesta e quindi esaminare le intestazioni.

Per alcuni esempi di ciò, dai un'occhiata a http://www.jibbering.com/2002/4/httprequest.html

Solo i miei 2 centesimi.

Una soluzione con Service Workers

Gli addetti all'assistenza sono in grado di accedere alle informazioni di rete, comprese le intestazioni. La parte buona è che funziona su qualsiasi tipo di richiesta, non solo su XMLHttpRequest.

Come funziona:

1. Aggiungi un addetto all'assistenza sul tuo sito web.
2. Guarda ogni richiesta che viene inviata.
3. Rendere il lavoratore dell'assistenza fetchla richiesta con la respondWithfunzione.
4. Quando arriva la risposta, leggi le intestazioni.
5. Invia le intestazioni dal tecnico dell'assistenza alla pagina con il postMessage funzione.

Esempio funzionante:

Gli addetti all'assistenza sono un po 'complicati da capire, quindi ho creato una piccola libreria che fa tutto questo. È disponibile su github: https://github.com/gmetais/sw-get-headers .

limitazioni:

• il sito Web deve essere attivo HTTPS
• il browser deve supportare il API di Service Workers
• le politiche dello stesso dominio / tra domini sono in azione, proprio come su XMLHttpRequest

Per coloro che cercano un modo per analizzare tutte le intestazioni HTTP in un oggetto a cui è possibile accedere come dizionario headers["content-type"], ho creato una funzione 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"]

Un altro modo per inviare informazioni di intestazione a JavaScript sarebbe attraverso i cookie. Il server può estrarre tutti i dati necessari dalle intestazioni della richiesta e rispedirli all'interno di Set-Cookieun'intestazione di risposta, e i cookie possono essere letti in JavaScript. Come dice Keparo, tuttavia, è meglio farlo solo per una o due intestazioni, piuttosto che per tutte.

Se parliamo di intestazioni Request , puoi creare le tue intestazioni quando esegui XmlHttpRequests.

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

Non è possibile accedere alle intestazioni http, ma alcune delle informazioni fornite in esse sono disponibili nel DOM. Ad esempio, se si desidera vedere il referer http (sic), utilizzare document.referrer. Potrebbero essercene altri come questo per altre intestazioni http. Prova a cercare su google la cosa specifica che desideri, ad esempio "http referer javascript".

So che questo dovrebbe essere ovvio, ma ho continuato a cercare cose come "http headers javascript" quando tutto quello che volevo davvero era il referente e non ho ottenuto risultati utili. Non so come non mi fossi reso conto di poter fare una query più specifica.

Come molte persone ho scavato la rete senza una vera risposta :(

Ho comunque scoperto un bypass che potrebbe aiutare gli altri. Nel mio caso controllo completamente il mio server web. In realtà fa parte della mia applicazione (vedi riferimento finale). È facile per me aggiungere uno script alla mia risposta http. Ho modificato il mio server httpd per iniettare un piccolo script all'interno di ogni pagina html. Spingo solo una riga aggiuntiva "js script" subito dopo la costruzione della mia intestazione, che imposta una variabile esistente dal mio documento nel mio browser [scelgo la posizione], ma è possibile qualsiasi altra opzione. Mentre il mio server è scritto in nodejs, non ho dubbi che la stessa tecnica possa essere utilizzata da PHP o da altri.

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

Ora tutte le pagine html caricate dal mio server hanno questo script eseguito dal browser alla reception. Posso quindi controllare facilmente da JavaScript se la variabile esiste o no. Nel mio caso d'uso ho bisogno di sapere se dovrei usare il profilo JSON o JSON-P per evitare il problema CORS, ma la stessa tecnica può essere utilizzata per altri scopi [cioè: scegliere tra server di sviluppo / produzione, ottenere dal server un REST / API chiave, ecc ....]

Sul browser devi solo controllare la variabile direttamente da JavaScript come nel mio esempio, dove la utilizzo per selezionare il mio profilo Json / JQuery

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

Per chi mai vorrebbe controllare il mio codice: https://www.npmjs.org/package/gpsdtracking

Usando mootools, puoi usare this.xhr.getAllResponseHeaders ()

Ho appena testato e questo funziona per me utilizzando la versione di Chrome 28.0.1500.95.

Avevo bisogno di scaricare un file e leggere il nome del file. Il nome del file è nell'intestazione, quindi ho fatto quanto segue:

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

    }
};

Produzione:

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

Questo è il mio script per ottenere tutte le intestazioni di risposta:

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

Avendo di conseguenza le intestazioni di risposta.

Questo è un test comparativo con Hurl.it:

Per ottenere le intestazioni come un oggetto più maneggevole (miglioramento della risposta di Raja ):

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

Il collegamento di Allain Lalonde ha reso la mia giornata. Basta aggiungere un po 'di codice HTML funzionante qui.
Funziona con qualsiasi browser ragionevole da anni più IE9 + e 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>

Nota: ottieni le intestazioni di una seconda richiesta, il risultato potrebbe differire dalla richiesta iniziale.

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

Questa è una vecchia domanda. Non sono sicuro quando il supporto diventerà più ampio, ma getAllResponseHeaders()e getResponseHeader()ora sembrano essere abbastanza standard: http://www.w3schools.com/xml/dom_http.asp

Come già accennato, se si controlla il lato server, dovrebbe essere possibile inviare le intestazioni della richiesta iniziale al client nella risposta iniziale.

In Express, ad esempio, i seguenti lavori:

app.get('/somepage', (req, res) => { res.render('somepage.hbs', {headers: req.headers}); }) Le intestazioni sono quindi disponibili all'interno del modello, quindi potrebbero essere nascoste visivamente ma incluse nel markup e lette da JavaScript lato client.

Penso che la domanda sia andata nel modo sbagliato, se vuoi prendere l'intestazione Request da JQuery / JavaScript la risposta è semplicemente No. Le altre soluzioni sono creare una pagina aspx o una pagina jsp, quindi possiamo facilmente accedere all'intestazione della richiesta. Prendi tutte le richieste nella pagina aspx e inseriscile in una sessione / cookie quindi puoi accedere ai cookie nella pagina JavaScript.