Skip to content

Hypertext Transfer Protocol

HTTP(HyperText Transfer Protocol, 문화어: 초본문전송규약, 하이퍼본문전송규약)는 WWW 상에서 정보를 주고 받을 수 있는 프로토콜이다. 주로 HTML 문서를 주고 받는 데에 쓰인다. TCP와 UDP를 사용하며, 80번 포트를 사용한다. 1996년 버전 1.0, 그리고 1999년 1.1이 각각 발표되었으며, 현재 가장 널리 쓰이는 버전이 1.1이다.

HTTP는 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜이다. 예를 들면, 클라이언트인 웹 브라우저가 HTTP를 통하여 서버로부터 웹페이지나 그림 정보를 요청하면, 서버는 이 요청에 응답하여 필요한 정보를 해당 사용자에게 전달하게 된다. 이 정보가 모니터와 같은 출력 장치를 통해 사용자에게 나타나는 것이다.

HTTP를 통해 전달되는 자료는 http:로 시작하는 URL(인터넷 주소)로 조회할 수 있다.

Category

Libraries

Headers

  • Caching
    • Age - 객체가 프록시 캐시에 있었던 초 단위의 시간.
    • Cache-Control - 요청과 응답 모두에서의 캐싱 메커니즘을 명시하는 지시문.
    • Clear-Site-Data - 요청하는 웹사이트에 관련된 탐색 데이터(예, 쿠키, 저장소, 캐시)를 제거합니다.
    • Expires - 응답이 만료되었다고 고려되는 날짜/시간.
    • Pragma - 요청-응답 체인을 따라 어디든 다양한 영향을 줄 수 있는 구현-관련 헤더. Cache-Control 헤더가 존재하지 않는 HTTP/1.0 캐시와의 하위 호환성을 위해 사용됨.
    • Warning - 가능한 문제들에 대한 정보를 포함하는 일반 경고 필드.
  • Accept-Language
  • Referer

Debugging/Tools

  • Wireshark
  • HTTPie - The ultimate aim of HTTPie is to make CLI interaction with web services user interface friendly. This tool provides an HTTP command for sending requests, all with the use of a natural syntax.
  • Fiddler is a cross-platform web debugging proxy. It can help manipulate web sessions, inspect HTTPS traffic, and monitor traffic between your computer and the Internet.
  • RESTer is available as an extension for Google Chrome and Firefox.
  • Paw is a full-featured HTTP client, which allows you to send all kinds of HTTP requests. With Paw, you can test your APIs and also explore new ones.
  • Requester is a robust client that combines the features of HTTPie, Postman, and Paw. It works only with Sublime Text editor.
  • Postman is unarguably one of the more popular HTTP clients used for debugging web applications. It allows for faster and easier API development.
  • cURL is a command-line tool that is used for sending data using URL syntax.
  • Charles Proxy - As the name says, Charles proxy is an HTTP and reverse proxy. It works by routing local traffic through it.
  • Whistle is a NodeJS-based cross-platform debugging tool to capture and manipulate HTTP, HTTPS, WebSocket, and TCP traffic.
  • mitmproxy is a popular open-source HTTPS proxy among security researchers. Use it as a CLI, web, or Python API.
  • Proxyman - Similar to the above-mentioned Paw, Proxyman is a premium native macOS web debugging proxy application.
  • HTTP Toolkit is an open-source HTTP debugger. It’s a desktop app available for Windows, Mac & Linux.
  • Hetty - 보안 연구를 위한 오픈소스 HTTP 툴킷
  • Burp Suite - Suite is a comprehensive web application security testing platform developed by PortSwigger.
  • Requestly is a versatile web and desktop proxy tool that allows users to modify and control HTTP/HTTPS requests and responses. It offers a range of features designed to enhance web development, testing, and debugging processes.
  • vim-rest-console - vim에서 .rest 파일 다루기.
  • ngrok - 로컬 개발 환경에서 인터넷을 통해 웹 애플리케이션에 안전하게 접근할 수 있도록 해주는 도구입니다.

기본 규칙

기본적인 분석 구조를 설명하기 위해 이 규격 전반에 걸쳐 사용되고 있다. US-ASCII로 코드화 된 문자 집합은 ANSI X3.4-1986에 의하여 규정되었다.

Methods

HTTP Method 용법 목록

  • GET - Requests the entire resource
  • HEAD - Requests resource without the body
  • POST - Adds content to an existing web resource
  • PUT - Modifies an existing web resource
  • DELETE - Removes a specified resource
  • TRACE - Shows the changes to a web resource
  • OPTIONS - Shows available HTTP methods for the URL
  • CONNECT - Converts the request connection to a transparent TCP/IP tunnel
  • PATCH - Partially modifies a web resource

Do Not Track

추적방지(DO-NOT-TRACK) 헤더는 아래와 같다. 

DNT: 1

MIME

multipart/form-data

HTTP file upload

Let's take a look at what happens when you select a file and submit your form (I've truncated the headers for brevity): 

POST /upload?upload_progress_id=12344 HTTP/1.1
Host: localhost:3000
Content-Length: 1325
Origin: http://localhost:3000
... other headers ...
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryePkpFF7tjBAqx29L

