Home cookie-parser 모듈
Post
X

cookie-parser 모듈

게시 2023/02/04 업데이트 2025/01/15
By Psmin
8 m읽는 시간

쿠키에 대해 알아보자.

쿠키란 사용자가 어떤 웹 사이트를 방문할 때 서버를 통해 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 말합니다.

HTTP는 Client의 요청 내용을 기억하지 않습니다. (HTTP의 stateless 특성)

즉, 쿠키는 Client의 상태를 알려주는 데이터입니다.

MDN 웹문서
HTTP 쿠키 (웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다.
브라우저는 그 데이터 조각들을 저장해놓고, 동일한 서버에 요청 시 저장된 데이터를 함꼐 전송합니다.

</br>

  • 데이터 형태
    key & value

  • 용도

    • 세션 관리 (Session Management)
      로그인 상태 유지, 30일 다시 보지 않기, ID 저장 등 서비스 지속성 제공
    • 개인화 (Personalization)
      사용자 선호, 테마 등을 설정해 사용자마다 다른 웹 페이지 제공
    • 트랙킹 (Tracking)
      사용자 행동을 기록하고 분석하는 용도

  • 생성 과정

    • 쿠키가 없거나 만료됐을 때
      서버가 응답을 보낼 때 새롭게 설정해 보냅니다.
    • 쿠키가 있을 때
      요청에 쿠키를 함께 보냅니다.

  • Server-Client 쿠키 흐름

    cookie

  • 쿠키 종류

    • Persistent Cookie
      max-age, expires 설정한 쿠키로 브라우저가 닫힐 때가 아닌 만료 기간이 지날 때 삭제되는 쿠키
    • Session Cookie
      max-age, expires를 설정하지 않은 쿠키로 브라우저 종료시 삭제되는 쿠키.

express에서는 cookie-parser 패키지를 통해 간편하게 사용할 수 있습니다.

  • 설치

    1

    npm i cookie-parser

  • 미들웨어 등록

    1
2
3
4
5
6

    import express from "express";
import cookieParser from "cookie-parser";

const app = express();

app.use(cookieParser([secret]));

    cookieParser 구문에서 인자로 secret(문자열)을 넘기면 서명된 쿠키로 req.signedCookies에 저장됩니다.

express(req, res) 객체에 cookie를 사용할 수 있도록 기능을 부여합니다.

쿠키 설정

res.cookie(key, value, options)의 형태로 쿠키를 설정합니다.

마지막 options에 인자로 객체를 전달해 다양한 옵션을 설정할 수 있습니다.

  • options

    • path (default : /)
      쿠키에 접근 가능한 결로를 지정합니다. (ex > path = ‘/admin’ 으로 설정한 쿠키는 ‘/admin/~’에서만 볼 수 있습니다.)

    • domain (default :loaded)
      쿠키에 접근 가능한 도메인을 지정합니다.
      (ex > domain = site.com 으로 설정한 쿠키는 ‘other.com’에서는 볼 수 없습니다.)

    • expires 쿠키의 만료 기간을 표준 시간(GMT 포맷)으로 설정합니다.
      (ex > 1일 설정 : {expires : new Date(Date.now() + 24 * 60 * 60 * 1000)})

    • max-age 쿠키의 만료 기간을 초 단위로 설정합니다.
      (ex > 1일 설정 : {maxAge: 24 * 60 * 60})

    • httpOnly 자바스크립트의 document.cookie를 이용해서 쿠키에 접속하는 것을 막는 옵션입니다.

      쿠키를 훔쳐가는 행위를 막기 위해 사용합니다.

    • secure HTTPS 프로토콜만 쿠키 사용 가능

  • 예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

var express = require("express");

var app = express();
app.use(cookieParser());

app.get("/test", (req, res) => {
  res.cookie(
    "user",
    {
      id: "1",
      name: "Kim",
    },
    {
      path: "/",
    }
  );

  res.end("cookie!!");
});

app.listen(3000, () => {
  console.log("express server on port 3000");
});

쿠키 조회

클라이언트가 보낸 쿠키를 서버에서 사용하기 위해 cookie-parser 모듈로 쿠키를 추출합니다.

전송 받은 쿠키는 req.header.cookie로 읽을 수도 있지만 쿠키 모듈을 사용하면 보다 쉽게 쿠키를 관리할 수 있습니다.

  • 예제

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

    import express from "express";
import cookieParser from "cookie-parser";

var app = express();
app.use(cookieParser());

app.get("/cookie", (req, res) => {
  res.cookie(
    "user",
    {
      id: "1",
      name: "Kim",
    },
    {
      path: "/cookie",
    }
  );

  res.redirect("/cookie/show");
});

app.get("/cookie/show", (req, res) => {
  const cookies = req.cookies.user;

  res.send(cookies);
});

app.listen(3000, () => {
  console.log("express server on port 3000");
});

    cookie-ex

    • 클라이언트가 보낸 쿠키가 잘 출력되는 것을 볼 수 있습니다.

cookie-parser 모듈은 요청된 쿠키를 쉽게 추출할 수 있도록 도와주는 미들웨어입니다.

Cookie 헤더를 파싱하고, 쿠키 이름에 의해 키가 지정된 객체로 req.cookies를 채워줍니다.

  • 주요 메서드

    • cookieParser(secret, options)
      매개변수를 활용해 새로운 미들웨어 함수를 생성합니다.

    secret에 값이 주어지면, 파싱된 Cookie 정보를 req.signedCookies 객체로 표시합니다.
    secret에 값이 없으면, 그대로 req.cookies에 표시됩니다.

    • cookieParser.JSONCookie(str)
      쿠키 값을 JSON 쿠키로 파싱합니다.
    • cookieParser.signedCookie(str, secret)
      쿠키 값을 서명된 쿠키로 파싱합니다.

쿠키 수정

수정할 쿠키의 key값에 덮어 씌우듯이 작성합니다.
(option 값이 달라지면 새로운 쿠키가 생성되므로 주의합니다.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import express from "express";
import cookieParser from "cookie-parser";

var app = express();

app.use(cookieParser());

... // 쿠키 생성, 조회

app.get("/cookie/update", (req, res) => {
  res.cookie(
    "user",
    {
      id: "2",
      name: "Park",
    },
    {
      path: "/cookie",
    }
  );

  res.redirect("/cookie/show");
});

app.listen(3000, () => {
  console.log("express server on port 3000");
});

cookie-ex

  • 수정된 쿠키 값이 출력되는 것을 볼 수 있습니다.

쿠키 삭제

clearCookie 메서드에 삭제할 쿠키의 key값과 Options 값을 적어 삭제합니다.

(또는, 쿠키 값을 수정해 max-age 값을 0을 주어 바로 삭제되도록 하는 방법도 있습니다.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import express from "express";
import cookieParser from "cookie-parser";

var app = express();

app.use(cookieParser());

... // 쿠키 생성, 조회, 수정

app.get("/cookie/delete", (req, res) => {
  res.clearCookie("user", { path: "/cookie" })
  .redirect("/cookie/show");
});

app.listen(3000, () => {
  console.log("express server on port 3000");
});

참조

Knowledge, NodeJS
cookie-parser
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.

Recent Update
Link