[http 모듈로 서버] (3) 서버에서 쿠키 만들어 요청자의 브라우저에 넣기 + 세션쿠키

250x250

관리 메뉴

😎 공부하는 징징알파카는 처음이지?

[http 모듈로 서버] (3) 서버에서 쿠키 만들어 요청자의 브라우저에 넣기 + 세션쿠키 본문

👩‍💻 백엔드(Back-End)/Node js

[http 모듈로 서버] (3) 서버에서 쿠키 만들어 요청자의 브라우저에 넣기 + 세션쿠키

징징알파카 2023. 4. 19. 00:22

728x90

<본 블로그는 Node.js 교과서를 참고해서 공부하며 작성하였습니다 :-)>

🎀 쿠키

: 유효 기간이 있으며 name=zerocho 와 같이 단순한 "키-값" 의 쌍

: 서버는 미리 클라이언트에 요청자를 추정할 만한 정보를 쿠키로 만들어 보내고, 그 다음에는 클라이언트로부터 쿠키를 받아 요청자를 파악

: 요청의 헤더(Cookie)에 담겨 전송

: 브라우저는 응답의 헤더(Set-Cookie)에 따라 쿠키 저장

// 문자열 형식으로 존재, 쿠키 간에 ; 로 구분
name=zerocho;year=1995

🎀 쿠키로 사용자 식별하기

🌿 cookie2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>쿠키&세션 이해하기</title>
</head>
<body>
    <form action = "/login">
        <input id = "name" name = "name" placeholder = "이름을 입력하세요" />
        <button id = "login">로그인</button>
    </form>
</body>
</html>

🌿 cookie2.js

const http = require("http");
const fs = require("fs").promises;
const url = require("url");
const qs = require("querystring");

const parseCookies = (cookie = "") =>
    cookie
        .split(";")
        .map(v => v.split("="))
        .reduceRight((acc, [k, v]) => {
            acc[k.trim()] = decodeURIComponent(v);
            return acc;
        }, {});

http.createServer(async (req, res)=> {
    const cookies = parseCookies(req.headers.cookie);

    // 주소가 /login으로 시작하는 경우
    if (req.url.startsWith("/login")) {
        const {query} = url.parse(req.url);
        const {name} = qs.parse(query);
        const expires = new Date();

        // 쿠키 유효 시간을 현재 시간 + 5분 설정
        expires.setMinutes(expires.getMinutes() + 5);
        res.writeHead(302, {
            Location : "/",
            "Set-Cookie" : `name=${encodeURIComponent(name)};Expires=${expires.toGMTString()};HttpOnly;Path=/`,
        });
        res.end();

        
    } else if (cookies.name) {// name 이라는 쿠키 있는 경우
        res.writeHead(200, { "Content-Type" : "text/plain; charset=utf-8"});
        res.end(`${cookies.name}님 안녕하세요`);
    } else {
        try {
            const data = await fs.readFile("./cookie2.html");
            res.writeHead(200, {"Content-Type":"text/html; charset=utf-8"});
            res.end(data);
        } catch (err) {
            res.writeHead(500, { "Content-Type" : "text/plain; charset=utf-8"});
            res.end(err.message);
        }
    }
})
    .listen(8084, () => {
        console.log("8084번 포트에서 서버 대기중 입니다.");
    })

새로고침 해도 로그인이 유지됨

쿠키 노출!!!!!!!!

🎀 쿠키로 사용자 식별하기 + 서버가 사용자 정보 관리하도록 변경하기

🌿 세션 쿠키

: 세션을 위해 사용하는 쿠키

: 서버에 사용자 정보를 저장하고 클라이언트완느 세션 아이디로만 소통하기

🌿 session.js

const http = require("http");
const fs = require("fs").promises;
const url = require("url");
const qs = require("querystring");

const parseCookies = (cookie = "") =>
  cookie
    .split(";")
    .map(v => v.split("="))
    .reduceRight((acc, [k, v]) => {
      acc[k.trim()] = decodeURIComponent(v);
      return acc;
    }, {});

const session = {};

http.createServer(async (req, res) => {
  const cookies = parseCookies(req.headers.cookie);

  // 주소가 /login으로 시작하는 경우
  if (req.url.startsWith("/login")) {
    const { query } = url.parse(req.url);
    const { name } = qs.parse(query);
    const expires = new Date();

    // 쿠키 유효 시간을 현재 시간 + 5분 설정
    expires.setMinutes(expires.getMinutes() + 5);
    const uniqueInt = Date.now();
    // 쿠키에 이름 대신 숫자 값
    session[uniqueInt] = {
      name,
      expires,
    };
    res.writeHead(302, {
      Location: "/",
      "Set-Cookie": `session=${uniqueInt};Expires=${expires.toGMTString()};HttpOnly;Path=/`,
    });
    res.end();

  } else if (cookies.session && session[cookies.session].expires > new Date()) {// session 쿠키가 존재하고, 만료 기간이 지나지 않았다면
    res.writeHead(200, { "Content-Type": "text/plain; charset=utf-8" });
    res.end(`${session[cookies.session].name}님 안녕하세요`);
  } else {
    try {
      const data = await fs.readFile("./cookie2.html");
      res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
      res.end(data);
    } catch (err) {
      res.writeHead(500, { "Content-Type": "text/plain; charset=utf-8" });
      res.end(err.message);
    }
  }
})
  .listen(8084, () => {
    console.log("8084번 포트에서 서버 대기중 입니다.");
  })

728x90

저작자표시

'👩‍💻 백엔드(Back-End) > Node js' 카테고리의 다른 글

[Express 웹 서버 만들기] (2) 미들웨어 종류 & multer 사용하기 (0)	2023.04.27
[Express 웹 서버 만들기] (1) express 모듈로 서버 구축하기 (0)	2023.04.23
[http 모듈로 서버] (2) REST로 RESTful 한 웹 서버 만들기 (0)	2023.04.16
[http 모듈로 서버] (1) http 모듈로 웹 브라우저 요청하기 (0)	2023.04.16
[E-Commerce App with REST API] (24) 최종 코드안 (0)	2023.04.11