------WebKitFormBoundaryePkpFF7tjBAqx29L
Content-Disposition: form-data; name="MAX_FILE_SIZE"

100000
------WebKitFormBoundaryePkpFF7tjBAqx29L
Content-Disposition: form-data; name="uploadedfile"; filename="hello.o"
Content-Type: application/x-object

... contents of file goes here ...
------WebKitFormBoundaryePkpFF7tjBAqx29L--

주의

컨텐츠를 구분하는 boundary의 앞에 --가 추가되며, 마지막 boundary는 끝에 --가 추가된다.

사용자가 페이지를 떠날 때 안정적으로 HTTP 요청을 보내는 방법

가끔 사용자가 다른 페이지로 이동하거나, 폼 전송할 때 로그를 남기고 싶은 경우가 있음.

클릭 이벤트에 fetch를 넣는 것은 꼭 전송된다는 보장이 없음

그래서 Fetch하고 나서 window.location 에 넣어서 이동해보지만 이것도 마찬가지로 보장 안됨 (XHR은 비동기 & 넌블록킹 이기 때문)

fetch를 Promise로 await 처리하면 되긴 하지만 단점이 있음:

  • 처리하는 속도가 느려져서 사용자 경험이 안좋아짐
  • 예상처럼 안정적이지 않음. 브라우저 탭을 닫거나 하는 것은 처리 불가능

브라우저에게 HTTP 요청을 보존시키는 옵션이 여러가지 있음:

  • Fetch 에 keepalive 플래그를 사용하면 페이지가 중단되더라도 해당 요청은 유지
  • Navigator.sendBeacon() 같은 더 간단한 함수
  • 브라우저들은 a 태그에 ping 속성도 지원 (링크에만 사용가능하다는 게 단점, FF는 기본으로 미지원)

그럼 뭘 써야 할까?

  • 가능하면 fetch() + keepalive
    • 80%의 브라우저가 지원
    • 커스텀 헤더 전송 가능
    • GET 요청으로도 가능
    • 예전 브라우저들 지원
  • sendBeacon() 이 좋은 경우는
    • 96%의 브라우저가 지원
    • 많은 커스터마이징이 필요 없을 때
    • 깔끔하고 우아한 API를 선호할 때
    • 브라우저의 다른 우선순위 요청들과 다투고 싶지 않을 때

Header에서 "X-" prefix 지양

가끔 Header를 보면 X-Auth 와 같은 "X-" prefix를 사용하는 것을 볼 수 있다. 이 "X-" prefix들은 "eXperimental" , "eXtension"의 약자로 표준 헤더와 비표준 헤더를 구분하기 위해 오랫동안 사용되었다.

이 "X-" prefix로 해결되는 문제보다 이로 인해 생기는 문제가 더 많아져, RFC6648에서는 "X-" prefix 사용을 지양하라고 말하고 있다. "X-" prefix 를 사용하여 생기는 문제로 비표준이었던 Header가 표준으로 바뀌었을 때 이를 처리하는 비용이 커진다고 한다.

308 Permanent Redirect란?

What_is_308_Permanent_Redirect.png

  • URL이 리다이렉트 되었을 때, 최초의 요청 방법 (GET or POST)을 유지하지 않고 무조건 GET 으로 변경시키면서 리다이렉트 시키는것이 301 또는 302이고,
  • 원래의 method (GET, POST)를 유지하면서 리다이렉트 시키는 것이 307 또는 308이다.
  • 이중에서 "308 Permanent Redirect"은 임시가 아니라 영원히 리다이렉트 되었다는 의미이다.

Troubleshooting

잘못된 Content-Length header

이 문제는 특정 웹 브라우저에서 HTTP POST 요청의 메시지 본문(데이터 부분) 끝에 2바이트(캐리지 리턴과 줄 바꿈)를 추가로 보내기 때문에 발생합니다. 그러나 웹 브라우저에서는 HTTP Content-Length 헤더에 이러한 추가 2바이트를 반영하지 않으므로 메시지 본문이 HTTP Content-Length 헤더에 나와 있는 것보다 2바이트를 더 포함하게 됩니다.

ISA Server 2000의 웹 프록시 서비스에 이러한 조건을 확인하는 기능이 포함되어 있으므로 웹 브라우저에서 잘못된 Content-Length 헤더를 보내면 "400 잘못된 요청" 오류 메시지가 반환됩니다.

앱 배포 후 브라우저 캐시를 클리어하지 않으면 최신버전으로 갱신되지 않는 현상

Cache Busting 항목 참조.

Documentation

RFC 2068
rfc2068 :하이퍼텍스트 전송규약 1.1표준(안)
RFC_2068_KOR.txt
RFC 2616
RFC_2616_KOR.txt
RFC 2109
HTTP State Management Mechanism
쿠키와 세션에 대해 알아보자
HTTP/3 explained
https://daniel.haxx.se/http3-explained/
https://http3-explained.haxx.se/ko/
Http3-explained-ko.pdf

See also

Favorite site

Project

Article

Videos

References

  1. HTTP_multipart_form-data_raw_data.pdf ↩

  2. Popit.kr_-_I_just_did_not_know_HTTP2.pdf ↩