[WEB] HTTP 통신의 개념부터 상태 코드까지 정리해보자

 

틀린 내용을 발견하셨다면 댓글 부탁드립니다!

 

---

1. HTTP란?

HTTP(HyperText Transfer Protocol)는 클라이언트와 서버가 웹에서  이미지, 텍스트, 오디오,  비디오 및 다른 모든 종류의 파일과 같은 데이터를 주고받을 때 지켜야 되는 프로토콜(규칙)이다. 인터넷을 사용하는 모두가 동의한 규칙이니 우리는 이를 따라야 한다. 규칙은 지키라고 있는 것! HTTP라는 규칙을 지키면서 웹 상에서 통신하는 과정은 다음과 같다. 만약 우리가 아마존에서 뭔가 살게 있다고 해보자. 크롬 브라우저를 통해 www.amazon.in을 입력한다면, 브라우저(Client)는 웹 서버(Server)에게 요청(Request)할 것이다. 서버는 브라우저의 요청에 응답(Response)하여 HTML, CSS, 이미지, 비디오, JSON과 같은 문서 및 파일들을 브라우저에게 전달한다. 이게 끝이다. 

 

출처: https://hackernoon.com/http-made-easy-understanding-the-web-client-server-communication-yz783vg3

HTTP는 응용 계층 프로토콜이며 서버와 TCP를 사용해 통신한다. 이게 갑자기 무슨 이야기냐 할 수 있겠지만, 그냥 지금은 이런 게 있구나 정도로만 알고 넘어가고 해당 내용에 대해선 나중에 포스팅을 해야겠다.

 

특징

HTTP는 Stateless(무상태성) 이라는 특징을 갖고 있다. 모든 HTTP 요청들은 현재 요청 직전에 어떤 요청들이 실행됐는지에 대한 정보가 없어, 독립적으로 실행된다. 즉 이 말은 트랜잭션이 종료되면 브라우저와 서버의 연결은 끊어진다는 의미이다. 그런데 만약 우리가 웹사이트에 개인 인증을 하여 상태를 유지해야 되는 경우라면 이러한 stateless 특징이 문제가 될 수 있다. 이 문제를 해결해주는 게 쿠키(Cookie)다. 쿠키와 관련된 내용은 이 포스트에 정리해놓았다. https://jaejade.tistory.com/42?category=787332

[WEB] 쿠키(Cookie), 세션(Session), 토큰(Token)에 대해 정리해보자

 

 

2. HTTP 요청과 응답의 구조

위에서 언급했듯이 HTTP는 요청과 응답으로 이뤄진다. 그렇다면 요청과 응답 안에는 어떤 정보들이 들어있을까? 편의상 요청과 응답을 합쳐 메시지라고 쓰겠다. 메시지는 시작 부분(또는 상태 부분), 헤더(header), 빈 줄(blank line), 바디(body)로 구성되어있다. 요청의 시작 줄은 HTTP 메서드, 요청 타깃, HTTP 버전으로 이루어져 있으며, 응답의 경우엔 상태 부분이라 하여 HTTP 버전과 HTTP 응답 코드 및 메시지로 이루어져 있다. 빈 줄은 요청에 대한 모든 메타 정보가 전송되었음을 알리는 역할을 한다. body에는 우리가 보내고자 하는 본 내용이 담겨있다(모든 메시지에 body가 있는 것은 아니다). 여기서 HTTP에 대해 이해하고 싶다면 꼭 알아야 되는 게 HTTP 헤더이다. 왜냐하면 HTTP 헤더에 프로토콜 기능 제공에 필요한 최소한의 정보가 담겨 있기 때문이다.

 

출처: https://developer.mozilla.org/ko/docs/Web/HTTP/Messages

일반 헤더(General Header)
요청 및 응답 메시지 모두에서 사용 가능한 기본적인 항목

• Date: HTTP 메시지를 생성한 일시
• Connection: 클라이언트와 서버 간 연결에 대한 옵션 설정

 

엔티티/개체 헤더(Entity Header)
요청 및 응답 메시지 모두에서 사용 가능한  콘텐츠, 본문, 리소스 등에 대한 항목. HTTP 메시지 내 포함된 선택적인 개체에 대한 구체적인 미디어 타입 등을 설명

