llamar - Acceder a los encabezados HTTP de la página web en JavaScript

llamar javascript desde html

Question

¿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.

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

Answer 1

Una solución con los trabajadores del servicio.

Los trabajadores de servicios pueden acceder a la información de la red, que incluye encabezados. La parte buena es que funciona en cualquier tipo de solicitud, no solo en XMLHttpRequest.

Cómo funciona:

1. Agregue un trabajador de servicio en su sitio web.
2. Mira cada solicitud que está siendo enviada.
3. Haga que el trabajador de servicio respondWith la solicitud con la función respondWith .
4. Cuando llegue la respuesta, lea los encabezados.
5. 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 construí 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 necesita ser compatible con la nueva API de trabajadores del servicio
• las políticas del mismo dominio / dominio cruzado están en acción, al igual que en XMLHttpRequest

Answer 2

Acabo de probarlo, 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

Answer 3

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

Sin embargo, he descubierto un bypass que podría ayudar a otros. En mi caso yo controlo totalmente mi servidor web. De hecho, es parte de mi solicitud (ver la 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 extra ''js script'' 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 necesita 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 ver mi código: https://www.npmjs.org/package/gpsdtracking

Answer 4

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'', {headers: req.headers}); }) Los encabezados están disponibles dentro de la plantilla, por lo que podría estar oculto visualmente pero incluido en el marcado y leído por javascript del lado del cliente.

Answer 5

Desafortunadamente, no hay una API que le dé los encabezados de respuesta HTTP para su solicitud de página inicial. Esa fue la pregunta original publicada aquí. También se ha solicitado repetidamente , porque algunas personas desean obtener los encabezados de respuesta reales de la solicitud de la página original sin emitir otra.

Para solicitudes de 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() continuación. Tenga en cuenta que esto 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 método getallresponseheaders()

• La documentación de MDN también es buena: developer.mozilla.org: XMLHttpRequest .

Esto no le dará información sobre los encabezados de respuesta HTTP de la solicitud de la página original, pero se podría usar 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 fue formulada por primera vez hace varios años, preguntando específicamente sobre cómo obtener los encabezados de respuesta HTTP originales para la página actual (es decir, la misma página dentro de la cual se estaba ejecutando el 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 lo 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 parte estática y no se espera que los encabezados cambien mucho entre solicitudes, puede realizar una solicitud AJAX para la misma página en la que está actualmente y asumir que son los mismos valores que formaban parte de la página. Respuesta HTTP. Esto podría permitirle acceder a los encabezados que necesita utilizando la API XMLHttpRequest descrita anteriormente.

function fetchSimilarHeaders (callback) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            //
            // 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 otra.

2. Hacer inferencias

Hay algunas propiedades de la lista de materiales (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. esconderlos

Si controla el lado del servidor, puede acceder a cualquier encabezado que desee mientras construye la respuesta completa. Los valores podrían pasarse al cliente con la página, escondidos en algún marcado o tal vez en una estructura JSON en línea. Si quisiera tener todos los encabezados de solicitud HTTP disponibles para su javascript, podría iterarlos en el servidor y enviarlos 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. Esta solución es posiblemente ineficiente también, pero haría el trabajo si la necesitara.

Answer 6

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

Answer 7

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 usando Hurl.it:

Answer 8

No es posible leer los encabezados actuales. Puede hacer 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 de get :

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

Answer 9

No puede acceder a los encabezados http, pero parte de la información provista 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 javascript de encabezados" cuando lo único que quería era el referente 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.

Answer 10

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 vuelta dentro del encabezado de respuesta Set-Cookie , y las cookies se pueden leer en JavaScript. Sin embargo, como dice Keparo, es mejor hacer esto solo por uno o dos encabezados, en lugar de hacerlo por todos.

Answer 11

Para aquellos que buscan una manera de analizar todos los encabezados HTTP en un objeto al que se puede acceder como headers["content-type"] diccionarios headers["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"]

Answer 12

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

Answer 13

Si estamos hablando de los encabezados de solicitud , puede crear sus propios encabezados al realizar XmlHttpRequests.

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

Answer 14

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

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

Para ver algunos ejemplos de cómo hacerlo, visite http://www.jibbering.com/2002/4/httprequest.html

Sólo mis 2 centavos.

Answer 15

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