HTTP 헤더, 쿠키에 대해서

HTTP 헤더

• header-field = field-name ":" OWS field-value OWS  (OWS : 띄어쓰기 허용)
• field-name에는 대소문자 구문 없음

 

용도

• http 전송에 필요한 모든 부가정보가 담긴다.
• 예) 메시지 바디의 내용, 바디의 크기, 압축, 인증, 요청 클라이언트, 서버 정보, 캐시 관리 정보 등...
• 표준 헤더가 너무 많다.
• 필요시 임의의 헤더 추가가 가능하다.

 

RFC2616 (과거)

HTTP Header

• General 헤더 : 메시지 전체에 적용되는 정보, 예) Connection: close
• Request 헤더 : 요청 정보, 예) User-Agent: Mozilla/5.0
• Response 헤더 : 응답 정보, 예) Server: Apache
• Entity 헤더 : 엔티티 바디 정보, 예) Context-Type: text/html, Content-Length: 3423

 

HTTP Body

• 메시지 본문은 엔티티 본문을 전달하는 데 사용된다.
• 엔티티 본문은 요청이나 응답에서 전달할 실제 데이터다.
• 엔티티 헤더는 엔티티 본문의 데이터를 해석할 수 있는 정보를 제공한다.
  • 예) 데이터 유형(html, json), 데이터 길이, 압축 정보

 

폐기

1999년 RFC2616이 폐기되며 2014년 RFC7230~7235가 등장했다.

 

RFC723X 등장

RFC723x 버전이 등장하면서 기존 RFC2616에서 많은 것들이 변화했다.

• 엔티티(Entity) -> 표현(Representation)으로 용어가 변경되었다.
  • Representation = Representation Metadata + Representation Data
  • 표현 = 표현 메타데이터 + 표현 데이터

 

HTTP Body 

• 메시지 본문을 통해 표현 데이터를 전달한다.
• 메시지 본문은 페이로드라고도 부른다.
• 표현은 요청이나 응답에서 전달할 실제 데이터이다.
• 표현 헤더는 표현 데이터를 해석할 수 있는 정보를 제공한다. (과거 Entity 헤더와 동일)

그렇다면 왜 엔티티에서 표현이라고 바뀌었을까?

특정 자원(resource)을 특정 유형으로 표현한다는 의미를 가지며 바뀌게 된 것이다.

또한 Representation의 R이 Rest API의 R의 의미를 가지고 있다.

 

표현

• Content-Type: 표현 데이터의 형식
• Content-Encoding: 표현 데이터의 압축 방식
• Content-Language: 표현 데이터의 자연 언어
• Content-Length: 표현 데이터의 길이

표현 헤더는 전송, 응답 둘 다 사용한다.

 

Content-Type

표현 데이터의 형식을 설명한다.

• 미디어 타입, 문자 인코딩 정보를 설명한다.
• 예)
  • text/htmll charset=utf-8
  • application/json
  • image/png

 

Content-Encoding

표현 데이터의 인코딩 방식을 의미한다.

• 표현 데이터를 압축하기 위해 사용한다.
• 데이터를 전달하는 곳에서 압축 후 인코딩 헤더를 추가한다.
• 데이터를 읽는 쪽에서 인코딩 헤더의 정보로 압축을 해제한다.
• 예)
  • gzip
  • deflate
  • identity

 

Content-Language

표현 데이터의 자연 언어를 의미한다.

• 데이터의 언어를 알 수 있다.
• 예) 
  • ko
  • en
  • en-us

 

Content-Length

표현 데이터의 길이를 의미한다.

• 바이트 단위
• Transfer-Encoding(전송 코딩)을 사용하면 Content-Length를 사용하면 안 된다.

 

협상(Contents Negotitaion)

클라이언트가 선호하는 표현 방식을 사전에 요청하여 서버에게 제공받는 것이다.

하지만 모든 것이 제공되지는 않으며 협상 헤더는 요청 시에만 사용한다.

• Accept: 클라이언트가 선호하는 미디어 타입 전달
• Accept-Charset: 클라이언트가 선호하는 문자 인코딩
• Accept-Encoding: 클라이언트가 선호하는 압축 인코딩
• Accept-Language: 클라이언트가 선호하는 자연 언어

 

