7. HTTP 헤더1(일반 헤더) - HTTP 웹 기본 지식

이 글은 배민 기술이사 김영한 이사님의 인프런 강의 "모든 개발자를 위한 HTTP 웹 기본 지식" 을 기반으로 작성되었습니다. 문제 시 삭제 조치하겠습니다.

목차는 아래와 같습니다

• HTTP 헤더 개요
• 표현
• 콘텐츠 협상
• 전송 방식
• 일반 정보
• 특별한 정보
• 인증
• 쿠키

HTTP 헤더 개요

a. HTTP 헤더

1) 헤더 용도

• HTTP 전송에 필요한 모든 부가 정보
• e.g. 메시지 바디의 내용, 메시지 바디의 크기, 압축, 인증, 요청 클라이언트, 서버 정보, 캐시 관리 정보 등

• 표준 헤더가 너무 많기 때문에 모두 다룰 수는 없다...
• 필요시 임의의 헤더를 추가할 수도 있다.

2) 헤더 분류-RFC 2616(과거)

 

1) General 헤더: 요청/응답 메시지 전체에 적용되는 정보 (e.g. Connection: close)

2) Request 헤더: 요청 정보 (e.g. User-Agent: Mozilla/5.0)

3) Response 헤더: 응답 정보 (e.g. Server: Apache)

4) Entity 헤더: 엔티티 바디 정보 (e.g. Content-Type: text/html, Content-Length: 3423)

b. HTTP BODY

1) message body - RFC2616(과거)

 

• 메시지 본문(message body)을 통해 엔티티 본문(entity body)를 전달
• 엔티티 본문은 요청/응답에서 전달할 실제 데이터
• 엔티티 헤더는 엔티티 본문의 데이터를 해석할 수 있는 정보 제공
  • e.g. 데이터 유형(html, json), 데이터 길이, 압축 정보 등

<HTTP 표준>

1) 1999년 RFC2616 폐기

2) 2014년 RFC7230~7235 등장

엔티티(Entity) -> 표현(Representation)

 

 

2) message body - RFC7230(최신)

• 메시지 본문(message body)를 통해 표현 데이터 전달
• 메시지 본문 = 페이로드(payload)
• 표현 = 요청이나 응답에서 전달할 실제 데이터(표현 헤더 + 표현 데이터)
• 표현 헤더는 표현 데이터를 해석할 수 있는 정보 제공

(참고) 표현 헤더는 표현 메타데이터와 페이로드 메시지를 구분해야하지만, 여기서는 복잡하므로 생략

 

<정리>

 

1) HTTP 표준 RFC2616 -> RFC723x로 변화

Enity -> Represntation

2) HTTP 헤더 분류 - RFC 723x(현재)

헤더 분류	설명	사용
General 헤더	요청/응답 메시지 전체에 적용되는 정보	공통
Representation 헤더	표현 데이터 정보
Request 헤더	요청 정보	요청
Response 헤더	응답 정보	응답

 

표현

http로 전송할 때, 어떠한 리소스를 html 혹은 json 등으로 표현해 전달함

 

<표현 헤더>

표현 헤더는 요청, 응답 메세지에서 모두 사용합니다.

 

1) Content-Type: 표현 데이터의 형식

2) Content-Encoding: 표현데이터의 압축 방식

3) Content-Language: 표현 데이터의 자연 언어

4) Content-Length: 표현 데이터의 길이

a. Content-Type

표현 데이터의 형식 설명

• 미디어 타입, 문자 인코딩

1) text/html; charset=utf-8

2) application/json

• json은 기본이 UTF-8

3) image/png

• Content-Type  이 'image/png' 임

b. Content-Encoding

표현 데이터 인코딩

• 표현 데이터 압축을 위해 사용
• 데이터를 전달하는 곳에서 압축 후 인코딩 헤더 추가
• 데이터를 읽는 곳에서 인코딩 헤더의 정보로 압축 해제

1) gzip - 요즘 많이 사용

2) deflate - gzip 과는 다른 압축 알고리즘

 

3) identity - 압축하지 않는다.

c. Content-Language

표현 데이터의 자연 언어

