Node.js - express (5) 쿠키(cookie)

 

 

이번 포스팅에서는 쿠키(cookie)의 개념에 대해 알아보고자 한다.

 

 

< 목차 >

1. 쿠키란?
2. 쿠키 구현 방식
3. 쿠키 속성

 

 

 

< 쿠키(cookie)란?? >

쿠키(cookie)란 HTTP의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 일컫는다. HTTP 쿠키, 웹 쿠키, 브라우저 쿠키라고도 하는데 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀐다.

 

A, B, C 라는 세 사람이 한 대의 컴퓨터를 사용해서 웹서버에 요청을 보내고 있는 상황을 가정해보자. 이 때 웹서버는 각각의 요청이 어떤 사람으로부터 온 요청인지 알 수 없다. 단순히 ip와 같은 컴퓨터에 대한 특정 정보만을 알 뿐, 어떠한 사용자가 보내온 요청인지는 알지 못한다는 것이다. ip주소를 통해 컴퓨터별로는 알 수 있었지만 해당 컴퓨터를 사용하고 있는 사람이 누구인지는 특정지을 수 없었다. 그래서 쿠키라는 것이 등장하게 되었고 브라우저의 기능으로 구현되게 되었다.

 

A라는 사람이 요청을 보냈을 때 웹서버는 해당 브라우저가 특정 정보를 저장하고 있게끔 웹브라우저에게 쿠키를 전송하게 된다. 이제 브라우저에 쿠키가 저장된 상태에서 A라는 사용자가 웹서버에게 다시 요청을 보내게 되면 웹서버는 쿠키를 이용해서 사용자가 누구인지 특정지을 수 있게되는 것이다. 그리고 이러한 쿠키값을 이용하면 사용자별로 쿠키값에 따라 브라우저가 다른 화면을 랜더해서 보여줄 수 있게끔 처리하는 것이 가능해진다. 

 

 

 

< 쿠키 구현 방식 >

Node.js에서 express 모듈을 사용하여 서버를 구동했을 때 어떤식으로 쿠키가 생성되고 처리되는지 그 과정을 간략하게 알아보도록 하자.

 

쿠키는 기본적으로 HTTP 패킷의 헤더부분에 그 내용이 저장된다. 웹서버에서 브라우저에게 응답할 때 HTTP 패킷의 응답헤더를 통해 서버에서 사용자의 브라우저에 쿠키를 전송한다. 이 때 Set-Cookie를 이용해 브라우저에 쿠키를 저장할 수 있는데 "key: value" 형태의 string값으로 저장되며 저장의 주체는 브라우저가 된다. 다시말해, 응답헤더를 통해 브라우저에 저장할 값을 전달하는데 이 때 Set-Cookie를 이용하면 브라우저에 쿠키값을 저장할 수 있다. 코드를 살펴보면서 좀 더 이해해보도록 하자. 

 

Node.js의 express 모듈을 사용하여 간단한 웹서버를 만들어 보았다. 

app.get('/', (req, res)=>{
    res.setHeader("Set-Cookie", "token=1")
    // set-cookie를 이용해 브라우저에 쿠키값 저장
    // Response Header의 Set-Cookie에 "token=1" 이라는 내용의 텍스트가 저장된다.
    res.render('index.html')
})

크롬 개발자도구를 통해 살펴보면, 웹브라우저에서 서버로 요청이 들어왔을 때 express에서 브라우저에게 res.setHeader("Set-Cookie", "token=1")을 이용해 응답헤더(Response Headers) 부분에 Set-Cookie: "token=1"이라는 값을 전달한 것을 확인할 수 있다. 

 

Application 탭의 Cookies 부분을 확인해보면 브라우저에 쿠키값이 저장되어 있는 것을 다시한번 확인할 수 있다.

 

+) 브라우저에 저장된 쿠키값을 조작하기 위해서는 브라우저의 JavaScript에서 document.cookie 를 사용하면 된다. (document 안의 cookie 객체 안에 쿠키값이 저장된다.)

 

이렇게 브라우저에 쿠키값이 저장되고 난 이후의 요청들은 브라우저에서 웹서버에게 요청을 보낼 때 요청헤더(Request Headers)에 쿠키값이 저장된 상태로 웹서버에게 요청을 보내게 된다. 크롬 개발자도구를 살펴보면 Request Headers 부분에 Cookie: "token=1"이라는 값이 저장된 상태로 웹서버에게 요청을 보내고 있는 것을 확인할 수 있다.

 

여기서 짚고 넘어가야할 것은 "쿠키의 저장 주체는 서버가 아니라 브라우저"라는 것이다. 저장 주체가 브라우저다 보니 서버쪽에서는 브라우저에 어떤값이 저장되어 있는지 모르는 상태일 수밖에 없다. 그렇기 때문에 서버쪽에서는 브라우저에서 cookie와 함께 요청이 들어왔을 때 브라우저에서 보낸 cookie의 내용을 받을 수 있는 처리를 해줘야만 한다.

 

 

쿠키쿠키를 클릭했을 때 "/cookie" 경로로 이동하게 되는데 이때 쿠키값의 존재 유무에 따라 다른 페이지를 보여주는 처리를 해보도록 하자.

 

app.get('/cookie', (req, res)=>{
    let cookie = req.headers.cookie;  // 브라우저에서 보내 온 cookie값을 받기 위한 처리
    if (cookie === undefined) {
        res.send("There is no cookie")
    } else {
        res.send(`Cookie: ${cookie}`)    
    }
})

express에서 req.headers.cookie를 이용하면 요청헤더의 Cookie 부분에 있는 값을 가져오는 처리를 해줄 수 있다. 만약 쿠키값이 undefined라면 "There is no cookie"라는 메세지를 보여줄 것이고 쿠키값이 존재한다면 요청헤더에 있는 해당 쿠키값을 보여주도록 하였다.

 

쿠키 삭제 후 요청 결과

 

쿠키값을 가지고 요청한 결과

 

 

 

< 쿠키 속성 >

마지막으로 쿠키의 속성들에 대해 간략하게 살펴보면서 글을 마무리 하도록 하겠다.

 

▶ Path  :  "/" 이후의 uri 부분으로 쿠키의 사용 범위를 지정해준다. 예를 들어 로그인 기능을 만들었는데 특정 페이지에서만 사용 가능하게끔 하고 싶다면 Path를 설정해 주면 된다.

 

▶ Expires / Max-Age  :  쿠키의 유효시간. 로그인 지속시간 같은 것을 정할 때 사용한다.

Expires=<date>, HTTP 타임스템프로 기록된 쿠키의 최대 생존 시간.

Max-Age=<number>, 쿠키가 만료될 때 까지의 시간 (초 단위) 

 

▶ HttpOnly  :  javascript를 통해 쿠키에 접근할 수 없도록 하는 기능. 기본적으로 브라우저의 javascript 해석기는 쿠키에 접근할 수 있다. 하지만 HttpOnly 기능을 설정해 놓으면 브라우저의 javascript 해석기가 쿠키를 조작하지 못하게 할 수 있다. 민감한 정보들을 처리할 때 사용된다.