캐시 🧮

• 목적: 웹 자원을 효율적으로 쓰기 위함
  • 개인 브라우저에 응답으로 온 HTML이나 JSON을 저장해두고
  • 변경이 없는 데이터는 서버 요청 없이 브라우저에 저장된 캐시를 사용
• 보통 GET 요청만 캐싱한다.
  • GET이 REST적 의미로 '가져오다'의 의미
    => 가져온 데이터를 저장해두고 쓰는 의미가 강하다. (다른 메서드의 데이터를 캐싱하는 경우는 거의 없음 - POST, PUT, .. 이상하잖아)
• 보통 상태 코드 200(가져오기 성공), 301(다른 주소로 이동 후 가져옴),
  404(가져올 게 없음) 응답을 캐싱

자주 쓰이는 캐시 옵션

1. Cache-Control

• Cache-Control: no-store
  • 아무 것도 저장(캐시)하지 않을 때
  • 형태: no-store만 쓰기, 또는 no-cache, no-store, must-revalidate 다 붙이기
• Cache-Control: no-cache
  • no-cache이지만 '캐싱하지 말라'는 뜻이 아님!!
  • 캐시를 쓰기 전에 '이 캐시를 써도 되는지' 서버에 물어보라는 뜻
    (이 캐시 쓰면 안 되나요..(no)?😳)
• Cache-Control: must-revalidate
  • 만료된 캐시만 서버에 확인(revalidate)을 받아야 한다(must)는 뜻
• Cache-Control: public/private
  • public: 공유 캐시나 중개 서버(proxy)에 저장 가능
  • private: 브라우저 같은 특정 사용자 환경에'만' 저장

2. max-age

• 응답 캐시가 만료되기까지 걸리는 시간 (second 단위)
• 예: max-age=3600 => 1시간(3600초) 뒤 응답 캐시가 만료됨

3. Age

• (max-age 이내에) 지나간 시간
• 예: max-age=3600에서 1분이 지나면 Age: 60(minute 단위)이 응답 캐시의 헤더에 포함됨

4. Expires

• 응답 캐시가 만료되는 시점 (cf. max-age: 응답 캐시가 만료되기까지 걸리는 시간)
• max-age를 Expires보다 우선 (max-age가 있으면 Expires 무시)

5. ETag

• HTTP 응답의 변경 여부를 알려주는 태그 (응답 내용이 달라지면 ETag 값이 달라짐)
  • 기존의 캐시를 지우고 새 응답을 내려받을지 결정하는 기준
• 예:
  • GET 요청의 응답 본문 = '안녕 제로초', ETag 헤더 값 = 12345
  • 서버의 다음 응답이 동일하면 ETag = 12345 (변경 없음)
  • 만약 응답이 바뀌면('안녕 이태그') ETag 헤더 값도 변경 (34567)
  • ETag 값 변경으로 인해 응답 내용이 달라진 것을 알게 되어 캐시를 지우고 새 응답을 호출

6. If-None-Match

• '매치되는 게 없다면' - ETag 기점으로 분기하는 것
• ETag가 같으면 서버에서 304 Not Modified(수정되지 않음)를 응답하고, 브라우저에 저장된 캐시를 그대로 사용하게 함

쿠키 🍩

• XSS 공격과 CSRF 공격에 취약
• 방지법
  • 서버에서 HttpOnly 옵션을 꼭 켜두기
  • 쿠키를 사용하는 요청은 서버 검증 로직을 꼭 마련하기

Set-Cookie

• 브라우저에 쿠키를 저장하기 위한 서버의 응답 헤더
• 형태: Set-Cookie: 키=값; (options) (예: Set-Cookie: hello=zero)

Max-Age

• 쿠키가 지속되는 시간 (second 단위)

Expires

• 쿠키가 만료되는 시점
  • Max-Age가 있을 경우 Expires를 무시하고 Max-Age를 우선

Secure

• https에서만 쿠키를 전송해야 함
• HttpOnly: JS에서 쿠키 접근 불가 (XSS 방지)
• Domain: 도메인이 일치하는 요청에서만 쿠키를 전송해야
  • 도메인이 다른 쿠키들은 third-party 쿠키로 개인의 브라우저 활동을 적극 추적한다.
• Path: 경로와 일치하는 요청에서만 쿠키를 전송해야

Cookie 헤더

• 클라이언트가 서버한테 쿠키를 담아 보내는 요청 헤더
  • 형태: Cookie: 키=값; 키=값; ... (한 번에 여러 개의 쿠키 설정 가능)
• 서버에서는 요청 헤더의 쿠키를 파싱해서 사용한다.
  • CSRF 공격을 막기 위해 반드시 쿠키가 제대로 된 상황에서 온 것인지 확인하는 서버 로직이 필요하다.

참고 자료

알아둬야 할 HTTP 쿠키 & 캐시 헤더