• 클라이언트에서 언어를 선택하는 부가 작업 O (애플 홈페이지에서 한국어로 보기)

1) ko

2) en

3) en-US

d. Content-Length

표현 데이터의 길이

• 바이트 단위
• Transfer-Encoding(전송 코딩)을 사용하면 Content-Length 사용X

콘텐츠 협상

a. 콘텐츠 협상(Contents Negotiation)

클라이언트가 선호하는 표현 요청

• 협상 헤더는 요청시에만 사용
• 클라이언트 별로 선호하는 표현을 서버에서 처리해서 줄 수 있음

1) Accept: 클라이언트가 선호하는 미디어 타입 전달

2) Accept-Charset: 클라이언트가 선호하는 문자 인코딩

3) Accept-Encoding: 클라이언트가 선호하는 압축 인코딩

4) Accept-Language: 클라이언트가 선호하는 자연 언어

b. Accept-Language

1) Accept-Language 적용 전

한국어 브라우저로 외국에 있는 /event 에 접속 요청을 보내면,

서버는 클라이언트가 어떤 언어를 요청하는지 알 수 없기 때문에, 기본 영어(en)로 브라우저에 응답한다.

 

2) Accept-Language 적용 후

한국어 브라우저로 외국에 있는 /event 에 Accept-Language: ko (한국어 선호) 로 접속 요청을 보내면,

서버는 기본 영어 외에 한국어를 지원하므로 한국어(ko)로 브라우저에 응답한다.

 

3) Accept-Language 복잡한 예시

한국어 브라우저로 외국에 있는 /event 에 Accpet-Language: ko (한국어 선호) 로 접속 요청을 보내면,

서버가 한국어를 지원하지 않으므로 기본 독일어(de)로 브라우저에 응답한다.

하지만 우리는 독일어보다는 영어가 익숙하다.. 그래서 우선순위가 필요하다!!

c. 협상과 우선순위1

<Quality Values(q)>

• Quality Values(q) 값의 범위: 0~1(생략하면 1)
• 클수록 높은 우선순위

 

1) Accept-Language 복잡한 예시

 

한국어 브라우저로 외국에 있는 /event 에 Accept-Language: ko-KR (한국어 우선순위 1),
ko;q=0.9, en-US;q=0.8, en;q=0.7 로 접속 요청을 보내면,

서버가 한국어를 지원하지 않으므로 다음 우선순위인 영어(en)로 브라우저에 응답한다.

d. 협상과 우선순위2

<Quality Values(q)>

• 구체적인 것이 우선

• 우선순위: text/plain;format=flowed > text/plain > text/* > */*

e. 협상과 우선순위3

<Quality Values(q)>

• 구체적인 것을 기준으로 미디어 타입을 맞춤

• 클라이언트에서 요청한 text/html;level의 우선순위가 가장 높고 서버가 해당 미디어 타입을 지원하므로 text/html;level 미디어타입으로 응답한다.

전송 방식

a. HTTP 메시지 전송 방식

1) 단순 전송

Content-Length 설정

• 데이터 전체를 한 번에 보낼 때 사용

2) 압축 전송

Content-Encoding 설정

• 전송해야하는 데이터가 커서 압축해서 보낼 때 사용(압축 방식은 다양함)

3) 분할 전송

Transfer-Encoding:chunked 설정, Content-Length 설정X

• 대용량 데이터를 클라이언트에 보낼 때, 요청이 모두 처리되기 전까지 총 크기를 알 수 없을 때 사용

• r\n\ : 분할 전송의 끝을 나타냄

4) 범위 전송

Range 설정해서 요청 -> Content-Range 설정해서 응답

• 어떠한 이유로 중간에 재요청해야할 때, 범위를 지정하여 사용
  • (e.g. 서버로부터 데이터를 절반 정도 받은 상태에서 끊겼을 때 처음부터 다시 받을 필요X, 이후 부분부터 받음)

• Range: bytes = 클라이언트가 요청한 데이터의 범위
• Content-Range: bytes (클라이언트가 요청한 데이터의 범위) / (전체 데이터의 길이)
• Content-Length: 실제 전송된 데이터의 길이