Accept-Language 적용 전

한국어 브라우저로 요청을 해도 서버는 클라이언트가 한국어 브라우저인지 알 수 없기 때문에

서버에서는 서버의 기본 자연 언어인 영어로 응답한다.

 

만약 Accept-Language를 적용하면 어떻게 될까

 

Accept-Language 적용 후

클라이언트가 서버에게 ko형식의 자연 언어로 전송해 달라고 요청했다.

서버 측에서는 ko형식을 지원하기 때문에 ko형식의 자연언어로 응답한다.

 

단 모든 서버가 지원하는 것은 아니기 때문에 지원할 수도 안 할 수도 있다.

요청 언어가 없는 경우는 어떻게 될까?

 

 

요청 언어가 없는 경우

 

클라이언트에서 요청한 언어가 없는 경우 기본으로 설정된 언어를 제공하게 된다.

만약 내가 한국인이고 독일어는 모르지만 영어 실력이 어느 정도 있다고 가정해 보자.

한국어가 없을 경우 독일어가 아닌 영어를 보내달라고 요청하면 되지 않을까? 

 

우선순위를 선정하면 된다.

 

협상과 우선순위 1

• Quality Values(q) 값을 사용한다.
• 0~1 사이로 지정하며 클수록 높은 우선순위를 가지게 된다.
• 생략하면 기본값인 1로 지정된다.
• Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7
  • 순위
    1. ko-KR(q를 생략했기에 1순위로 지정된다.)
    2. ko;q=0.9 
    3. en-US;q=0.8
    4. en;q=0.7

 

우선순위를 지정한 경우

우선순위를 지정한 후 서버로 요청하게 되면 기본 독일 언어가 아닌 서버에서 지원하는 언어 중 우선순위가 가장 높은 언어로 응답한다.

 

협상과 우선순위 2

• 구체적인 것이 우선한다.
• Accept: text/*, text/plain, text/plain;format=flowed, */*
  • 순위
    1. text/plain;format=flowed
    2. text/plain
    3. text/*
    4. */*

 

협상과 우선순위 3

• 구체적인 것을 기준으로 미디어 타입을 맞춘다.
• Accept: text/*;q=0.3, text/html;q=0.7, text/html;level=1, text/html;level=2;q=0.4, */*;q=0.5

 

전송 방식

• 단순 전송
• 압축 전송
• 분할 전송
• 범위 전송

 

단순 전송

Content-Length를 알고 있을 때 사용한다.

 

압축 전송

Content-Encoding을 지정하여 압축 후 전송한다.

 

분할 전송

Transfer-Encoding을 이용하여 데이터를 분할하여 전송한다.

 

• 서버에서 전송되는 데이터를 분할 후 클라이언트에게 전송한다.
• \r\n은 분할된 파일의 끝을 의미한다.

 

범위 전송

Range, Content-Range

• 만약 데이터 전송 과정에서 전송이 끊기면 처음부터 다시 받을 필요가 없다.
• 클라이언트 측에서 범위를 요청하여 데이터의 특정 범위만 받을 수 있다. 

 

HTTP 헤더 일반 정보

• From : 유저 에이전트의 이메일 정보
• Referer : 이전 웹 페이지 주소
• User-Agent: 유저 에이전트의 애플리케이션 정보
• Server: 요청을 처리하는 오리진 서버의 소프트웨어 정보
• Date: 메시지가 생성된 날짜

 

From

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

• 일반적으로 잘 사용되지 않는다.
• 검색 엔진 같은 곳에서 주로 사용된다.
• 요청에서 사용된다.

 

Referer 

이전 웹 페이지 주소

• 현재 요청된 페이지의 이전 웹 페이지 주소이다.
• A -> B로 이동하는 경우 B를 요청할 때 Referer: A를 포함해서 요청한다.
• Referer을 이용해서 유입 경로 분석이 가능하다.
• 요청에서 사용된다.
• 참고로 referer은 단어 referrer의 오타인데 이미 사용 중이라서 고칠 수가 없다 한다.ㅋㅋ

 

User-Agent

유저 에이전트 애플리케이션 정보

