티스토리 뷰

연관글:

 

[Web] 웹브라우저, 웹서버 저장소 2. 세션(Session)

연관 글 :[Web] 웹브라우저, 웹서버 저장소 1. 쿠키(Cookie) [Web] 웹브라우저, 웹서버 저장소 1. 쿠키(Cookie)1. 쿠키(Cookie) 란?쿠키는 웹서버가 사용자의 웹 브라우저에 저장하는 작은 텍스트 파일이다.

jimango.tistory.com

 

[Web] 웹브라우저, 웹서버 저장소 3. 웹 스토리지 - Local Storage, Session Storage

연관글: [Web] 웹브라우저, 웹서버 저장소 1. 쿠키(Cookie)1. 쿠키(Cookie) 란?쿠키는 웹서버가 사용자의 웹 브라우저에 저장하는 작은 텍스트 파일이다.더 자세히 말하자면, stateless 특성을 가진 HTTP 통

jimango.tistory.com

다른 웹 저장소에 대해 정리해놓은 글이므로 함께 보는 것을 추천한다!

 

 

1. 쿠키(Cookie) 란?

쿠키는 웹서버가 사용자의 웹 브라우저에 저장하는 작은 텍스트 파일이다.

더 자세히 말하자면, stateless 특성을 가진 HTTP 통신을 stateful하게 만들기 위한 웹 브라우저의 저장소이다.

 💡 stateless 이란?
  stateless(무상태성)은 각각의 요청을 독립적으로 취급하여 이전 요청이나 사용자의 상태 정보를 기억하지 않는 것을 말한다.

 

 

2. 쿠키 설정은 어떻게?

쿠키에 대한 속성 및 값은 웹서버에서 Set-Cookie 헤더를 이용해 설정하며, 이후 요청 부터 웹 브라우저에서 웹 서버로 쿠키가 전달된다.

각 언어별 설정 방법을 살펴보자.

1) node.js

res.cookie('name', 'value', path: '/admin', domain: '.example.com', httpOnly: true, secure: true);

 

2) Java

Cookie cookie = new Cookie("name", "value");
cookie.setPath("/admin");
cookie.setDomain(".example.com");
cookie.setHttpOnly(true);
cookie.setSecure(true);
response.addCookie(cookie);

 

3) PHP

setcookie("name", "value", time() + 3600, "/", "", true, true);
// ("key", "value", 유효시간, path, domain, secure, httponly);

이처럼 각 언어별 쿠키 설정 방식은 다르지만, 웹 서버에서 쿠키의 이름, 값과 옵션들을 설정한다.

 

3. 쿠키 옵션

위에서 쿠키를 설정할 때 옵션도 같이 설정하는 것을 코드로 확인했다.

그렇다면 각 옵션들은 어떤 의미를 가질까?

 

1) Domain + Path

웹 브라우저가 쿠키를 웹 서버에게 전송하는 기준이 된다. 즉, 설정한 Domain + Path 로 접근했을 때만 쿠키가 사용된다.

 

Domain

설정한 도메인에서만 쿠키에 접근이 가능하며, default 값은 쿠키를 설정한 도메인이다.

 

Path

설정한 경로의 하위 경로 페이지만 쿠키에 접근이 가능하며 절대경로여야 한다. default 값은 현재 경로이다.

 

예를 들어,

쿠키 설정을 다음과 같이 할 경우

  • 1번 쿠키 : h1 = w1 (Domain: a.com, Path: *)
  • 2번 쿠키 : h2 = w2 (Domain: a.com, Path: /)
  • 3번 쿠키 : h3 = w3 (Domain: b.com, Path: /hello)
  • 4번 쿠키 : h4 = w4 (Domain: c.com, Path: /world)

쿠키 전송은 다음과 같이 이루어진다.

  • 웹 브라우저에서 a.com/user/name 호출 시 1번 쿠키 + 2번 쿠키 전송
  • 웹 브라우저에서 a.com/ 호출 시 1번 쿠키 + 2번 쿠키 전송
  • 웹 브라우저에서 b.com/hello 호출 시 3번 쿠키 전송
  • 웹 브라우저에서 c.com/ 호출 시 어떤 쿠키도 전송하지 않음

 

2) MaxAge, Expires

쿠키의 유효기간을 설정하는 옵션으로

유효기간을 설정하지 않는다면 Session Cookie(세션 쿠키), 명시한다면 Persistent Cookie(지속 쿠키) 이다. 세션 쿠키는 브라우저 창이 닫힐 때 쿠키도 함께 삭제된다.

 

💡 Session의 의미
session은 작업이 열렸다 닫히는 시간 단위를 말한다. 세션 쿠키에서의 세션은 브라우저 세션이기 때문에, 브라우저 창을 닫을 경우 쿠키가 사라진다.

 

MaxAge(유효 기간)

현재부터 만료 일시까지의 시간을 초로 환산한 값으로 설정한다. 만약 0이나 음수값으로 설정한다면 쿠키가 바로 삭제된다.

 

Expires(유효 일자)

설정한 Expires 일자까지 쿠키를 유지한다. 만약 해당 일자에 도달하면 쿠키는 자동으로 삭제된다.

 

