Taesun Lee

Taesun Lee

I am currently working with Cloud.

HTTP 정리 with Cookie, Web Storage, CORS Concept

HTTP

정의

HTTP는 Hyper Text Transfer Protocol의 약자로 w3(world wide web) 상에서 서버들과 클라이언트들이 정보를 주고받을 수 있는 프로토콜이다. 클라이언트가 HTTP Request를 하고, 서버가 HTTP Response를 응답한다. 주로 TCP를 이용하고, HTTP/3 부터는 UDP를 사용한다. Stateless한 것이 특징이다.

  • TCP: Transmissio Control Protocol. 전송 계층. 연결형 프로토콜
  • UDP: User Datagram Protocol. 전송계층. 비 연결형 프로토콜

HTTP Versions

HTTP 0.9

  • 단순
  • HTML만 전송 가능

HTTP 1.0

  • 헤더가 추가 됨
    • 상태 코드, Content- Type 등
  • HTML 외에 다른 형식의 응답 가능
  • 커넥션 당 하나의 Request와 하나의 Response만 가능

HTTP 1.1

  • Persistent Connection 개념 추가
    • 지정한 timeout 동안 커넥션을 닫지 않음
    • 하나의 커넥션으로 여러 Request, Response 처리 가능
  • Pipelining 도입
    • 기존) 여러 요청을 할 경우, 앞의 요청에 대한 응답이 온 후에 다음 요청을 보내는 방식
    • 하나의 커넥션에서, 여러 요청을 연속적으로 보내고, 그 순서에 맞춰서 응답을 받는 방식 → 지연시간을 줄일 수 있음
    • 문제점) 앞선 요청이 서버에서 처리가 오래 걸릴 경우, 다음 요청 응답들도 기다려야함 → HOL Blocking(Head of Line Blocking)

HTTP 2.0

  • 2015 released
  • HTTP 1.1 버전의 성능 향상을 목적으로 함
  • 요청을 HEADERS frame과 DATA frame으로 분류
  • 메시지 전송 시 바이너리로 인코딩
  • 스트림 단위로 request, response
  • Request와 Response Multiplexing
    • 여러 stream들을 interleaving 방식으로 mix해서 보낸 후, 조합 가능
    • HOL Blocking(Head of Line Blocking) 해결
  • Stream Prioritization
    • 리소스간 우선 순위 설정 가능
  • Server Push
    • 클라이언트가 요청하지 않은 데이터를 서버가 알아서 전송
  • Header Compression
    • 중복된 필드를 재전송 하지 않음
    • Header가 평문이었던 기존 방식에서 Huffman Coding(데이터 문자의 빈도에 따른 길이의 부호를 사용)을 사용해 압축

서버가 전송한 데이터-쿠키를 클라이언트-브라우저가 저장해 두었다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송한다.. 요청이 이전과 동일한 브라우저에서 이루어짐을 확인할 수 있다. Stateless한 HTTP 프로토콜에서 로그인, 장바구니 정보 등을 관리하기 위해 사용된다.

특징

  • 서버가 응답에 ‘Set-Cookie’ 헤더를 이용하여 쿠키를 전송한다. 이 값이 브라우저에 의해 저장된 후, 이후 요청의 ‘Cookie’ 헤더에 포함되어 전송된다.
  • 쿠키 길이 제한 - 4KB
  • 각 사이트마다 최대 20개의 쿠키 저장 가능
  • 클라이언트에 최대 300개 저장 가능
  • 브라우저가 종료 되어도 유지된다.
  • Expires, Max-Age를 명시 할 경우 → Permanent Cookie, 아무것도 명시하지 않을 경우 → Session Cookie (브라우저 종료 시 제거 됨)

Web Storage

HTML5의 새로운 기능으로, 클라이언트-브라우저에 데이터를 저장할 수 있다.

  • 5MB 까지 사용 가능
  • (숫자로 저장 하더라도) 문자열로 저장, 조회

Local Storage

  • 브라우저 자체에 반영구적으로 데이터 저장
  • 브라우저를 종료해도 데이터가 유지됨
  • 도메인이 다른 경우 접근 불가
  • 페이지 프로토콜별로 구분됨 (ex) http, https)

Session Storage

  • 각 세션마다 데이터가 분리되어 저장 (여러 탭, 창마다 데이터가 격리됨)
  • 페이지 세션이 끝날때(페이지를 닫을 때) 데이터가 제거
  • 도메인이 같아도 세션이 다르면 데이터에 접근 불가

CORS