• 클라이언트의 애플리케이션 정보(웹 브라우저 등등)이다.
• 통계에 주로 사용되며 어떤 종류의 브라우저에서 장애가 발생하는지 로그를 파싱 해서 파악할 수 있다.
• 요청에서 사용된다.

 

Server

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

• 요청은 여러 프록시 서버를 거쳐 실제 서버로 전달된다. Server를 통해 표현 데이터를 만들어주는 오리진 서버를 파악할 수 있다.
• Server: Apache/2.2.22 (Debian)
• Server: nginx
• 응답에서 사용된다.

 

Date

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

• Date: Tue, 15 Nov 1994 08:12:31 GMT
• 응답에서 사용된다.

 

HTTP 헤더 특별 정보

• Host: 요청한 호스트 정보(도메인)
• Location: 페이지 리다이렉션
• Allow: 허용 가능한 HTTP 메서드
• Retry-After: 유저 에이전트가 다음 요청을 하기까지 기다려야 하는 시간

 

Host

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

• 필수이다.
• 하나의 서버가 여러 도메인을 처리해야 할 때
• 하나의 IP 주소에 여러 도메인이 적용되어 있을 때
• 요청에서 사용된다.

예시)

host를 지정하지 않은 경우

 

만약 여러 도메인을 한 번에 처리할 수 있는 서버에서 여러 애플리케이션이 구동되고 있다고 가정하자.

클라이언트가 host를 전달하지 않으면 서버에서는 어떤 애플리케이션으로 요청을 처리해야 할지 구별할 수 없다.

 

host를 지정한 경우

 

서버는 클라이언트에서 지정한 호스트를 이용하여 특정 애플리케이션으로 요청을 처리할 수 있다.

 

Location

페이지 리다이렉션

• 웹 브라우저는 3xx응답의 결과에 Location 헤더가 있으면, Location 위치로 자동으로 이동한다.(리다이렉트)
• 이는 상태 코드에서 다루었다.
• 201 (Created)의 경우 Location 값은 요청에 의해 생성된 리소스 URI를 의미한다.
• 3xx (Redirection)의 경우 Location 값은 요청을 자동으로 리다이렉션 하기 위한 대상 리소스를 의미한다.

 

Allow

허용 가능한 HTTP 메서드

• 405 (Method Now Allowed)의 경우 서버는 응답 메시지에 허용 가능한 메서드를 담아 응답해야 한다.
• 실제로는 잘 구현하지 않는다.
• Allow: GET, HEAD, PUT 

 

Retry-After

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

• 503 (Service Unavailable)의 경우 Retry-After를 이용하여 서비스가 언제까지 불능인지 알려줄 수 있다.
• Retry-After: Fri, 31 Dec 1999 23:59:59 GMT -> 구체적인 날짜를 표기
• Retry-After: 120 

 

인증

• Authorization: 클라이언트 인증 정보를 서버에 전달
• WWW-Authenticate: 리소스 접근 시 필요한 인증 방법 정의

 

Authorization

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

• Authorization: Basic xxxxxxxxxxxxxxxxxxxx
• Authorization: Bearer xxxxxxxxxxxxxxxxxxxxx

 

WWW-Authenticate

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

• 리소스 접근 권한이 없는 경우 서버에서 401 Unauthorized 응답과 함께 사용한다.

 

쿠키

• Set-Cookie: 서버에서 클라이언트로 쿠키를 전달한다.
• Cookie: 클라이언트가 서버에서 받은 쿠키를 저장하고, HTTP 요청 시 서버로 전달한다.

 

쿠키 미사용 시

처음 welcome 페이지 접근

 

로그인

 

로그인 이후 welcome 페이지 접근

• 홍길동님이라고 보내지 않는다.
• HTTP는 무상태 프로토콜이기 때문에 로그인 후 연결이 끊기게 되며 클라이언트의 로그인 정보를 알 수 없다.

 

Stateless

• HTTP는 무상태 프로토콜이다.
• 클라이언트와 서버가 요청/응답을 주고받으면 연결이 끊어진다.
• 클라이언트가 다시 요청하면 서버는 이전 요청을 기억하지 못한다.

 

위 사진처럼 모든 요청마다 사용자 정보를 포함하면 되지 않을까?

 