[참고] https://developer.mozilla.org/ko/docs/Web/HTTP/Range_requests

일반 정보

일반 헤더 종류	내용	사용 헤더	사용 목적	기타
Form	유저 에이전트의 이메일 정보	요청	검색 엔진	거의 사용X
Referer	현재 요청된 페이지의 이전 웹페이지 주소	요청	유입 경로 분석	많이 사용
User-Agent	유저 에이전트(클라이언트) 애플리케이션 정보	요청	통계 정보, 장애가 발생하는 브라우저 파악
Server	요청을 처리하는 ORIGIN 서버의 소프트웨어 정보	응답	실제 응답을 보낸 서버 파악
Date	메시지가 생성된 날짜	응답	다양함.

a. From (요청)

유저 에이전트의 이메일 정보

• 일반적으로 잘 사용X
• 검색 엔진같은 곳에서 주로 사용

2. Referrer (요청)

현재 요청된 페이지의 이전 웹 페이지 주소

• 정말 많이 사용
• A->B로 이동하는 경우 B를 요청할 때, Referrer:A를 포함해서 요청함
• 유입 경로 분석에 사용

(참고) 단순히 referer만 가지고 유입 경로 분석을 하기에는 변수가 너무 많아, 자바스크립트에 로그를 심거나 특별한 파라미터를 넘기는 등 서로 약속을 해서 진행함

c. User-Agent (요청)

유저 에이전트(클라이언트) 애플리케이션 정보 (웹 브라우저 정보..)

• 장애가 발생하는 브라우저 파악, 통계 정보 사용

d. Server (응답)

요청을 처리하는 ORIGIN 서버의 소프트웨어 정보

• ORIGIN 서버: 실제로 응답을 보낸 서버 (HTTP 요청을 보내면, 실제로 많은 프록시 서버를 거쳐 응답을 받게됨)

e. Date (응답)

메시지가 발생한 날짜와 시간

특별한 정보

<헤더 특별한 정보 정리>

특별한 헤더 종료	내용	사용 헤더	사용 목적	기타
Host	요청한 호스트 정보(도메인)	요청	하나의 IP에 여러 도메인이 적용되어 있을 때, 구분을 위해 사용	필수 헤더
Location	페이지 리다이렉션	응답	- 201: 요청에 의해 생성된 리소스 URI 설정 - 3xx: 자동으로 리다이렉션하기 위한 대상 리소스 설정
Allow	허용 가능한 HTTP 메서드	응답	405 에서 응답에 포함	거의 사용X (참고만)
Retry-After	유저 에이전트가 다음 요청을 하기까지 기다려야 하는 시간	응답	503 에서 서비스가 언제까지 불가인지 알려줌

a. Host (요청)

요청한 호스트 정보(도메인)

• 필수 헤더(아주 중요!!)
• 하나의 서버가 여러 도메인을 처리해야 할 때(하나의 IP 주소에 여러 도메인이 적용되어있을 때) 사용

 

<예제> 

1) 가상 호스트를 통해 여러 도메인을 한 번에 처리할 수 있는 서버가 있다고 할 때

• ip가 200.200.200.2 인 서버는 aaa.com, bbb.com, ccc.com 도메인을 처리할 수 있음

2) 클라이언트가 Host를 지정하지 않고 서버에 /hello 요청을 보내는 경우

• 서버는 /hello가 aaa.com, bbb.com, ccc.com 중 어떤 도메인에 관한 요청인지 구분X(IP로 통신하기 때문에)

3) 클라이언트가 Host를 지정하고 서버에 /hello 요청을 보내는 경우

• 서버는 /hello가 Host의 aaa.com에 관한 요청인지 앎

b. Location (응답)

페이지 리다이렉션

• 3xx(Redirection) 의 Location 값: 요청을 자동으로 리다렉션하기 위한 대상 리소스(이동할 위치)
• 201(Created) 의 Location 값: 요청에 의해 생성된 리소스의 URI

c. Allow (응답)

허용 가능한 HTTP 메서드

• 405(Method Not Allowed) 에서 응답에 포함해야 함
• 서버에서 많이 구현되어있지 않으므로 참고 정도만

