액세스하는 웹 페이지의 HTTP 헤더에서 JavaScript

Question

어떻게 액세스 페이지 HTTP 응답 헤더를 자바 스크립트를 통해?

관련 이 질문, 는 수정을 요구에 대한 액세스는 두 가지 특정한 HTTP 헤더가 있습니다.

관련된:
에 액세스하려면 어떻게 해야 하는 HTTP 요청 헤더 필드를 자바 스크립트를 통해?

Answer 1

불행하게도 없 API 당신을 제공하는 HTTP 응답 헤더의 초기 페이지를 요청합니다.는 질문곳을 클릭하시면 됩니다.가 반복 요청, 기 때문에,너무,어떤 사람들은 처음 실제 응답 헤더의 원래 페이지를 요청 없이 발행하는 또 다른 하나입니다.

AJAX 요청은:

는 경우 HTTP 요청은 AJAX 를 통해 만들어진,그것은 응답 헤더 getAllResponseHeaders() 방법입니다.그것은 부품의 XMLHttpRequest API 를 사용합니다.어떻게 돌아가는지를 확인하려면에 적용될 수 있습 확인 fetchSimilarHeaders() 기능다.이전에 작성하는 문제되지 않습에 대한 신뢰할 수 있습니다.

myXMLHttpRequest.getAllResponseHeaders();

• API 에 지정된 후보자는 다음에 대한 추천 XMLHttpRequest: XMLHttpRequest-W3C 권장 후보는 3 월 2010

• 특히, getAllResponseHeaders() 법에 지정된 다음 섹션: w3.org: XMLHttpRequest:이 getallresponseheaders() 방법

• 의 반 설명서 너무 좋: developer.mozilla.org: XMLHttpRequest.

이 제공하지 않습니다 당신이에 대한 정보를 원래 페이지를 요청의 HTTP 응답 헤더,그러나 그것을 만드는 데 사용될 추측에 대해 어떤 이들 헤더가 있었다.더 많은에서는 다음에 설명하.

을 받고 헤더에서 값을 초기 페이지를 요청은:

이 질문은 먼저,몇 년 전에 요청에 대해 구체적으로 어떻게 원래는 HTTP 응답 헤더 현재 페이지 (i.e동일한 페이지의 내부에는 javascript 실행).이것은 확실히 다른 질문보다 단순히 응답 헤더에는 어떤 HTTP 요청을 합니다.초기 페이지를 요청 헤더를 쉽게 사용할 수 없는 javascript.는지 여부를 헤더값을 필요한 것이 신뢰성과 충분히 일치한을 요청하신 경우에는 동일한 페이지를 다시을 통해 아약스에 따라 달라집니다 특정 응용 프로그램.

다음은 몇 가지 제안을 제한하는 문제입니다.

1.요청 자원에는 크게 정적

을 경우 응답이 크게 정체되고 헤더는 변화가 예상되지 않는 많이 요청 사이에,당신은 당신을 만들 수 있습 AJAX 요청에 대한 동일한 페이지 당신이 현재에는다 그들은 그들은 같은 값의 일부분이었 페이지의 HTTP 응답입니다.이 수 있는 액세스 할 수 있도록 헤더를 사용하여 필요 좋은 XMLHttpRequest API 를 설명한다.

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

이 접근은 문제가 될 것입니다 당신이 진정으로에 의존해야하는 값을 사이에 일관적 요청할 수 없기 때문에 완전히 있다는 것을 보장 동일합니다.그것은에 의존하기 위하여 려고 하고 있는 귀하의 특정 응용 프로그램과는지 여부를 알고 있는 값은 변경 하지 않습니다 하나의 요청에 있습니다.

2.추론

가 일부 BOM 성 니다(브라우저 객체 모델)는 브라우저 결정을 보고합니다.일부의 이러한 특성을 반영한 HTTP 헤더를 직접적으로(예: navigator.userAgent 값으로 설정하는 HTTP User-Agent 헤더 필드).냄새 주위에 사용할 수 있는 속성할 수 있습니다 당신이 필요로하는 무엇을 발견 또는 몇 가지 단서를 나타내는 무엇인 HTTP 응답이 포함되어 있습니다.