• 보안과 구현에 많은 어려움이 있다.
• 모든 요청에 사용자 정보가 포함되도록 개발해야 하기 때문에 어려움이 있다.
• 브라우저를 완전히 종료하고 다시 열면 클라이언트 정보가 사라지게 된다.

그렇다면 어떻게 이 문제를 해결할 수 있을까?

 

쿠키 사용 시

로그인

 

• 서버에서 쿠키를 생성하여 클라이언트에게 응답한다.
• 클라이언트는 서버로부터 받은 쿠키를 쿠키 저장소에 저장한다.

로그인 이후 welcome 페이지 접근

• 로그인 시 쿠키 저장소에서 쿠키를 탐색한 후 요청에 함께 보낸다.
• 서버 측에서는 사용자 정보가 아닌 쿠키를 받아 응답하게 된다.

모든 요청에 쿠키 정보 자동 포함

• 쿠키 저장소로부터 탐색 후 자동으로 쿠키를 전송하게 된다.
• 모든 요청에 쿠키 정보를 담아 전달하는 것은 보안 문제가 발생할 수 있다.

 

쿠키에 대해서

• 쿠키는 세션 아이디, 쿠키만료시간, 쿠키 허용 경로, 쿠키 허용 도메인, 쿠키 보안정보가 포함되어 있다.
• 사용처
  • 사용자 로그인 세션 관리
  • 광고 정보 트래킹 (해당 웹브라우저 사용자들이 보는 광고를 트래킹 한다)
• 쿠키 정보는 항상 서버에 전송된다.
  • 네트워크 트래픽을 추가로 유발하게 된다.
  • 따라서 최소한의 정보만 사용해야 한다.(세션 id, 인증 토큰 정도만)
  • 서버에 전송하지 않고, 웹 브라우저 내부에 데이터를 저장하고 싶으면 웹 스토리지를 사용하면 된다.
• 주의할 점
  
  • 보안에 민감한 데이터는 저장하면 안 된다.
  • 예) 주민번호, 신용카드 번호

 

쿠키 - 생명주기

Expires, max-age

• Set-Cookie: expires=Sat, 26-Dec-2020 04:39:21 GMT
  
  • expires 옵션을 사용하게 되면 해당 날짜에 쿠키가 삭제된다.
• Set-Cookie: max-age=3600 
  • max-age 옵션을 사용하게 되면 해당 초 이후 쿠키가 삭제된다.
  • 0이나 음수를 지정하면 바로 삭제된다.
• 세션 쿠키: 만료 날짜를 생략하면 브라우저 종료 시까지만 유지된다.
• 영속 쿠키: 만료 날짜를 입력하면 해당 날짜까지 유지된다.

 

쿠키 - 도메인

• 예) domain=example.org
• 명시한 경우: 명시한 문서 기준 도메인 + 서브 도메인 포함
  • domain=example.org를 지정해서 쿠키를 생성한다.
    • example.org는 물론 dev.example.org도 쿠키 접근이 가능하다.
• 생략한 경우: 현재 문서 기준 도메인만 적용
  • example.org에서 쿠키를 생성하고 domain 지정을 생략했다면 어떻게 될까?
    • example.org에서는 쿠키 접근이 가능하다.
    • 반면 dev.example.org에서는 쿠키 접근이 불가능하다.

 

쿠키 - 경로

• 예) path=/home
• 경로를 포함한 하위 경로 페이지에만 쿠키 접근이 가능하다.
• 일반적으로 path=/ 루트로 지정한다.
• path=/home을 지정한 경우 
  • /home -> 가능
  • /home/level1 -> 가능
  • /home/level1/level2 -> 가능
  • /hello -> 불가능

 

쿠키 - 보안

secure, HttpOnly, Samesite

 

Secure

• 쿠키는 http, https를 구분하지 않고 전송한다.
• Secure를 적용하면 https인 경우에만 전송한다.

HttpOnly

• XSS 공격 방지
• 자바스크립트에서 쿠키 접근이 불가능하다.(document.cookie)
• HTTP 전송에만 사용이 가능하다.

SameSite

• XSRF 공격 방지
• 요청 도메인과 쿠키에 설정된 도메인이 같은 경우만 쿠키를 전송한다.

 

출처 : https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC/dashboard