로그인을 구현할 때 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가지 서브 옵션이 존재합니다.
- Lax : CORS에서 GET 요청에 한해 cookie 사용이 가능합니다.
- Strict : CORS가 아닌 클라이언트와 서버의 도메인이 같은 경우만 cookie를 사용합니다.
- None : cookie 사용에 제약이 없는 옵션입니다.
⑦ sigend
cookie는 중간에 탈취당할 위험이 높은 정보입니다. 따라서 안전하게 쿠키를 저장하고 서버에서 사용하기 위해서는 암호호 된 쿠키인 signed cookie를 사용해야 합니다. 이 때 사용하는 옵션입니다. sigend=true로 지정하면 암호화된 쿠키가 생성됩니다.
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);
'Programming' 카테고리의 다른 글
Buffer Stream 이란? Node.js 버퍼 스트림 파이프 사용법 (0) | 2022.09.02 |
---|---|
Node.js crypto 비대칭키 대칭키 구현하기 (0) | 2022.09.02 |
Mocha Chai framework for testing install (0) | 2022.08.20 |
[IPFS] Infura IPFS deprecated, NFT storage 사용법 (0) | 2022.08.17 |
[에러 해결] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. (1) | 2022.08.16 |
댓글