Acessando os cabeçalhos HTTP da página da Web em JavaScript

Respostas:

365

Não é possível ler os cabeçalhos atuais. Você pode fazer outra solicitação para o mesmo URL e ler seus cabeçalhos, mas não há garantia de que os cabeçalhos sejam exatamente iguais aos atuais.


Use o seguinte código JavaScript para obter todos os cabeçalhos HTTP executando uma getsolicitação:

var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
alert(headers);
Rajá
fonte
58
Saeed, talvez não seja o melhor para o autor da pergunta .. Eu acho que é porque ele não acessa os cabeçalhos do recurso carregado, mas faz uma nova solicitação .. obviamente ele sabe o melhor, qual é a melhor resposta e o fez sozinho
mykhal
18
Dependendo do cabeçalho que você procura, você pode usar o verbo 'HEAD'.
#
17
Fazer uma nova solicitação funcionará apenas se os valores de resposta necessários forem idênticos de uma solicitação para a seguinte. Isso dependerá da sua aplicação, portanto, sua milhagem com uma abordagem como essa varia.
keparo
6
Esse hack pode funcionar em alguns cenários, mas não funcionará se a página que contém o script foi gerada em resposta a uma solicitação POST e não ajuda se você estiver tentando determinar se o servidor encontrou um erro (HTTP 5XX) durante o processamento da solicitação original.
claymation 23/10
9
Esta resposta está terrivelmente errada. A resposta correta é "não é possível". Ou, para ajustar esta resposta "Não é possível, mas aqui está um truque para tentar simulá-la, o que pode ou não funcionar para você".
Janeiro
301

Infelizmente, não há uma API para fornecer os cabeçalhos de resposta HTTP para sua solicitação de página inicial. Essa foi a pergunta original postada aqui. Também foi solicitado repetidamente , porque algumas pessoas gostariam de obter os cabeçalhos de resposta reais da solicitação de página original sem emitir outro.


Para solicitações AJAX:

Se uma solicitação HTTP for feita sobre AJAX, é possível obter os cabeçalhos de resposta com o getAllResponseHeaders()método Faz parte da API XMLHttpRequest. Para ver como isso pode ser aplicado, confira a fetchSimilarHeaders()função abaixo. Observe que esta é uma solução alternativa para o problema que não será confiável para alguns aplicativos.

myXMLHttpRequest.getAllResponseHeaders();

Isso não fornecerá informações sobre os cabeçalhos de resposta HTTP da solicitação de página original, mas pode ser usado para fazer palpites sobre o que esses cabeçalhos eram. Mais sobre isso é descrito a seguir.


Obtendo valores de cabeçalho da solicitação de página inicial:

Esta pergunta foi feita pela primeira vez há vários anos, perguntando especificamente sobre como obter os cabeçalhos de resposta HTTP originais da página atual (ou seja, a mesma página dentro da qual o javascript estava sendo executado). Essa é uma pergunta bem diferente do que simplesmente obter os cabeçalhos de resposta para qualquer solicitação HTTP. Para a solicitação inicial da página, os cabeçalhos não estão prontamente disponíveis para javascript. Se os valores de cabeçalho que você precisa serão confiáveis ​​e suficientemente consistentes se você solicitar a mesma página novamente via AJAX dependerá do seu aplicativo específico.

A seguir, são apresentadas algumas sugestões para solucionar esse problema.


1. Solicitações de recursos amplamente estáticos

Se a resposta for basicamente estática e não for esperado que os cabeçalhos mudem muito entre as solicitações, você poderá fazer uma solicitação AJAX para a mesma página em que está atualmente e assumir que são os mesmos valores que faziam parte da página Resposta HTTP. Isso pode permitir que você acesse os cabeçalhos necessários usando a agradável API XMLHttpRequest descrita acima.

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

Essa abordagem será problemática se você realmente precisar confiar nos valores consistentes entre solicitações, pois não poderá garantir totalmente que eles são os mesmos. Vai depender do seu aplicativo específico e se você sabe que o valor necessário é algo que não será alterado de uma solicitação para a seguinte.


2. Faça Inferências

Existem algumas propriedades da lista técnica (modelo de objeto do navegador) que o navegador determina observando os cabeçalhos. Algumas dessas propriedades refletem os cabeçalhos HTTP diretamente (por exemplo, navigator.userAgentsão definidos como o valor do User-Agentcampo do cabeçalho HTTP ). Ao examinar as propriedades disponíveis, você poderá encontrar o que precisa ou algumas dicas para indicar o que a resposta HTTP continha.


3. Esconda-os

