[javascript] 왜 1×1 픽셀 GIF (웹 버그) 데이터를 제공합니까?

첫째, 나는 이전의 두 답변에 동의하지 않으며 둘 다 질문에 관여하지 않습니다.

1 픽셀 이미지는 HTTP 프로토콜에서 작업 할 때 웹 기반 분석 앱 (예 : Google Analytics)의 본질적인 문제 (클라이언트에서 서버로 데이터를 전송하는 방법)를 해결합니다 .

프로토콜에서 설명하는 가장 간단한 방법은 가장 간단한 방법 (요청 본문을 포함하는 가장 간단한 방법)은 GET 요청 입니다. 이 프로토콜 방법에 따라 클라이언트는 서버에 리소스 요청을 시작합니다. 서버는 이러한 요청을 처리하고 적절한 응답을 반환합니다.

GA와 같은 웹 기반 분석 앱의 경우,이 단방향 체계는 서버가 필요에 따라 클라이언트에서 데이터를 검색하는 것을 허용하지 않기 때문에 나쁜 소식입니다. 다시 말하지만 모든 서버가 할 수있는 것은 리소스를 공급하는 것입니다. 요청하십시오.

그렇다면 클라이언트에서 서버로 데이터를 가져 오는 문제에 대한 해결책은 무엇일까요? HTTP 컨텍스트 내에는 GET (예 : POST) 이외의 다른 프로토콜 메서드가 있지만 여러 가지 이유로 제한된 옵션입니다 (양식 데이터 제출과 같은 드물고 전문적인 사용으로 입증 됨).

브라우저에서 GET 요청을 보면 요청 URL과 요청 헤더 (예 : Referer 및 User-Agent 헤더)로 구성되어 있고, 후자는 클라이언트에 대한 정보 (예 : 브라우저 유형 및 버전, 브라우저 언어, 운영 체제 등

다시 말하지만, 이것은 클라이언트가 서버로 보내는 요청의 일부입니다. 따라서 1 픽셀 gif에 동기를 부여하는 아이디어는 클라이언트가 웹 메트릭 데이터를 요청 헤더 안에 래핑 된 서버로 보내는 것입니다.

그렇다면 클라이언트가 리소스를 요청하여 메트릭 데이터를 전송하도록 “속일”수 있도록하는 방법은 무엇입니까? 그리고 클라이언트가 서버가 원하는 실제 데이터를 보내도록하는 방법은 무엇입니까?

Google Analytics가 좋은 예입니다. ga.js 파일 (웹 페이지의 작은 스크립트에 의해 클라이언트로의 다운로드가 트리거되는 큰 파일)에는 클라이언트가 특정 리소스에서 특정 리소스를 요청하도록 지시 하는 몇 줄의 코드가 포함되어 있습니다. 서버 (GA 서버) 및 요청 헤더에 래핑 된 특정 데이터를 전송합니다.

그러나이 요청의 목적은 실제로 리소스를 가져 오는 것이 아니라 서버로 데이터를 보내는 것이므로이 리소스는 가능한 한 작아야하며 웹 페이지에서 렌더링 될 때 표시되지 않아야합니다. 따라서 1 x 1 픽셀 투명 gif. 크기는 가능한 가장 작은 크기이고 형식 (gif)은 이미지 형식 중 가장 작습니다.

보다 정확하게는 모든 GA 데이터 (모든 단일 항목)가 조립되어 요청 URL의 쿼리 문자열 ( ‘?’뒤의 모든 항목)에 압축됩니다 . 그러나 해당 데이터가 클라이언트 (생성 된 위치)에서 GA 서버 (로그되고 집계되는 위치)로 이동하려면 HTTP 요청이 있어야합니다. 따라서 ga.js (다운로드되는 Google 애널리틱스 스크립트)는 페이지가로드 될 때 호출되는 함수의 결과로 클라이언트에 의해 캐시 됨)은 클라이언트에게 모든 분석 데이터 (예 : 쿠키, 위치 표시 줄, 요청 헤더 등)를 조립하도록 지시합니다.이를 단일 문자열로 연결합니다. URL ( * http : //www.google-analytics.com/__utm.gif* ?)에 검색어 문자열로 추가 하면 요청 URL이 됩니다.

브라우저에 표시된 웹 페이지에 대한 HTTP 요청을 볼 수있는 웹 브라우저 (예 : Safari의 Web Inspector , Firefox / Chrome Firebug 등)를 사용하여이를 증명하는 것은 쉽습니다 .

예를 들어, 회사 홈페이지에 대한 유효한 URL을 내 브라우저의 위치 표시 줄에 입력하면 해당 홈페이지가 반환되고 내 브라우저에 표시됩니다 (주요 분석 앱 중 하나 인 GA를 사용하는 웹 사이트 / 페이지를 선택했을 수 있습니다. , Omniture, Coremetrics 등)

내가 사용한 브라우저는 Safari 였으므로 메뉴 막대에서 Develop 을 클릭 한 다음 Show Web Inspector를 클릭했습니다 . Web Inspector의 맨 위 행에서 Resources 를 클릭하고 왼쪽 열에 표시된 리소스 목록에서 utm.gif 리소스를 찾아 클릭 한 다음 Headers 탭 을 클릭합니다 . 다음과 같은 내용이 표시됩니다.

Request URL:http://www.google-analytics.com/__utm.gif?
           utmwv=1&utmn=1520570865&
           utmcs=UTF-8&
           utmsr=1280x800&
           utmsc=24-bit&
           utmul=enus&
           utmje=1&
           utmfl=10.3%20r181&

Request Method:GET
Status Code:200 OK

Request Headers
    User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/533.21.1
                 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1

Response Headers
    Cache-Control:private, no-cache, no-cache=Set-Cookie, proxy-revalidate
    Content-Length:35
    Content-Type:image/gif
    Date:Wed, 06 Jul 2011 21:31:28 GMT

주목해야 할 핵심 사항은 다음과 같습니다.

1. 실제로 요청은 위의 첫 번째 줄인 * Request URL : http : //www.google-analytics.com/__utm.gif*에서 알 수 있듯이 utm.gif에 대한 요청이었습니다.

2. Google Analytics 매개 변수는 요청 URL에 추가 된 쿼리 문자열에 명확하게 표시됩니다 . 예를 들어,
   utmsr 은 클라이언트 화면 해상도를 참조하는 GA의 변수 이름입니다. 저에게는 1280×800의 값이 표시됩니다. utmfl 은 10.3 등의 값을 갖는 플래시 버전의 변수 이름입니다.

3. 응답 헤더 라는
   콘텐츠 형식 : (클라이언트 서버 뒷면에서 전송) 자원 요청 및 반환 된 1×1 픽셀 GIF 것을 또한 확인한다
   콘텐츠 형식을 : 이미지 / GIF

클라이언트와 서버간에 데이터를 전송하는이 일반적인 방식은 영원히 존재 해 왔습니다. 이 작업을 수행하는 더 좋은 방법이있을 수 있지만 내가 아는 유일한 방법입니다 (호스팅 된 분석 서비스에서 부과하는 제약 조건을 충족 함).