Accès aux en-têtes HTTP de la page Web en JavaScript

Comment puis-je accéder aux en-têtes de réponse HTTP d'une page via JavaScript?

En relation avec cette question , qui a été modifiée pour demander à l'accès à deux en-têtes HTTP spécifiques.

En relation:
Comment puis-je accéder aux champs d'en-tête de demande HTTP via JavaScript?

    Il n'est pas possible de lire les en-têtes actuels. Vous pourriez faire une autre requête sur la même URL et lisez ses en-têtes, mais rien ne garantit que les en-têtes sont exactement égaux au courant.


    Utilisez le code JavaScript suivant pour obtenir tous les en-têtes HTTP en effectuant une requête get :

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

    Malheureusement, il n'y a pas d'API pour vous donner les en-têtes de réponse HTTP pour votre demande de page initiale. C'était la question originale posté ici. On a également demandé à plusieurs reprises , parce que certaines personnes souhaitaient obtenir les en-têtes de réponse réels de la demande de page d'origine sans en donner une autre.

    Pour les demandes AJAX:

    Si une requête HTTP est effectuée sur AJAX, il est possible d'obtenir les en-têtes de réponse avec la méthode getAllResponseHeaders() . Cela fait partie de l'API XMLHttpRequest. Pour voir comment cela peut être appliqué, consultez la fonction fetchSimilarHeaders() ci-dessous. Notez qu'il s'agit d'un travail sur le problème qui ne sera pas fiable pour certaines applications.

     myXMLHttpRequest.getAllResponseHeaders(); 
    • L'API a été spécifiée dans la recommandation candidate suivante pour XMLHttpRequest: XMLHttpRequest – W3C Candidate Recommendation 3 août 2010

    • Plus précisément, la méthode getAllResponseHeaders() été spécifiée dans la section suivante: w3.org: XMLHttpRequest : la méthode getallresponseheaders()

    • La documentation MDN est également bonne: developer.mozilla.org: XMLHttpRequest .

    Cela ne vous donnera pas d'informations sur les en-têtes de réponse HTTP de la demande de page d'origine, mais cela pourrait être utilisé pour faire des suppositions éduquées sur ces en-têtes. On en décrira plus loin.

    Obtention des valeurs d'en-tête à partir de la demande de page initiale:

    Cette question a d'abord été posée il y a plusieurs années, en demandant spécifiquement comment obtenir les en-têtes de réponse HTTP originaux pour la page actuelle (c.-à-d. La même page à l'intérieur de laquelle le javascript était en cours d'exécution). C'est une question tout à fait différente que de simplement obtenir les en-têtes de réponse pour toute requête HTTP. Pour la demande de page initiale, les en-têtes ne sont pas facilement accessibles à javascript. Les valeurs d'en-tête dont vous avez besoin seront fiables et suffisamment cohérentes si vous demandez la même page à nouveau via AJAX dépend de votre application particulière.

    Voici quelques suggestions pour contourner ce problème.

    1. Demandes de ressources essentiellement statiques

    Si la réponse est en grande partie statique et que les en-têtes ne devraient pas changer beaucoup entre les demandes, vous pourriez faire une demande AJAX pour la même page que vous êtes actuellement et supposer qu'elles sont les mêmes valeurs qui faisaient partie de la page Réponse HTTP. Cela pourrait vous permettre d'accéder aux en-têtes dont vous avez besoin en utilisant la jolie API XMLHttpRequest décrite ci-dessus.

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

    Cette approche sera problématique si vous devez vraiment compter que les valeurs sont cohérentes entre les demandes, car vous ne pouvez pas garantir qu'elles sont identiques. Cela dépendra de votre application spécifique et si vous savez que la valeur dont vous avez besoin est quelque chose qui ne changera pas d'une demande à l'autre.

    2. Faire des inférences

    Certaines propriétés de nomenclature (modèle d'objet de navigateur) que le navigateur détermine en regardant les en-têtes. Certaines de ces propriétés reflètent directement les en-têtes HTTP (par exemple, navigator.userAgent est défini sur la valeur du champ d'en User-Agent tête de l' User-Agent HTTP). En reniflant les propriétés disponibles, vous pourriez trouver ce dont vous avez besoin ou certains indices pour indiquer ce que contenait la réponse HTTP.

    3. Imposez-les

    Si vous contrôlez le côté du serveur, vous pouvez accéder à n'importe quel en-tête que vous aimez lorsque vous construisez la réponse complète. Les valeurs pourraient être transmises au client avec la page, cachées dans un balisage ou peut-être dans une structure JSON intégrée. Si vous souhaitez que tous les en-têtes de requête HTTP soient disponibles pour votre javascript, vous pouvez les itérer sur le serveur et les envoyer en tant que valeurs cachées dans le balisage. Il n'est probablement pas idéal d'envoyer des valeurs d'en-tête de cette façon, mais vous pouvez certainement le faire pour la valeur spécifique dont vous avez besoin. Cette solution est sans doute inefficace, mais elle ferait le travail si vous en aviez besoin.

    En utilisant XmlHttpRequest vous pouvez extraire la page actuelle, puis examiner les en-têtes http de la réponse.

    Le meilleur cas est de simplement faire une requête HEAD , puis d'examiner les en-têtes.

    Pour quelques exemples de cela, regardez http://www.jibbering.com/2002/4/httprequest.html

    Juste mes 2 cents.

    Une autre façon d'envoyer des informations d'en-tête à JavaScript serait via des cookies. Le serveur peut extraire toutes les données dont il a besoin des en-têtes des demandes et les renvoyer dans un en Set-Cookie tête de réponse Set-Cookie – et les cookies peuvent être lus en JavaScript. Comme le dit Keparo, cependant, il est préférable de le faire pour seulement un ou deux en-têtes, plutôt que pour tous.

    Comment puis-je accéder aux champs d'en-tête de demande HTTP via JavaScript?

    Si nous parlons des en-têtes de requête , vous pouvez créer vos propres en-têtes lorsque vous effectuez des requêtes XmlHttp.

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

    Une solution avec les travailleurs du service

    Les agents de service peuvent accéder à l'information sur le réseau, qui comprend les en-têtes. La bonne partie est que cela fonctionne sur n'importe quel type de demande, pas seulement XMLHttpRequest.

    Comment ça marche:

    1. Ajoutez un agent de service sur votre site.
    2. Regardez chaque demande qui est envoyée.
    3. Faites en respondWith le service après-vente fetch la requête avec la fonction de respondWith .
    4. Lorsque la réponse arrive, lisez les en-têtes.
    5. Envoyez les en-têtes du travailleur du service à la page avec la fonction postMessage .

    Exemple de travail:

    Les travailleurs du service sont un peu compliqués à comprendre, donc j'ai construit une petite bibliothèque qui fait tout cela. Il est disponible sur github: https://github.com/gmetais/sw-get-headers .

    Limites:

    • Le site Web doit être sur HTTPS
    • Le navigateur doit prendre en charge la nouvelle API Service Workers
    • Les mêmes stratégies de domaine / domaine multiples sont en action, tout comme sur XMLHttpRequest

    C'est une question ancienne. Je ne sais pas si le support est devenu plus large, mais getAllResponseHeaders() et getResponseHeader() semblent être assez standard: http://www.w3schools.com/xml/dom_http.asp

    En utilisant mootools, vous pouvez utiliser this.xhr.getAllResponseHeaders ()

    Vous ne pouvez pas accéder aux en-têtes http, mais certaines des informations fournies sont disponibles dans le DOM. Par exemple, si vous voulez voir le référencement http (sic), utilisez document.referrer. Il peut y avoir d'autres comme ceci pour d'autres en-têtes http. Essayez de googler la chose spécifique que vous voulez, comme "http référer javascript".

    Je sais que cela devrait être évident, mais j'ai continué à chercher des trucs comme "http headers javascript" lorsque tout ce que je voulais vraiment était le référent et n'a pas eu de résultats utiles. Je ne sais pas comment je n'ai pas réalisé que je pourrais faire une requête plus spécifique.

    Je viens de tester, et cela fonctionne pour moi en utilisant la version Chrome 28.0.1500.95.

    J'avais besoin de télécharger un fichier et de lire le nom du fichier. Le nom du fichier se trouve dans l'en-tête, donc j'ai fait ce qui suit:

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

    Sortie:

     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 

    Comme beaucoup de personnes, j'ai creusé le net sans réponse réelle 🙁

    J'ai néanmoins découvert un contournement qui pourrait aider les autres. Dans mon cas, je contrôle entièrement mon serveur Web. En fait, il fait partie de ma demande (voir la référence finale). Il est facile pour moi d'ajouter un script à ma réponse http. J'ai modifié mon serveur httpd pour injecter un petit script dans chaque page html. Je lance uniquement une ligne de script supplémentaire js après ma construction d'en-tête, qui définit une variable existante à partir de mon document dans mon navigateur [je choisis l'emplacement], mais toute autre option est possible. Alors que mon serveur est écrit dans nodejs, je ne doute pas que la même technique peut être utilisée par PHP ou par d'autres.

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

    Maintenant, chaque page html chargée à partir de mon serveur, ce script a été exécuté par le navigateur à la réception. Je peux facilement vérifier de JavaScript si la variable existe ou non. Dans mon compte, je dois savoir si je devrais utiliser le profil JSON ou JSON-P pour éviter le problème de CORS, mais la même technique peut être utilisée à d'autres fins [c.-à-d.: Choisir entre serveur de développement / production, obtenir du serveur un REST / API Clé, etc ….]

    Sur le navigateur, il suffit de vérifier la variable directement à partir de JavaScript comme dans mon exemple, où je l'utilise pour sélectionner mon profil 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); 

    Pour ceux qui voudraient vérifier mon code: https://www.npmjs.org/package/gpsdtracking