• Content-Type: 콘텐츠의 타입(MIME)과 문자열 인코딩(utf-8 등등)을 명시할 수 있음
• Content-Language: 사용자 언어
• Content-Encoding: 해당 개체 데이터의 압축 방식
• Content-Length: 전달되는 해당 개체의 바이트 길이 또는 크기(10진수). 메시지 크기에 따라 자동으로 생성됨
• Content-Location: 해당 개체의 실제 위치

 

요청 헤더(Request Header)
HTTP 요청 메시지에서만 사용 가능한 항목

• Host: 요청하는 호스트(서버)의 호스트명 및 포트 번호 (HTTP/1.1부터 필수)
• User-Agent: 사용자가 어떤 클라이언트(OS 및 브라우저 등)를 이용해 요청했는지에 대한 항목
• Accept 시리즈: 어떤 타입(MIME)의 응답을 좋겠다 명시. Accept로 원하는 형식을 서버에 보내면 서버는 그에 맞게 응답을 해주고, 응답 헤더의 Content를 알맞게 설정

Accept: text/html or Accept: image/png, image/gif or Accept: text/* 등...
Accept-Charset: utf-8
Accept-Language: ko, en-US
Accept-Encoding: br, gzip, deflate

• Authorization: 인증 토큰을 서버로 보낼 때 사용
• Origin: 요청이 어느 주소에서 시작되었는지 알려줌. 응답 헤더의 Access-Control-Allow-Origin과 관련됨
• Referer: 이전 페이지의 주소가 담겨 있는 항목

 

응답 헤더(Response Header)
HTTP 응답 시 사용 가능한 항목

• Server: 웹 서버 종류
• Access-Control-Allow-Origin:
• Allow: 서버 쪽에서 지원 가능한 HTTP 메서드 리스트를 알려줌
• Content-Disposition: 응답 본문을 브라우저가 어떻게 표시해야 될지 알려주는 항목
• Location: 상태 코드가 201 Created, 300번대인 경우에 볼 수 있는 응답 헤더로서 어느 위치(URI)로 이동해야 될지 알려줌
• Content-Security-Policy: 다른 외부 파일들을 불러오는 경우 차단할 소스와 불러올 소스를 명시

 

HTTP 헤더 내 캐시, 쿠키와 관련된 항목

캐싱 관련

• Cache-Control: 요청/응답 헤더. 캐싱 정책 정의

<!-- 어떠한 응답 데이터도 캐시로 저장 안함 -->
Cache-Control: no-store
<!-- 서버에 요청해서 유효성 검사를 한 다음 응답 데이터를 캐시 저장 -->
Cache-Control: no-cache
<!-- 요청 시간으로부터 상대적 시간(초)동안 캐쉬가 유효함 -->
Cache-Control: max-age=<seconds>
<!-- 브라우저같은 특정 사용자 환경에서만 캐시 저장  -->
Cache-Control: private
<!-- 공유 캐시, 중개 서버에 캐시 저장 가능  -->
Cache-Control: public
<!-- 캐시를 사용하기 전 기존 리소스의 상태를 확인. 만료된 리소스일 경우 사용 안함 -->
Cache-Control: must-revalidate

• Age: 응답 헤더. Cache-Control 헤더에서 시간이 얼마나 흘렀는지 초단위로 나타냄
• Expires: 응답 헤더. 응답 콘텐츠가 언제 만료되는지 나타냄. Cache-Control에 max-age가 있는 경우 이 헤더는 무시됨
• ETag: 응답 헤더. 콘텐츠가 변경되지 않으면 ETag도 변경되지 않고, 콘텐츠가 변경되면 주소가 같아도 ETag는 변경됨
• If-None-Match: 요청 헤더. 해당 필드에 담긴 값과 서버의 ETag를 비교해 유효성을 검사. 동일하면 304 응답 코드 반환. 다르면 서버가 전체 응답을 완전히 재전송

 

쿠키 관련

• Set-Cookie: 응답 헤더. 서버에서 브라우저에 쿠키를 전송하기 위해 사용

<!-- 쿠키의 최대 생존 시간. 지정되지 않으면 세션 쿠키로 취급되며 클라이언트가 종료될 때 파기됨 -->
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
<!-- 쿠키가 만료될 떄까지 최대 시간을 초 단위로 표시.Expires보다 우선 순위 -->
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit>
<!-- 쿠키가 적용되야할 호스트 지정. 지정된 도메인의 서브 도메인들은 항상 포함됨 -->
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain name>
<!-- 쿠키가 적용되야할 경로 지정. 이 경로 내에서만 쿠키값 검색 가능 -->
Set-Cookie: <cookie-name>=<cookie-value>; Path=<path>
<!-- 브라우저가 SSL을 이용해 서버에 쿠키를 전송 -->
Set-Cookie: <cookie-name>=<cookie-value>; Secure
<!-- 자바스크립트의 document.cookie를 통해 쿠키 접속하는 것을 방지 -->
Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly

<!-- 서로 다른 도메인간 쿠키 전송에 대한 보안을 설정 -->
<!-- Strict - 서로 다른 도메인에서는 쿠키 전송 불가 -->
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Strict
<!-- Lax - Strict에서 예외를 두어 일부 도메인에는 전송 가능하게끔 함 -->
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Lax
<!-- None - 동일 사이트 및 크로스사이트 모두에게 쿠키 전송 가능 -->
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=None

• Cookie: 요청 헤더. 클라이언트가 서버에게 쿠키를 보내고 서버는 이를 파싱하여 정상적인 상황인지 확인

 

 

3. HTTP 요청 메서드

보안 취약점 때문에 GET과 POST를 제외한 나머지 메서드들을 비활성화한다고 한다.

method	설명
GET	URI 형식으로 웹 서버에게 데이터를 요청
POST	서버에게 데이터 전송
HEAD	메시지 헤더 취득. 실제 데이터를 요청하는 것이 아니라 데이터 정보를 요청하는 것이므로, 요청에 대한 응답 메시지에는 HTTP 헤더 정보만 담겨져 있다 (body는 X)
PUT	내용 전체 갱신. 만일 일부분만 수정해 전달한다면 포함되지 않은 필드는 null or 초기값으로 변함
TRACE	클라이언트가 송신한 리퀘스트를 그대로 반환
OPTIONS	웹 서버에게 가능한 메서드 옵션을 질문하는 메서드이다. 서버는 이에 대한 응답으로 서버가 수용하는 메서드를 알려준다.
DELETE	웹 리소스 제거 요청 (서버는 이 요청 메서드를 무시할 수 있다)
PATCH	내용 일부 갱신

 

 

4. HTTP 상태 코드

• 100번 대: 정보 응답
• 200번 대: 성공 응답
• 300번 대: 리다이렉션 메시지
• 400번 대: 클라이언트 에러 응답
• 500번 대: 서버 에러 응답

 

종류가 많기 때문에 자세한 내용은 mdn 문서를 참조하자 - https://developer.mozilla.org/ko/docs/Web/HTTP/Status

HTTP 상태 코드

 

 

 

 

마치며

헤더 구성 요소라던지, 상태 코드라던지 다 외우는 건 힘들기 때문에 많이 쓰이는 것 위주로 알아두고 모르는 게 있으면 그때그때 찾아보고 여기에 정리하는 게 좋을 것 같다. 중간으로 갈수록 점점 암기 과목 같아져서 포스팅하기 힘들었지만 어쨌거나 기본적인 내용 정리는 여기서 끝!

---

참고 자료

• https://hackernoon.com/http-made-easy-understanding-the-web-client-server-communication-yz783vg3
• https://velog.io/@conatuseus/2019-09-10-2009-%EC%9E%91%EC%84%B1%EB%90%A8-xsk0ds2eqf
• https://jeong-pro.tistory.com/181
• https://cordelia273.space/11
• https://developer.mozilla.org/ko/docs/Web/HTTP/Messages
• https://www.zerocho.com/category/HTTP/post/5b3ba2d0b3dabd001b53b9db
• https://www.zerocho.com/category/HTTP/post/5b4c4e3efc5052001b4f519b
• https://www.zerocho.com/category/HTTP/post/5b594dd3c06fa2001b89feb9
• https://offbyone.tistory.com/179
• https://papababo.tistory.com/269
• https://www.letmecompile.com/http-cache-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC/
• https://ifuwanna.tistory.com/223