3.숨기

를 제어하는 경우 서버의 측면,당신은에 액세스할 수 있는 모든 헤더를 처럼을 구성하 전체 응답입니다.값을 전달할 수 있습을 클라이언트가 페이지,은닉에 태그나 아마도 있는 인라인 JSON 구조입니다.하고 싶은 경우에는 모든 HTTP 요청 헤더를 사용할 수 있는 자바스크립트,반복할 수 있습을 통해 그들이 서버에게 다시 보낼으로 숨겨진 값에서 마크업이 있습니다.그것은 아마도 이상적이지 않을 보낼 헤더값 이 방법으로,하지만 당신은 확실히 그것을 위해 특정 필요로 하는 가치를 제공합니다.이 솔루션은 틀림없이 비효율적이지만,그것은 일을 하는 경우에 당신은 그것을 필요로했다.

Answer 2

현재 헤더를 읽을 수 없습니다. 동일한 URL에 또 다른 요청을하고 헤더를 읽을 수 있지만 헤더가 현재와 정확히 동일하다는 보장은 없습니다.

---

다음 JavaScript 코드를 사용하여 모든 HTTP 헤더를 수행하여 get 요구:

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

Answer 3

사용 XmlHttpRequest 현재 페이지를 끌어 올린 다음 응답의 HTTP 헤더를 검사 할 수 있습니다.

가장 좋은 경우는 그냥 수행하는 것입니다 HEAD 헤더를 요청한 다음 검사하십시오.

이 작업을 수행하는 몇 가지 예를 보려면 http://www.jibbering.com/2002/4/httprequest.html

내 2 센트.

Answer 4

서비스 근로자와의 솔루션

서비스 직원은 헤더를 포함하여 네트워크 정보에 액세스 할 수 있습니다. 좋은 점은 xmlhttprequest뿐만 아니라 모든 종류의 요청에서 작동한다는 것입니다.

작동 방식 :

1. 웹 사이트에 서비스 작업자를 추가하십시오.
2. 전송되는 모든 요청을보십시오.
3. 서비스 작업자를 만드십시오 fetch The와의 요청 respondWith 기능.
4. 응답이 도착하면 헤더를 읽으십시오.
5. 서비스 작업자에서 헤더를 postMessage 기능.

Working example:

서비스 직원은 이해하기가 약간 복잡하기 때문에이 모든 일을하는 작은 도서관을 만들었습니다. Github에서 사용할 수 있습니다. https://github.com/gmetais/sw-get-headers.

제한 사항 :

• 웹 사이트가 켜져 있어야합니다 HTTPS
• 브라우저는 서비스 직원 API
• xmlhttprequest와 마찬가지로 동일한 도메인/크로스 도메인 정책이 작동합니다.

Answer 5

헤더 정보를 JavaScript로 보내는 또 다른 방법은 쿠키를 통한 것입니다. 서버는 요청 헤더에서 필요한 데이터를 추출하여 다시 보낼 수 있습니다. Set-Cookie 응답 헤더 - 및 쿠키는 JavaScript로 읽을 수 있습니다. 그러나 Keparo가 말했듯이, 모든 헤더가 아닌 하나 또는 두 개의 헤더에 대해서는이 작업을 수행하는 것이 가장 좋습니다.

Answer 6

모든 HTTP 헤더를 사전으로 액세스 할 수있는 객체에 구문 분석하는 방법을 찾는 사람들을 위해 headers["content-type"], 나는 함수를 만들었다 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 7

우리가 이야기하고 있다면 요구 헤더, xmlhttprequests를 수행 할 때 자신의 헤더를 만들 수 있습니다.

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

Answer 8

HTTP 헤더에 액세스 할 수는 없지만 제공된 정보 중 일부는 DOM에서 사용할 수 있습니다. 예를 들어, HTTP 참조 (SIC)를 보려면 Document.Referrer를 사용하십시오. 다른 HTTP 헤더에게는 이와 같은 다른 사람들이있을 수 있습니다. "http referenter javaScript"와 같이 원하는 특정 사항을 검색하십시오.