Cross-Origin Resource Sharing(교차 출처 자원 공유)의 약자로, 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션에서 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 보안 매커니즘

  • ex) 허용된 Frontend UI에서만 서버의 자원을 요청할 수 있도록 제한하는 경우 사용
  • Protocol + Domain + Port가 같을 경우 같은 Origin
  • 브라우저는 Request 요청에 ‘Origin’ 라는 헤더와 Response의 ‘Access-Control-Allow-Origin’ 라는 헤더가 같으면 같은 출처로 인식
  • SOP (Same-Origin Policy) - 같은 출처에서만 리소스를 공유할 수 있다는 보안 정책, CORS 정책을 지켰을 경우 허용한다.

HTTP Message

HTTP 요청은 HTTP Method, URL, Header, Body 등으로 이루어 진다.

HTTP Methods

  • GET - 서버로 부터 정보를 조회
  • POST - 서버에 데이터를 제출
  • PUT - 서버의 데이터를 update
  • DELETE - 서버의 데이터를 삭제

HTTP Headers

General

  • Request URL
  • Request Method
  • Status Code
  • Remote Address
  • Referrer Policy

Response

  • Server
  • Set-Cookie
  • Content-Type
  • Date

Request

  • Cookies
  • Accept-xxx
  • Content-Type
  • Content-Length
  • Authorization
  • User-Agent
  • Referrer

Status Codes

  • 1xx (Informational) - Request가 요청되었고, 작업중인 경우
  • 2xx (Success) - 성공적으로 Request가 요청되었고, 받아들여진 경우
  • 3xx (Redirect) - redirect가 필요한 경우
  • 4xx (Client Error) - 요청에 문제가 있을 경우
  • 5xx (Server Error) - 서버에서의 작업이 실패한 경우

주요 Status Codes

200 - OK
201 - 요청이 성공적으로 처리되었음, 자원이 생성됨
301 - Moved to new URL
304 - Not modified, 재전송할 필요가 없음
400 - Bad request
401 - Unauthorized
404 - Not found
500 - Internal server error

HTTP Request/Response Example

크롬의 개발자 도구를 통해 확인한 HTTP 요청을 한 경우의 예제는 아래와 같다. (URL https://ko.wikipedia.org/wiki/HTTP 를 사용)

  • General
Request URL: https://ko.wikipedia.org/wiki/HTTP
Request Method: GET
Status Code: 200 
Remote Address: 103.102.166.224:443
Referrer Policy: strict-origin-when-cross-origin
  • Request Headers
:authority: ko.wikipedia.org
:method: GET
:path: /wiki/HTTP
:scheme: https
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
accept-encoding: gzip, deflate, br
accept-language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7
cache-control: max-age=0
cookie: GeoIP=KR:41:Seongnam-si:37.44:127.14:v4; kowikimwuser-sessionId=31eb9c8757e7f0040a08; WMF-Last-Access-Global=07-Mar-2021; WMF-Last-Access=07-Mar-2021; kowikiel-sessionId=59aa09c9f5756a9bb55e; kowikiwmE-sessionTickLastTickTime=1615123244046; kowikiwmE-sessionTickTickCount=8
sec-fetch-dest: document
sec-fetch-mode: navigate
sec-fetch-site: none
sec-fetch-user: ?1
upgrade-insecure-requests: 1
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36
  • Response Headers
accept-ranges: bytes
age: 537
cache-control: private, s-maxage=0, max-age=0, must-revalidate
content-encoding: gzip
content-language: ko
content-length: 36823
content-type: text/html; charset=UTF-8
date: Sun, 07 Mar 2021 13:12:43 GMT
last-modified: Wed, 24 Feb 2021 06:21:57 GMT
nel: { "report_to": "wm_nel", "max_age": 86400, "failure_fraction": 0.05, "success_fraction": 0.0}
p3p: CP="See https://ko.wikipedia.org/wiki/Special:CentralAutoLogin/P3P for more info."
report-to: { "group": "wm_nel", "max_age": 86400, "endpoints": [{ "url": "https://intake-logging.wikimedia.org/v1/events?stream=w3c.reportingapi.network_error&schema_uri=/w3c/reportingapi/network_error/1.0.0" }] }
server: ATS/8.0.8
server-timing: cache;desc="hit-front"
strict-transport-security: max-age=106384710; includeSubDomains; preload
vary: Accept-Encoding,Cookie,Authorization
x-cache: cp5011 miss, cp5012 hit/1
x-cache-status: hit-front
x-client-ip: x.x.x.x
x-content-type-options: nosniff
x-request-id: YDYTSXxH2zOzzvbpPqhbAwAAANA

Source

Leave a comment

You may also enjoy