[Web] HTTP 쿠키(Cookie)란 무엇인가?

 쿠키(Cookie)란? 

쿠키는 웹 브라우저와 웹 서버 간의 정보를 교환할 때 사용되는 작은 기록 파일을 말합니다. 쿠키는 사용자가 임의의 웹 사이트를 방문할 때 사용자의 디바이스(PC, 휴대폰, 태블릿)등에 저장되며 쿠키에는 사용자에게 필요한 정보를 저장하여 사용자 경험을 향상시켜 줍니다. 예를 들자면 장바구니에 물건을 추가한다거나 로그인이 풀리지 않도록 처리하는 등에서 쿠키를 활용할 수 있겠습니다. 이후 HTTP 요청을 서버로 보낼 때 웹 브라우저는 쿠키를 같이 전송해 줍니다. 그 쿠키에 있는 데이터를 서버 측에서는 활용할 수 있겠죠.

 

세션 관리 : 쿠키를 사용하여 사용자의 로그인 상태나 세션을 관리할 수 있습니다.
맞춤형 콘텐츠 제공 : 쿠키를 활용하여 사용자에 입맛에 맞는 콘텐츠를 제공할 수 있습니다.
사용자 추적 : 마케팅 및 통계 데이터 축적을 목적으로 사용자의 행동을 추적할 수 있습니다.
광고 타겟팅 : 쿠키들을 분석하여 나의 관심사를 분석하고 맞춤형 광고를 제공할 수 있습니다.

 

쿠키를 사용할 때 주의점

• 보안에 취약함 : 참고로 쿠키는 보안에 취약합니다. 따라서 비밀번호나 주민등록번호, 카드번호 같은 민감한 정보를 쿠키에 담으면 안 됩니다. 
• 유효기간을 설정하는 것을 권장함 : 쿠키를 영구적으로 저장할 수는 없겠죠. 따라서 쿠키의 유효기간을 제한해서 긴 시간 동안 쿠키가 남아있지 않도록 제한해야 합니다. 쿠키의 지속 시간은 Expires나 Max-Age 속성을 사용하시면 됩니다. Expires는 특정 날짜와 시간까지 쿠키를 유효시킨다는 뜻이고 Max-Age는 쿠키를 얼마나 지속시킬 것인지 초 단위로 설정할 수 있습니다.

Set-Cookie: user_id=123; Expires=Wed, 15 Jan 2024 12:00:00 GMT;
Set-Cookie: user_id=123; Max-Age=3600;

위와 같이 제한 시간을 설정해 주시면 됩니다. 만약 유효기간이 별도로 명시되지 않은 쿠키는 브라우저의 세션이 종료될 때 함께 만료됩니다.

 

쿠키의 동작 원리

• Request : 사용자가 웹 사이트를 띄우면 브라우저는 접속 사이트의 도메인에 해당하는 웹 서버에 데이터를 요청합니다.
• Response with cooke : 웹 서버는 쿠키를 응답 헤더 Set-Cooke에 설정하여 응답합니다.
• Request with cooke : 브라우저는 응답받은 쿠키를 저장하고 이후 HTTP 요청에 저장했던 쿠키를 같이 전송합니다.
• Response : 서버는 브라우저에게 전송받은 쿠키 데이터를 확인할 수 있고, 요청에 대한 데이터를 응답합니다.

 

쿠키는 어떻게 저장되나요?

HTTP 응답 헤더에 Set-Cookie가 설정되어 있으면 키-값 쌍으로 이루어져 있는 쿠키를 클라이언트에 저장하게 되는데 주로 브라우저의 쿠키 저장소에 저장합니다. 저장소는 일반적으로 클라이언트 컴퓨터의 파일 시스템이나 메모리에 위치하며 브라우저에 따라 조금씩 다릅니다. 쿠키는 지정된 유효기간만큼 저장하게 되며, 사용자가 브라우저 설정에서 쿠키를 강제 삭제할 수도 있습니다.

 

웹 브라우저상의 쿠키를 확인하는 법

1. 키보드 [F12]를 눌러 개발자 도구를 엽니다.
2. 개발자 도구 상단의 Application탭을 선택합니다.
3. 좌측 사이드바에서 Cookies를 클릭하여 현재 페이지의 쿠키를 확인하실 수 있습니다.

 

 쿠키(Cookie) 사용 예시 

쿠키의 구성 요소

• 이름(Name) : 쿠키의 이름
• 값(Value) : 쿠키에 저장된 값
• 유효기간(Expires) : 쿠키가 유지되는 기간, 지정된 기간 이후에는 자동으로 삭제됩니다.
• 도메인(Domain) : 쿠키가 전송될 수 있는 도메인
• 경로(Path) : 쿠키가 적용되는 경로
• 보안(Secure) : 안전한 연결(Https)에서만 쿠키를 전송하는 옵션

 

서버 측에서 쿠키를 만듦

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/set-cookies")
public class SetCookiesServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // "username" 쿠키 생성
        Cookie usernameCookie = new Cookie("username", "Tony");
        usernameCookie.setMaxAge(60 * 60 * 24); // 1 day

        // "age" 쿠키 생성
        Cookie ageCookie = new Cookie("age", "30");
        ageCookie.setMaxAge(60 * 60 * 24); // 1 day

        // 쿠키를 응답에 추가
        response.addCookie(usernameCookie);
        response.addCookie(ageCookie);

        response.getWriter().println("쿠키가 생성되었습니다.");
    }
}

서버 측에서 쿠키를 만들어서 응답 헤더에 넣습니다. 위의 코드대로 하면 username과 age 두 개의 쿠키를 생성되겠네요. 이렇게 만든 쿠키값을 http 메시지 헤더에 보내주시면 됩니다.

 

HTTP 응답 헤더에 Set-Cookie 설정

HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: username=Tony; Max-Age=86400; Path=/; HttpOnly
Set-Cookie: age=30; Max-Age=86400; Path=/; HttpOnly

서버에서 만든 쿠키를 HTTP 응답 헤더에 위와 같이 보내시면 됩니다. 위의 예시에서는 Max-Age=86400으로 설정하여 쿠키의 저장시간을 하루로 설정했고, Path=/로 설정하여 도메인 전체에서 사용이 가능하게끔 설정했습니다.