Se você controlar o lado do servidor, poderá acessar qualquer cabeçalho que desejar ao criar a resposta completa. Os valores podem ser passados ​​para o cliente com a página, armazenados em alguma marcação ou talvez em uma estrutura JSON embutida. Se você quiser ter todos os cabeçalhos de solicitação HTTP disponíveis para o seu javascript, poderá iterá-los no servidor e enviá-los de volta como valores ocultos na marcação. Provavelmente não é ideal enviar valores de cabeçalho dessa maneira, mas você certamente poderia fazê-lo com o valor específico necessário. Essa solução também é ineficiente, mas funcionaria se você precisasse.

keparo
fonte
2
Como o Google detectá-lo como como eu expliquei aqui: stackoverflow.com/questions/7191242/...
kamaci
Atualização RE: requisições Ajax eram uma parte padrão de desenvolvimento web caminho de volta em 2008, bem -_-
BlueRaja - Danny Pflughoeft
5
BOM significa "Modelo de Objeto de Navegador", para aqueles que se perguntam. Consulte stackoverflow.com/questions/2213594/… para obter mais informações.
Myrne Stol 28/03
1
3) você também pode escondê-los no cabeçalho do cookie http. Então você não precisaria alterar a marcação do documento.
Skibulk #
Existe uma maneira simples de acessar os elementos do cabeçalho da resposta, como o elemento do link: use o exemplo de documento aqui: gist.github.com/FunThomas424242/…
FunThomas424242
28

Usando XmlHttpRequestvocê pode acessar a página atual e, em seguida, examinar os cabeçalhos http da resposta.

O melhor caso é apenas fazer uma HEADsolicitação e depois examinar os cabeçalhos.

Para alguns exemplos de como fazer isso, consulte http://www.jibbering.com/2002/4/httprequest.html

Apenas meus 2 centavos.

Allain Lalonde
fonte
24

Uma solução com trabalhadores de serviço

Os funcionários do serviço podem acessar informações da rede, o que inclui cabeçalhos. A parte boa é que ele funciona em qualquer tipo de solicitação, não apenas no XMLHttpRequest.

Como funciona:

  1. Adicione um trabalhador de serviço ao seu site.
  2. Assista a todos os pedidos que estão sendo enviados.
  3. Torne o responsável pelo serviço fetcha solicitação com a respondWithfunção
  4. Quando a resposta chegar, leia os cabeçalhos.
  5. Envie os cabeçalhos do responsável pelo serviço para a página com a postMessagefunção

Exemplo de trabalho:

Os funcionários do serviço são um pouco complicados de entender, então eu criei uma pequena biblioteca que faz tudo isso. Está disponível no github: https://github.com/gmetais/sw-get-headers .

Limitações:

  • o site precisa estar em HTTPS
  • o navegador precisa oferecer suporte à API de Service Workers
  • as políticas de mesmo domínio / entre domínios estão em ação, assim como no XMLHttpRequest
Gaël Métais
fonte
12

Para aqueles que procuram uma maneira de analisar todos os cabeçalhos HTTP em um objeto que pode ser acessado como um dicionário headers["content-type"], criei uma função 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
fonte
10

Outra maneira de enviar informações de cabeçalho para JavaScript seria por meio de cookies. O servidor pode extrair os dados de que precisa dos cabeçalhos da solicitação e enviá-los de volta para um Set-Cookiecabeçalho de resposta - e os cookies podem ser lidos em JavaScript. Como diz o keparo, no entanto, é melhor fazer isso com apenas um ou dois cabeçalhos, em vez de com todos eles.

savetheclocktower
fonte
1
Essa abordagem ainda exige que você controle o servidor para seu JS. Não importa como você comunica essas informações, seu código tornou-se repentinamente inatingível. Por que não fazer apenas uma API para essa solicitação específica para evitar que a solicitação do ativo original seja corrompida?
MST
5

Se estamos falando de cabeçalhos de solicitação , você pode criar seus próprios cabeçalhos ao executar XmlHttpRequests.

var request = new XMLHttpRequest();
request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
request.open("GET", path, true);
request.send(null);
Leo
fonte
você não poderá modificar o cabeçalho da solicitação no mozilla por razões de segurança. mxr.mozilla.org/mozilla1.8.0/source/extensions/xmlextras/base/…
user121196
1
Você deve chamar open () antes de usar o método setRequestHeader (). developer.mozilla.org/en/…
XP1
1
O acesso, na pergunta original, é sobre obter cabeçalhos, não definir cabeçalhos.
Timo Tijhof 12/02
4

Você não pode acessar os cabeçalhos http, mas algumas das informações fornecidas neles estão disponíveis no DOM. Por exemplo, se você deseja ver o (s) referenciador http, use document.referrer. Pode haver outros como este para outros cabeçalhos http. Tente pesquisar no Google a coisa específica que você deseja, como "http referer javascript".

Eu sei que isso deve ser óbvio, mas continuei pesquisando coisas como "http cabeçalhos javascript" quando tudo o que eu realmente queria era o referenciador e não obtive nenhum resultado útil. Não sei como não percebi que poderia fazer uma consulta mais específica.

David Winiecki
fonte
4

Como muitas pessoas, eu tenho procurado na net sem uma resposta real :(

No entanto, descobri um desvio que poderia ajudar os outros. No meu caso, controlo totalmente o meu servidor web. De fato, faz parte do meu aplicativo (consulte a referência final). É fácil adicionar um script à minha resposta http. Modifiquei meu servidor httpd para injetar um pequeno script em todas as páginas html. Eu apenas envio uma linha extra de 'js script' logo após a construção do meu cabeçalho, que define uma variável existente do meu documento no meu navegador [escolho o local], mas qualquer outra opção é possível. Enquanto meu servidor está escrito em nodejs, não tenho dúvida de que a mesma técnica pode ser usada no PHP ou em outros.

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

Agora, todas as páginas html carregadas do meu servidor têm esse script executado pelo navegador na recepção. Posso verificar facilmente no JavaScript se a variável existe ou não. Na minha base de dados, preciso saber se devo usar o perfil JSON ou JSON-P para evitar o problema do CORS, mas a mesma técnica pode ser usada para outros fins [por exemplo: escolha entre servidor de desenvolvimento / produção, obtenha do servidor um REST / API do servidor chave, etc ...]

No navegador, você só precisa verificar a variável diretamente do JavaScript, como no meu exemplo, onde eu a uso para selecionar meu 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 quem quiser conferir meu código: https://www.npmjs.org/package/gpsdtracking

Fulup
fonte
3

Usando mootools, você pode usar this.xhr.getAllResponseHeaders ()


fonte
3

Acabei de testar e isso funciona para mim usando a versão 28.0.1500.95 do Chrome.

Eu estava precisando baixar um arquivo e ler o nome do arquivo. O nome do arquivo está no cabeçalho, então eu fiz o seguinte:

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

    }
};

Resultado:

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
fonte
2

Este é o meu script para obter todos os cabeçalhos de resposta:

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

Tendo como resultado os cabeçalhos de resposta.

insira a descrição da imagem aqui

Este é um teste de comparação usando o Hurl.it:

insira a descrição da imagem aqui

Jorgesys
fonte
2

Para obter os cabeçalhos como um objeto mais acessível (melhoria da resposta 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);
Shaedrich
fonte
2

O link de Allain Lalonde fez o meu dia. Apenas adicionando algum código html de trabalho simples aqui.
Funciona com qualquer navegador razoável desde as idades, mais o IE9 + e o 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: Você obtém cabeçalhos de uma segunda solicitação, o resultado pode ser diferente da solicitação inicial.


Outra maneira
é a fetch()API mais moderna
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
Por caniuse.com , suportada pelo Firefox 40, Chrome 42, Edge 14, Safari 11
Exemplo de trabalho código:

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

Esta é uma pergunta antiga. Não tenho certeza quando o suporte tornou-se mais amplo, mas getAllResponseHeaders()e getResponseHeader()parecem agora estar bastante normal: http://www.w3schools.com/xml/dom_http.asp

dlo
fonte
50
getAllResponseHeaders () e getResponseHeader () são métodos do objeto XMLHttpRequest. Ou seja, para pedidos de ajax. Você não pode usar esses métodos para exibir os cabeçalhos da página inicial - que é o que eu acho que a pergunta original estava realmente perguntando.
precisa saber é o seguinte
-1

Como já foi mencionado, se você controlar o lado do servidor, será possível enviar os cabeçalhos da solicitação inicial de volta ao cliente na resposta inicial.

No Express, por exemplo, o seguinte funciona:

app.get('/somepage', (req, res) => { res.render('somepage.hbs', {headers: req.headers}); }) Os cabeçalhos estão disponíveis no modelo, para que possam ser ocultados visualmente, mas incluídos na marcação e lidos pelo javascript do lado do cliente.

Ollie Williams
fonte
A pergunta é sobre cabeçalhos de resposta , não sobre cabeçalhos de solicitação.
Quentin
-1

Eu acho que a pergunta foi errada. Se você deseja pegar o cabeçalho Request no JQuery / JavaScript, a resposta é simplesmente Não. As outras soluções são criar uma página aspx ou página jsp, então podemos acessar facilmente o cabeçalho da solicitação. Pegue toda a solicitação na página aspx e coloque em uma sessão / cookies para acessar os cookies na página JavaScript.

santhos jery
fonte
1
A pergunta é sobre a leitura dos cabeçalhos de resposta . Ele menciona os cabeçalhos da solicitação apenas no contexto da questão possivelmente relacionada.
Quentin