d. Retry-After

유저 에이전트가 다음 요청을 하기까지 기다려야 하는 시간

• 503 (Service Unavailable): 서비스가 언제까지 불가인지 알려줄 수 있음
• 날짜, 초단위 표기O

 

인증

<정리>

인증 헤더 종류	설명	사용 헤더	사용 목적
Authorization	클라이언트 인증 정보	요청	인증 방식에 따라 값이 다양함
WWW-Authenticate	리소스 접근시 필요한 인증 방법 정의	응답	401(Unauthorized) 응답과 함께 사용

a. Authorization (요청)

클라이언트 인증 정보를 서버에 전달

• value 값은 인증 방식(OAuth)에 따라 다양함(필요하면 검색)

b. WWW-Authenticate (응답)

리소스 접근시 필요한 인증 방법 정의

• 401 Unauthorized 응답과 함께 사용

쿠키

1) Set-Cookie: 서버->클라이언트 쿠키 전달 (응답)

2) Cookie: 클라이언트가 서버에서 받은 쿠키를 저장, 클라이언트->서버 쿠키 전달(요청)

a. 쿠키 미사용

1) 처음 welcome 페이지 접근

로그인하지 않은 사용자가 서버에 /welcom 을 요청하면, 서버는 '안녕하세요. 손님'을 응답한다.

 

 

 

2) 로그인

사용자가 id, password 정보를 담아 서버에 /login 을 POST로 요청하면, 서버는 로그인 성공 응답을 한다.

 

 

3) 로그인 이후 welcome 페이지 접근

사용자가 로그인 이후 서버에 /welcome 을 요청하면, 서버는 로그인한 사용자임을 구분할 수 없기 때문에 ~손님을 응답한다.

 

Q. 서버는 왜 로그인한 사용자임을 알 수 없는가?

A. HTTP는 무상태(Stateless) 프로토콜이다.

• 클라이언트와 서버가 요청, 응답을 주고 받은 후 연결이 끊어진다.
• 클라이언트가 재요청을 하면 서버는 이전 요청을 기억하지 못한다.
• 클라이언트와 서버는 서로 상태를 유지하지 않는다.

4) 대안 - 모든 요청과 링크에 사용자 정보 포함?

 

요청을 할 때마다 userId, password 유저 정보를 계속 서버에 보낸다.

모든 요청에 사용자 정보를 넘기는 문제가 있다!! 개발자가 힘들어진다..

• 모든 요청에 사용자 정보가 포함되도록 개발 해야함
• 브라우저를 종료하고 다시 열면 Web Storage에 저장해놓고 다시 넣겨야 함

이 문제에 대해서 '쿠키' 를 사용하여 해결하는 법을 알아봅니다.

b. 쿠키 사용

1) 로그인

웹 브라우저가 id, password를 담아 POST로 /login을 서버에 요청하면,

서버는 Set-Cookie 에 유저 정보를 담아 클라이언트에 응답한다.

⇒ 클라이언트 웹 브라우저의 쿠키 저장소에 쿠키를 저장한다.

 

2) 로그인 이후 welcome 페이지 접근

로그인 이후, 웹 브라우저가 자동으로 Cookie를 담아 /welcome을 서버에 요청하면,

서버는 쿠키를 확인해서 로그인한 유저를 확인하고 응답을 한다.

 

3) 해결 - 모든 요청에 쿠키 정보 자동 포함

로그인 이후, 웹 브라우저가 요청을 보낼 때 자동으로 쿠키 저장소에서 꺼낸 쿠키를 담아 요청을 보낸다!!

 

<쿠기 생성, 접근 과정 정리>

1) 웹 브라우저가 id, password를 담아 서버에 로그인을 요청함

2) 서버는 id, password 검증에 성공하면, 해당 사용자에 대한 sessionId(쿠키)를 생성함

3) 서버는 Set-Cookie에 sessionId를 담아 웹 브라우저에 로그인 성공을 응답함

4) 웹 브라우저는 쿠키 저장소에 sessionId(쿠키)를 저장함

