본문 바로가기
Programming

Node.js cookie 사용법 (로그인에 쿠키를 사용하면 안되는 이유)

by 개발자 염상진 2022. 8. 27.

 

 로그인을 구현할 때 cookie를 사용하는 경우가 있습니다. 또한 쇼핑몰 사이트에서 장바구니에 담아놓았던 상품을 다시 접속해도 확인할 수 있습니다. 바로 cookie를 사용하기 때문에 가능한 기능입니다.

 

 

 

cookie 작동방식

 

최초 server에서 cookie를 생성한 후 응답 메세지에 cookie를 태워서 보냅니다.

이 후 클라이언트는 모든 요청에 대해 cookie를 태워서 요청을 보내게 됩니다.

결과적으로 서버는 요청을 보내는 클라이언트를 특정할 수 있게 됩니다.

 

HTTP Stateless

 

HTTP의 가장 큰 특징 중 하나는 stateless 입니다. 즉, 상태값을 가질 수 없다는 특징을 가지고 있습니다.

하지만 우리가 로그인을 하거나 장바구니에 물건을 담을 수 있는 건 cookie를 사용하기 때문입니다.

 

 

 

cookie 옵션들

 

cookie는 정보를 담고 있는 클라이언트 측의 저장소입니다. 서버에서 사용자를 특정하기 위해서 사용하고, 공격자들이 cookie를 탈취해 사용자의 개인정보를 가져가는 일도 빈번하게 일어납니다. 

cookie는 기본 셋팅으로는 장시간 보관이 가능하고, Javascript에서도 접근이 가능하므로, 크리티컬한 사용자 정보를 담는 서비스를 제작할 때는 옵션을 추가해줘야 합니다.


① Domain 

cookie 옵션에 Domain을 추가하면 동일한 도메인에서 들어온 요청에 대해서만 cookie를 사용할 수 있게 됩니다. 

 

② Path

path 옵션은 도메인 뒤에 오는 라우팅 경로를 의미합니다. 

 

③ MaxAge || Expire

cookie의 유통기간을 지정하는 옵션입니다. MaxAge는 초 단위로 유통기한을 지정하고, Expires는 일 단위로 지정하게 됩니다.

 

 

④ Secure

server와 client간 HTTPS 프로토콜을 사용하는 경우에만 cookie 사용이 가능하도록 하는 옵션입니다. request와 response가 암호화되어 전송되는 경우입니다. 

⑤ HttpOnly

앞에서 설명했듯 cookie는 HTTP 프로토콜 뿐만 아니라 Javascript에서도 접근할 수 있으므로, secure 옵션을 지정해 접근할 수 있는 경로를 지정할 수 있습니다. secrue 옵션이 true로 지정되면 HTTP에서만 접근이 가능하고 Javascript에서는 접근이 불가능해집니다.

 

⑥ SameSite

CORS 설정이 필요한 경우에 적용하는 옵션입니다. SameSite 옵션에는 3가지 서브 옵션이 존재합니다.

  1. Lax : CORS에서 GET 요청에 한해 cookie 사용이 가능합니다.
  2. Strict : CORS가 아닌 클라이언트와 서버의 도메인이 같은 경우만 cookie를 사용합니다.
  3. None : cookie 사용에 제약이 없는 옵션입니다.

 

⑦ sigend

cookie는 중간에 탈취당할 위험이 높은 정보입니다. 따라서 안전하게 쿠키를 저장하고 서버에서 사용하기 위해서는 암호호 된 쿠키인 signed cookie를 사용해야 합니다. 이 때 사용하는 옵션입니다. sigend=true로 지정하면 암호화된 쿠키가 생성됩니다. 

 

 

 

 

[Security] HTTP Cookie란?

Cookie란? 우리가 알고 있기로는 분명 HTTP 프로토콜은 stateless(상태를 가지고 있지 않음) 성질을 가지고 있다. 즉 서버 클라이언트 간 관계에서 서버입장에서는 클라이언트에 대한 정보를 가지고

about-tech.tistory.com

 

set cookie 방법

 

express 서버에서 cookie를 지정해줄 수 있습니다. 최초 클라이언트의 요청이 들어왔을 때 cookie를 설정하고, 응답 객체(res)에 cookie를 태워 보내주면 이 후 요청부터는 해당 쿠키를 통해 클라이언트를 특정할 수 있습니다.

res.cookie('cookieName', 'value');

 

cookie에 옵션을 태워야 하는 경우는 3번째 인자에 옵션값을 태워줍니다.

const cookieOption = {
    expires : new Date(Date.now() + 900000),
    secure : false,
    httpOnly : false,
}

res.cookie('cookieName', 'value', cookieOption);

 

get Cookie 사용법

 

server에서 cookie를 생성해 응답객체에 태워 보내면 이후 요청 부터는 클라이언트에서 cookie 속성을 함께 보내게 됩니다. express에서 사용자가 보낸 요청 객체에서 쿠키를 가져오는 방법은 다음과 같습니다.

 

 

req.cookies;

 

만약 자바스크립트에서 cookie를 가져오려면 document 객체에 들어있는 cookie를 사용합니다.

chrome console 창을 띄우고, document.cookie를 입력하면 현재 브라우저가 저장하고 있는 쿠키값을 확인할 수 있습니다.

 

signed cookie 사용법

 

앞에서 설명한 대로 cookie는 JS에서도 접근이 가능하고 탈취가 쉽기 때문에 사용자 정보를 저장하고 이를 토대로 로그인을 구현하는 경우 암호화된 형태롤 쿠키를 저장해야 됩니다. 이 때 사용하는 방법이 signed cookie를 사용하는 것입니다.

 

① 먼저 signed cookie 에 사용할 secret을 지정합니다.

 이 때 cookieParser 이라는 미들웨어를 사용합니다.

$ npm install cookie-parser

 

② cookie Option에서 signed 를 true로 지정해주면 cookieParser 에 넣은 secret 값으로 암호화된 cookie가 설정됩니다. 

 

 

const cookieParser = require('cookie-parser');

app.use(cookieParser('secretCode'));

app.get('/signed-cookie', (req, res)=>{  
    res.cookie('testCookie', 'abcdefg', { expires: new Date(Date.now() + 900000), httpOnly: false, signed:true});
    res.status(200).json({message : "쿠키가 구워졌습니다."});
})

 

 

③ Signed Cookie를 가져옵니다.

console.log('signedCookie', req.signedCookies);

 

 

 

 

컴퓨터 구조 (폰 노이만 아키텍처, 프로세서, 주기억 장치, 버스)

현재 우리가 사용하고 있는 컴퓨터는 IBM사에서 1981년 처음 판매한 IBM PC와 거의 유사한 형태를 가지고 있습니다. 30년이 지난 시점에도 기본적인 컴퓨터의 구조는 계속 이어져 오고 있습니다. 마

about-tech.tistory.com

 

 

[Security] OAuth 2.0란? ( 개념 + 인증방식 )

OAuth 2.0 웹에서 소셜 로그인 방식은 대부분 OAuth 2.0 방식을 채택하고 있다. 전통적인 인증방식은 서버에서 인증 과정을 처리하게 된다. 자연스럽게 서버의 오버헤드는 증가하게 되고 성능은 떨어

about-tech.tistory.com

 

 

[Security] CSRF란?

웹 애플리케이션에는 수많은 데이터가 움직입니다. 클라이언트와 서버가 주고 받는 데이터에는 분명 사용자에게 민감한 정보도 포함되어 있습니다. 예를 들어 주민번호, 전화번호, 계좌정보,

about-tech.tistory.com

 

댓글