Acceso a los encabezados HTTP de la página web en JavaScript

https://stackoverflow.com/questions/220231

03-07-2019
|

Pregunta

¿Cómo accedo a los encabezados de respuesta HTTP de una página a través de JavaScript?

Relacionado con esta pregunta , que se modificó para preguntar sobre el acceso a dos encabezados HTTP específicos.

Relacionados:
¿Cómo accedo a los campos de encabezado de solicitud HTTP a través de JavaScript?

Solución 2

Desafortunadamente, no hay una API que le proporcione los encabezados de respuesta HTTP para su solicitud de página inicial. Esa fue la pregunta original publicada aquí. Ha sido repetidamente preguntado , también, porque a algunas personas les gustaría obtener los encabezados de respuesta reales de la solicitud de página original sin emitir otro.

para solicitudes AJAX:

Si se realiza una solicitud HTTP a través de AJAX, es posible obtener los encabezados de respuesta con el método getAllResponseHeaders() . Es parte de la API XMLHttpRequest. Para ver cómo se puede aplicar esto, consulte la función fetchSimilarHeaders() a continuación. Tenga en cuenta que esta es una solución al problema que no será confiable para algunas aplicaciones.

myXMLHttpRequest.getAllResponseHeaders();

La API se especificó en la siguiente recomendación de candidato para XMLHttpRequest: XMLHttpRequest - Recomendación del candidato del W3C 3 de agosto de 2010
Específicamente, el método getAllResponseHeaders () se especificó en la siguiente sección: w3.org: XMLHttpRequest : el getallresponseheaders () método
La documentación de MDN también es buena: developer.mozilla .org: XMLHttpRequest .

Esto no le proporcionará información sobre los encabezados de respuesta HTTP de la solicitud de la página original, pero podría usarse para hacer conjeturas informadas sobre cuáles eran esos encabezados. Más sobre eso se describe a continuación.

Obtención de valores de encabezado de la solicitud de página inicial:

Esta pregunta se hizo por primera vez hace varios años, preguntando específicamente cómo llegar a los encabezados de respuesta HTTP originales para la página actual (es decir, la misma página dentro de la cual se estaba ejecutando JavaScript). Esta es una pregunta muy diferente a la simple obtención de los encabezados de respuesta para cualquier solicitud HTTP. Para la solicitud de la página inicial, los encabezados no están disponibles para javascript. Si los valores de encabezado que necesita serán confiables y suficientemente consistentes si solicita la misma página nuevamente a través de AJAX dependerá de su aplicación particular.

Las siguientes son algunas sugerencias para solucionar ese problema.

1. Solicitudes de recursos que son en gran parte estáticas

Si la respuesta es en gran medida estática y no se espera que los encabezados cambien mucho entre las solicitudes, puede hacer una solicitud AJAX para la misma página en la que se encuentra actualmente y asumir que son los mismos valores que formaron parte de la respuesta HTTP de la página. Esto podría permitirle acceder a los encabezados que necesita utilizando la agradable API XMLHttpRequest descrita anteriormente.

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

Este enfoque será problemático si realmente tiene que confiar en que los valores sean consistentes entre las solicitudes, ya que no puede garantizar completamente que sean iguales. Dependerá de su aplicación específica y de si sabe que el valor que necesita es algo que no cambiará de una solicitud a la siguiente.

2. Hacer inferencias

Hay algunas propiedades de BOM (Modelo de objetos del navegador) que el navegador determina al mirar los encabezados. Algunas de estas propiedades reflejan los encabezados HTTP directamente (por ejemplo, navigator.userAgent se establece en el valor del campo de encabezado HTTP User-Agent ). Al rastrear las propiedades disponibles, es posible que pueda encontrar lo que necesita o algunas pistas para indicar qué contenía la respuesta HTTP.

3. Guárdalos

Si controla el lado del servidor, puede acceder a cualquier encabezado que desee mientras construye la respuesta completa. Los valores se pueden pasar al cliente con la página, escondidos en algún marcado o tal vez en una estructura JSON en línea. Si desea tener todos los encabezados de solicitud HTTP disponibles para su javascript, puede iterar a través de ellos en el servidor y enviarlos de regreso como valores ocultos en el marcado. Probablemente no sea ideal enviar valores de encabezado de esta manera, pero ciertamente podría hacerlo por el valor específico que necesita. Podría decirse que esta solución también es ineficiente, pero haría el trabajo si la necesitara.

Otros consejos

No es posible leer los encabezados actuales. Puede realizar otra solicitud a la misma URL y leer sus encabezados, pero no hay garantía de que los encabezados sean exactamente iguales a los actuales.

Utilice el siguiente código JavaScript para obtener todos los encabezados HTTP realizando una solicitud get :

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

Usando XmlHttpRequest puede abrir la página actual y luego examinar los encabezados http de la respuesta.

El mejor caso es simplemente hacer una solicitud de HEAD y luego examinar los encabezados.

Para ver algunos ejemplos de esto, consulte http: //www.jibbering. com / 2002/4 / httprequest.html

Solo mis 2 centavos.

Una solución con Service Workers

Los trabajadores del servicio pueden acceder a la información de la red, que incluye encabezados. Lo bueno es que funciona con cualquier tipo de solicitud, no solo con XMLHttpRequest.

