서버에서 클라이언트 Cookie 셋팅하기

HTTP 프로토콜은 기본적으로 Stateless 하다.

하지만 경우에 따라 클라이언트의 상태를 기억해야 할 수 있고 이때 Cookie가 활용된다.

 

Cookie는 기본적으로 클라이언트에 저장되는 정보이기 때문에

javascript로 아래와 같이 간단하게 생성할 수 있다.

document.cookie = "test01=test01";
document.cookie = "test02=test02";

console.log(document.cookie);
//test01=test01; test02=test02

 

이렇게 생성한 Cookie는 크롬브라우저 개발자 도구에서 아래와 같이 확인할 수 있고

 

Request에 자동으로 포함되어 서버단에서는 아래와 같이 확인할 수 있다.

@GetMapping("/hello")
public String hello(HttpServletRequest request, HttpServletResponse response){

  // request.getCookies() == Cookie 객체 배열 리턴
  for (Cookie cookie : request.getCookies()) {
    System.out.println(cookie.getName());
    System.out.println(cookie.getValue());
  }
  
  // request.getHeader("Cookie") == Cookie 문자열 리턴(test01=test01; test02=test02;)
  System.out.println(request.getHeader("Cookie"));
  
  return "Hello Example!!!";
}

 

그런데 이런 Cookie를 클라이언트가 아니라 서버단에서 특정 로직에 의해 생성하고 싶은 경우가 있다.

서버에서 Cookie를 생성하는 방법은 아래와 같이 두 가지가 있다.

@GetMapping("/hello")
public String hello(HttpServletRequest request, HttpServletResponse response){

  response.setHeader("Set-Cookie", "test02=test02");
  
  Cookie c = new Cookie("test01", "test01");
  response.addCookie(c);

  return "Hello Example!!!";
}

 

참고로 Set-Cookie를 response.addCookie 보다 아래에서 수행할 경우

response.addCookie 로 추가한 쿠키는 제거된다.

Set-Cookie 로 쿠키 자체를 새로 생성하기 때문..

 

이처럼 서버쪽에서 셋팅하는 쿠키는 기본적으로 javascript 에서

document.cookie 로 접근이 가능하기 때문에 XSS 공격에 취약하다는 단점이 존재한다.

이에 인증과 같은 관련된 민감한 정보의 경우 javascript에서 접근이나 변조가 불가능하도록 설정할 수 있다.

쿠키 생성시 아래와 같이 HttpOnly 옵션을 주면 된다.

@GetMapping("/hello")
public String hello(HttpServletRequest request, HttpServletResponse response){

  Cookie c = new Cookie("test01", "test01");
  response.addCookie(c);

  response.setHeader("Set-Cookie", "test02=test02; HttpOnly");

  return "Hello Example!!!";
}

 

이렇게 되면 브라우저 개발자 도구로 확인하면 Cookies 에서 확인되지만

javascript 상에서 document.cookie로는 접근이 불가능하게 된다.