5) 이후 웹 브라우저가 쿠키 접근가능한 도메인에 요청을 보낼 때마다 자동으로 쿠키 저장소에서 꺼낸 sessionId(쿠키)를 Cookie에 담아 서버에 요청을 보냄

6) 서버는 sessionId(쿠키)의 유효성을 검사해 클라이언트를 식별함

 

c. 쿠키

 

쿠키 정보는 항상 서버에 전송된다!!

→ 네트워크 트래픽 추가 유발

→ 최소한의 정보만 사용(세션 id, 인증 토큰)

Q. 쿠키 정보를 서버에 전송하지 않고 클라이언트에서 그 정보를 갖고있는 방식을 쓰고 싶으면? (웹 브라우저 내부에 데이터를 저장하고 싶으면?

A. 웹 스토리지(localStorage, sessionStorage) 참고 https://codingcoding.tistory.com/184

(주의!) 보안에 민감한 데이터는 쿠키/웹스토리지에 저장하면 안된다!! (e.g. 주민번호, 신용카드 번호)
<사용처>
- 사용자 로그인 세션 관리
- 광고 정보 트래킹

아래에서 쿠키 접근을 제한하는 방법에 대해 알아보도록 한다.

 

c-1. 쿠키 - 생명주기

 

1) expires : 만료 날짜 설정

 

 

2) max-age : 초단위 설정

 

<쿠키 종류>

1) 세션 쿠키 - 만료 날짜를 생략하면 브라우저 종료시까지만 유지

2) 영속 쿠키 - 만료 날짜를 입력하면 해당 날짜까지 유지(브라우저가 종료되어도 클라이언트 시간이 남아있는 한 유지)

 

c-2. 쿠키 - 도메인 <>

1) 명시했을 때 → 명시한 문서 기준 도메인에 적용 , 서브 도메인도 포함해서 적용

domain=example.org 를 지정하고 쿠키 생성

• exmaple.org 와 dev.exmaple.org(서브 도메인) 도 쿠키 접근O ( 서브 도메인 설명 참고 )
  • 서브 도메인은 주 도메인의 일부인 도메인이다. 
    • https://wikipedia.org -> 서브: https://en.wikipedia.org

2) 생략: 현재 문서 기준 도메인만 적용

exmaple.org에서 쿠키 생성, domain 지정 생략

• example.org에서만 쿠키 접근O
• dev.example.org(서브 도메인)은 쿠키 미접근

c-3. 쿠키 - 경로 <>

• 이 경로를 포함한 하위 경로 페이지만 쿠키 접근 가능.
• 일반적으로 path=/ 루트 로 지정

 

c-4. 쿠키 - 보안 <<Secure, HttpOnly, SameSite>>

 

https://theheydaze.tistory.com/550

01. 시큐리티 - HTTP Only 와 Secure Cookie

1) Secure

• https인 경우메만 쿠키를 전송

set:cookie: 쿠키명=쿠키값;path=/;secure

(참고) 쿠키는 원래 http, https 를 구분하지 않고 쿠키를 서버에 전송함

 

2) HttpOnly

쿠키는 클라이언트에서 자바 스크립트로 조회할 수 있기 때문에 해커들이 자바스크립트로 쿠키를 가로채려고 시도함.

• XSS 공격 방지 목적
• 자바스크립트에서 쿠키 접근을 못하게 한다.(document.cookie)
• HTTP 전송에서만 쿠키 사용

3) SameSite

https://seob.dev/posts/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%BF%A0%ED%82%A4%EC%99%80-SameSite-%EC%86%8D%EC%84%B1/

• 서드 파티 쿠키의 보안적 문제를 해결하기 위해 만들어진 기술
• 크로스 사이트로 전송하는 요청의 경우 쿠키의 전송에 제한을 두도록 한다.
• CSRF 공격 방지 목적
• 요청 도메인과 쿠키에 설정된 도메인이 같은 경우만 쿠키 전송
• 크롬에서 가장 적극적으로 사용 중.
• (참고) 아직 기능이 적용된지 오래되지 않아서 사용할 때는 브라우저에서 어느정도 지원하는지 확인하고 사용해야함