Cómo funciona:

Agregue un trabajador de servicio en su sitio web.
Observe todas las solicitudes que se envían.
Haga que el trabajador del servicio fetch la solicitud con la función respondWith .
Cuando llegue la respuesta, lea los encabezados.
Envíe los encabezados del trabajador de servicios a la página con la función postMessage .

Ejemplo de trabajo:

Los trabajadores de servicio son un poco complicados de entender, así que he construido una pequeña biblioteca que hace todo esto Está disponible en github: https://github.com/gmetais/sw-get-headers .

Limitaciones:

el sitio web debe estar en HTTPS
el navegador debe ser compatible con la Service Workers API
las políticas del mismo dominio / dominio cruzado están en acción, como en XMLHttpRequest

Otra forma de enviar información de encabezado a JavaScript sería a través de cookies. El servidor puede extraer los datos que necesita de los encabezados de solicitud y enviarlos de regreso dentro de un encabezado de respuesta Set-Cookie , y las cookies se pueden leer en JavaScript. Sin embargo, como dice keparo, es mejor hacer esto solo para uno o dos encabezados, en lugar de para todos ellos.

Para aquellos que buscan una forma de analizar todos los encabezados HTTP en un objeto al que se puede acceder como encabezados del diccionario [" content-type "] , he creado una función 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"]

Si hablamos de Solicitud de encabezados, puedes crear tus propios encabezados cuando hagas XmlHttpRequests.

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

No puede acceder a los encabezados http, pero parte de la información proporcionada en ellos está disponible en el DOM. Por ejemplo, si desea ver el referente de http (sic), use document.referrer. Puede haber otros como este para otros encabezados http. Intente buscar en Google la cosa específica que desee, como " http referer javascript " ;.

Sé que esto debería ser obvio, pero seguí buscando cosas como " http headers javascript " cuando todo lo que realmente quería era el árbitro, y no obtuve ningún resultado útil. No sé cómo no me di cuenta de que podía hacer una consulta más específica.

Usando mootools, puedes usar this.xhr.getAllResponseHeaders ()

Como muchas personas, he estado cavando la red sin una respuesta real :(

Sin embargo, descubrí un bypass que podría ayudar a otros. En mi caso yo controlo totalmente mi servidor web. De hecho, es parte de mi aplicación (ver referencia final). Es fácil para mí agregar un script a mi respuesta http. Modifiqué mi servidor httpd para inyectar un pequeño script en cada página html. Solo presiono una línea 'js script' extra justo después de la construcción de mi encabezado, que establece una variable existente en mi documento dentro de mi navegador [elijo la ubicación], pero cualquier otra opción es posible. Si bien mi servidor está escrito en nodejs, no tengo dudas de que se puede usar la misma técnica desde PHP u otros.

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

Ahora todas las páginas html cargadas desde mi servidor, tienen este script ejecutado por el navegador en la recepción. Entonces puedo verificar fácilmente desde JavaScript si la variable existe o no. En mi caso de uso, necesito saber si debo usar el perfil JSON o JSON-P para evitar problemas de CORS, pero la misma técnica se puede usar para otros fines [es decir: elegir entre el servidor de desarrollo / producción, obtener del servidor un REST / API llave, etc ....]

En el navegador, solo necesitas verificar la variable directamente desde JavaScript como en mi ejemplo, donde lo uso para seleccionar mi perfil 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);

Para quien quiera que quiera revisar mi código: https://www.npmjs.org/package/gpsdtracking

Acabo de realizar una prueba y esto me funciona con la versión de Chrome 28.0.1500.95.

Necesitaba descargar un archivo y leer el nombre del archivo. El nombre del archivo está en el encabezado, así que hice lo siguiente:

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

    }
};

Salida:

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

Esta es una vieja pregunta. No estoy seguro de cuándo el soporte se hizo más amplio, pero getAllResponseHeaders () y getResponseHeader () ahora parecen ser bastante estándar: http://www.w3schools.com/xml/dom_http.asp

Este es mi script para obtener todos los encabezados de respuesta:

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

Teniendo como resultado los encabezados de respuesta.

Esta es una prueba de comparación que utiliza Hurl.it:

Para obtener los encabezados como un objeto más práctico (mejora de respuesta de 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);

Como ya se ha mencionado, si controla el lado del servidor, debería ser posible enviar los encabezados de solicitud iniciales al cliente en la respuesta inicial.

En Express, por ejemplo, los siguientes trabajos:

app.get ('/ somepage', (req, res) = > { res.render ('somepage.hbs', {encabezados: req.headers}); }) Los encabezados están disponibles dentro de la plantilla, por lo que podrían estar ocultos visualmente pero incluidos en el marcado y leídos por javascript del lado del cliente.

Creo que la pregunta salió mal, Si desea tomar el encabezado de solicitud de JQuery / JavaScript, la respuesta es simplemente No. Las otras soluciones son crear una página aspx o una página jsp, entonces podemos acceder fácilmente al encabezado de la solicitud. Tome toda la solicitud en la página aspx y colóquela en una sesión / cookies, luego puede acceder a las cookies en la página JavaScript.

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow