요청과 응답으로만 의사소통했던 웹은 쿠키의 등장으로써 이전의 통신 내용을 기억할 수 있게 되었고, 이 덕분에 개인화나 인증 등이 가능해졌습니다.
이 글에서는 쿠키를 생성하는 법, 읽는 법, 그리고 쿠키가 실제로 어떻게 활용되는지를 공부하도록 하겠습니다.
✅ 실습 파일과 코드 설명
// 주석은 크게 나뉘어진 단계이고,
//// 주석은 해당 코드에 대한 자세한 설명입니다.
var http = require('http');
var cookie = require('cookie');
var count = 0; //// 단지 확인용... 아래의 createServer가 몇회 째 실행되는건지 체크
http.createServer(function(request, response){
count += 1;
console.log("The count is: " + count);
// 쿠키 읽기
console.log(request.headers.cookie);
var cookie_parsed = {};
if(request.headers.cookie !== undefined){
cookie_parsed = cookie.parse(request.headers.cookie);
}
console.log(cookie_parsed);
// 쿠키 생성
response.writeHead(200, {
'Set-Cookie':[ //// 서버가 클라이언트로 쿠키를 보낼 때 사용. -> 추후, 클라이언트는 서버로 되돌려보냄
'cookie1 = choco',
'cookie2 = strawberry',
`cookie3 = matcha; Max-Age=${60*60*24*30}`, //// 이 쿠키는 60*60*24*30초 동안 남아있음
'cookie4 = vanilla; Secure', //// 서버와 브라우저가 https로 통신하는 경우에만 브라우저가 쿠키를 서버로 전송하는 옵션
'cookie5 = banana; HttpOnly', //// 자바스크립트의 document.cookie를 이용한 쿠키 접속을 막는 옵션
'cookie6 = yogurt; Path=/path1', //// /path1/... 요청 시 전송
'cookie7 = walnut; Domain=o2.org' //// 브라우저는 이 도메인을 쓰는 서버에 요청할 때만 쿠키를 전송
]
});
// 응답 종료
response.end('Cookie!!');
}).listen(3000);
✅ 쿠키 읽기
1. localhost:3000에 접속할 경우
아래와 같이 응용 프로그램 탭에서 쿠키를 확인할 수 있습니다.
cookie6은 설정된 path에 속하지 않아 생성되지 않았고, cookie7은 설정된 domain이 아니므로 생성되지 않았습니다.
네트워크 탭에서는 요청과 응답 헤더에서 쿠키를 따로 확인할 수 있습니다.
응답 헤더에는 서버가 생성한 쿠키가 전부 보입니다.
브라우저의 콘솔에서도 쿠키를 확인할 수 있습니다. cookie5는 확인되지 않는데, 이는 cookie5의 경우 HttpOnly를 설정하였기 때문입니다. 이로써 콘솔을 통해 쿠키 정보를 탈취하는 것을 방지할 수 있습니다.
터미널 콘솔에서는 아래와 같이 보입니다.
count라는 값은 제가 단지 확인을 위해 임의로 설정한 것인데요.
처음에 localhost:3000로 접속하였을 때 count 1, 2까지 세어지고,
새로고침하여 재접속하면 count 3, 4까지 세어집니다.
Q. 왜 count가 두 개씩 세어질까?
(뇌피셜) A. 네트워크 탭에 보면 localhost뿐 아니라 favicon.ico에 대해서도 요청과 응답이 이루어져서?
Q. count 1에서는 왜 쿠키가 없을까?
(뇌피셜) A. 원래 위에서부터 쭉 진행되는 코드 특성 상, "터미널 콘솔에 요청 헤더의 쿠키를 찍어보는 것"이 "서버가 쿠키를 생성하는 것" 이전에 이루어지기 때문에?
2. localhost:3000/path1에 접속할 경우
path 설정이 "/path1"로 되어있는 cookie6이 비로소 응용 프로그램 탭의 쿠키 리스트에 보입니다.
네트워크 탭에서도 확인해보니, 요청 헤더에 cookie6이 추가되었습니다.
3. localhost:3000/path1/sub에 접속할 경우
"/path1"의 하위 경로에 접속할 경우 cookie6은 path 설정이 만족되므로 생성됩니다. 응용 프로그램 탭에서 확인해 보았습니다.
✅ 실제 웹사이트에서 쿠키는 어떻게 활용될까?
예시로 HTML: Hypertext Markup Language | MDN (mozilla.org) 페이지에서 해볼 것이며, 현재 브라우저는 edge입니다.
개발자 도구를 통해 쿠키를 확인할 수 있는데 , 이들 중 preferredlocale와 auth-cookie를 알아보겠습니다.
(auth-cookie는 노출되면 위험한 값이므로 가려놨습니다.)
preferredlocale
사이트의 언어를 설정하기 위한 쿠키입니다.
이 값을 만약 일본어를 의미하는 ja로 변경하면 아래와 같이 사이트의 언어가 변경됩니다. 주소도 변경된 것을 볼 수 있습니다.
브라우저를 전부 다 닫고 다시 이 페이지로 들어오면, 아까 변경했던 쿠키의 ja가 그대로 유지되어 언어가 여전히 일본어임을 확인할 수 있습니다.
auth-cookie
웹사이트 로그인을 위한 값입니다.
A라는 사람의 ID &PW를 몰라도, A의 auth-cookie만 알고 있다면, 이를 입력하여 A의 계정으로 로그인이 가능해지는 위험한 값입니다.
제가 로그인하여 auth-cookie 값을 얻었던 것은 edge 브라우저였으니,
만약 chrome 브라우저로 이 페이지에 들어온다면, 여기선 당연히 아직 로그인돼있지 않고, 그러니 auth-cookie 값도 없습니다.
그런데 제가 만약 edge에서의 auth-cookie 값을 이 chrome에도 그대로 적어넣으면 어떻게 될까요?
정석적인 로그인 과정 없이도, 아래처럼 바로 계정 로그인이 되어버립니다.
감사합니다~