3) secure, httpOnly, samesite

쿠키의 보안을 위한 옵션이다. 하나하나 살펴보자.

 

secure

해당 옵션을 True로 설정하면 HTTPS 로 통신하는 경우에만 쿠키가 전송되기 때문에 MITM 을 방지할 수 있다.

 💡 MITM(Man In The Middle)
클라이언트와 서버의 통신 중간에 공격자가 요청, 응답을 탈취하는 것을 말한다.

 

httpOnly

클라이언트 측의 JS 같은 스크립트가 쿠키에 접근할 수 없도록 한다. 해당 옵션은 XSS 공격을 방지하기 위해 사용한다.

 

💡 XSS(Cross Site Scripting)
공격자가 악의적인 자바스크립트 코드를 페이지에 삽입하고, 사용자가 해당 페이지에 접속하기를 기다리는 공격 방식이다.

 

예를 들어

httpOnly 옵션을 사용하지 않는다면, 해커는 document.cookie 를 보거나 조작할 수 있는 해커의 코드도 함께 실행된다.

하지만 해당 옵션을 True로 설정할 경우 document.cookie 로 쿠키에 접근할 수 없기 때문에 쿠키를 보호할 수 있고, 인증 정보를 훔치거나 조작하는 것도 막을 수 있다.

 

samesite

samesite 옵션은 웹 브라우저 주소란에 표시된 도메인과 동일한 도메인에 대한 요청에서만 쿠키가 전송되도록 해서 CSRF 공격을 방지한다.

 💡 CSRF(Cross Site Request Forgery)
사용자가 이미 인증된 사이트에 대해 변경이나 행동을 강제로 수행하게 하는 공격 방법을 말한다. 예를 들어 ****사용자가 공격용 페이지에 접속 했을 때, 공격자는 사용자가 이전에 로그인 해놓은 웹사이트에 요청을 전송하도록 만들어 사용자가 의도치 않은 요청이 수행될 수 있다.

 

💡 Same Site와 Same Origin 의 차이
Site는 TLD와 그 다음 도메인까지만 같은 것을 말하고, Origin은 Scheme + Host Name(Domain name) + Port 가 모두 같은 것을 말한다. 예를 들어 https://example.com:8080 에서 site는 example.com 이고, origin은 https://example.com:8080 전체를 의미한다.

 

samesite에는 두 가지 값을 설정할 수 있다.

 

samesite = strict

퍼스트 파티 쿠키 전송만 허용한다.

 

samesite = lax

서드파티 쿠키라도 GET, <a href>, <link rel=”prerender”> 와 같이 값을 변경하지 않는 안전한 요청을 부분적으로 허용한다.

최신 크롬에서는 lax가 Default 이다.

 

참고) 퍼스트파티 쿠키 / 서드파티 쿠키

쿠키는 퍼스트파티 쿠키와 서드파티 쿠키로 나뉜다.

이때 나뉘는 기준은 사이트 도메인과 쿠키 도메인이 같은지 아닌지에 있다.

 

사이트 도메인 : 현재 접속해 있는 페이지의 도메인
쿠키 도메인 : 저장된 쿠키의 도메인

 

 

퍼스트파티 쿠키사이트 도메인과 쿠키 도메인이 같은 것이고,

서드파티 쿠키사이트 도메인과 쿠키 도메인이 다를 때를 말한다.

 

4. 쿠키의 단점

  • 민감한 정보들이 노출될 위험이 있다.
  • Domain + Path 가 일치하는 요청일 때는, 매 요청마다 쿠키를 함께 전송하기 때문에 Network Overhead 가 커질 수 있다. 따라서 단순한 저장소로 사용하면 안된다.

 

5. 다른 웹 저장소와의 비교

구분 쿠키(Cookie) 세션(Session) 웹 스토리지(Web Storage)
저장 위치 웹 브라우저 웹 서버 메모리 또는 서버 측 저장소 웹 브라우저
설정 및 관리 주체 웹 서버 웹 서버 웹 브라우저(자바스크립트)
저장 가능 용량 적다(4KB) - 매 요청마다 쿠키를 보내기 때문에 네트워크 부하 방지를 위해 적은 용량 사용 상대적으로 많다(서버의 메모리 용량에 따라 상이) 쿠키보다 많다.(10MB)
사용 목적 식별 정보 저장, 추적 정보 저장 등 사용자 인증, 권한 확인 등 웹 브라우저의 저장소로 활용
보안 Secure, HTTPOnly, samesite로 제어 가능 상대적으로 안전 웹 브라우저에서만 접근 가능(스크립트 접근 가능)
브라우저간 공유 불가능 가능 불가능
성능 네트워크 부하에 영향을 미친다. 네트워크에는 영향이 없지만 서버 성능 저하에 영향을 미칠 수 있다. 네트워크에 부하에 거의 영향을 미치지 않는다.
범위 지정된 Domain + Path 에서만 유효 세션 ID에 해당하는 데이터 식별 지정된 Domain에서 모두 유효
만료 시간 설정 가능 설정 가능 설정 불가능
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/07   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함