나는 이것이 명백해야한다는 것을 알고 있지만, 내가 정말로 원하는 것이 참조 자 였을 때 "HTTP Headers JavaScript"와 같은 것들을 계속 찾고 있었고 유용한 결과를 얻지 못했습니다. 더 구체적인 쿼리를 만들 수 있다는 것을 어떻게 알지 못하는 방법을 모르겠습니다.

Answer 9

mootools를 사용하면 this.xhr.getallresponseheaders ()를 사용할 수 있습니다.

Answer 10

많은 사람들처럼 나는 진정한 대답없이 그물을 파고 있었다 :(

그럼에도 불구하고 나는 다른 사람들을 도울 수있는 우회를 발견합니다. 제 경우에는 웹 서버를 완전히 제어합니다. 실제로 그것은 내 응용 프로그램의 일부입니다 (최종 참조 참조). HTTP 응답에 스크립트를 추가하는 것은 쉽습니다. HTTPD 서버를 수정하여 모든 HTML 페이지 내에 작은 스크립트를 주입했습니다. 헤더 구성 직후에 추가 'JS 스크립트'라인 만 푸시하는데, 브라우저 내의 문서에서 기존 변수를 설정하지만 다른 옵션이 가능합니다. 내 서버가 nodejs로 작성되었지만 PHP 또는 다른 기술로부터 동일한 기술을 사용할 수 있다는 것은 의심의 여지가 없습니다.

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

이제 내 서버에서로드 된 모든 HTML 페이지는 리셉션에서 브라우저 에서이 스크립트를 실행해야합니다. 그런 다음 변수가 존재하는 경우 JavaScript에서 쉽게 확인할 수 있습니다. USECASE에서는 CORS 문제를 피하기 위해 JSON 또는 JSON-P 프로파일을 사용해야하는지 알아야하지만 다른 목적으로 동일한 기술을 사용할 수 있습니다. 열쇠 등 ....

브라우저에서 내 예에서와 같이 JavaScript에서 직접 변수를 확인하면 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);

내 코드를 확인하고 싶은 사람을 위해 :https://www.npmjs.org/package/gpsdtracking

Answer 11

방금 테스트했는데 Chrome 버전 28.0.1500.95를 사용하여 작동합니다.

파일을 다운로드하고 파일 이름을 읽어야했습니다. 파일 이름은 헤더에 있으므로 다음을 수행했습니다.

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

    }
};

산출:

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 12

이것은 오래된 질문입니다. 지원이 언제 더 넓어 졌는지 확실하지 않지만 getAllResponseHeaders() 그리고 getResponseHeader() 이제 상당히 표준 인 것 같습니다. http://www.w3schools.com/xml/dom_http.asp

Answer 13

이것은 모든 응답 헤더를 얻기위한 내 스크립트입니다.

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

결과적으로 응답 헤더가 있습니다.

이것은 Hurl.IT를 사용한 비교 테스트입니다.

Answer 14

헤더를 간단한 물체로 가져 오려면 (개선 라자의 대답):

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 15

이미 언급 된 바와 같이, 서버 측을 제어하면 초기 요청 헤더를 초기 응답에서 클라이언트로 다시 보낼 수 있어야합니다.

예를 들어 Express에서 다음은 다음과 같습니다.

app.get('/somepage', (req, res) => { res.render('somepage.hbs', {headers: req.headers}); }) 그런 다음 템플릿 내에서 헤더를 사용할 수 있으므로 시각적으로 숨겨져 있지만 마크 업에 포함되어 Clientside JavaScript가 읽습니다.

Answer 16

jQuery/JavaScript에서 요청 헤더를 가져 가려면 질문이 잘못되었다고 생각합니다. 답은 단순히 아니요입니다. 다른 솔루션은 ASPX 페이지 또는 JSP 페이지를 작성하는 것입니다. 그러면 요청 헤더에 쉽게 액세스 할 수 있습니다. ASPX 페이지에서 모든 요청을 가져 와서 세션/쿠키에 넣으면 JavaScript 페이지에서 쿠키에 액세스 할 수 있습니다.