쿠키와 세션

쿠키의 필요성

요청(request)에는 한 가지 단점이 있음

• 누가 요청을 보냈는지 모름 (ip 주소와 브라우저 정보 정도만 앎)
• 로그인을 구현해서 누가 보냈는지 확인해야 함
• 쿠키와 세션이 필요

쿠키 : 키 = 값의 쌍

• name = mumu
• 로그인 뿐만 아니라 데이터를 보낼 때 내가 누군지 함께 넣어서 보내주기도 함
• 매 요청마다 서버에 동봉해서 보냄
• 서버는 쿠키를 읽어 누구인지 파악

쿠키 서버 만들기

쿠키 넣는 것을 직접 구현

• writeHead : 요청 헤더에 입력하는 메서드
• Set-Cookie : 브라우저에게 쿠키를 설정하라고 명령

const http = require('http');

http.createServer((req, res) => {
  console.log(req.url, req.headers.cookie);
  res.writeHead(200, { 'Set-Cookie': 'mycookie=test' });
  res.end('Hello Cookie');
})
  .listen(8083, () => {
    console.log('8083번 포트에서 서버 대기 중입니다!');
  });

writeHead에 Set-cookie를 설정해주니 아래의 사진과 같이 쿠키에 myCookie가 저장이 된 것을 확인할 수 있다.

• 요청이 전송되고 응답이 왔을 때 쿠키가 설정됨
• favicon.ico는 브라우저가 자동으로 보내는 요청
• 두 번째 요청인 favicon.ico에 쿠키가 넣어짐

헤더와 본문

http 요청과 응답은 헤더와 본문을 가짐

• 헤더는 요청 또는 응답에 대한 정보를 가짐
• 본문(body)는 실제로 주고 받는 데이터
• 쿠키는 부가적인 정보이므로 헤더에 저장이 됨

쿠키 등록할 때 주의사항

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

• 쿠키 유효기간을 설정해 주어야 함
• 쿠키에 한글이 들어가게 되면 오류가 발생할 수 있어서, 위 처럼 name을 encodeURIComponent로 감싸주어야 한다
• HTTPOnly를 통해 JS코드로 쿠키에 접근하지 못하게 막아야 함 ( 악성 JS코드 방지 )
• Path : path에 지정해놓은 경로 안에서는 쿠키는 유효하다라는 뜻

쿠키의 다양한 옵션

• 쿠키명=쿠키값: 기본적인 쿠키의 값입니다. mycookie=test 또는 name=zerocho 같이 설정합니다.
• Expires=날짜: 만료 기한입니다. 이 기한이 지나면 쿠키가 제거됩니다. 기본값은 클라이언트가 종료될 때까지입니다.
• Max-age=초: Expires와 비슷하지만 날짜 대신 초를 입력할 수 있습니다. 해당 초가 지나면 쿠기가 제거됩니다. Expires보다 우선합니다.
• Domain=도메인명: 쿠키가 전송될 도메인을 특정할 수 있습니다. 기본값은 현재 도메인입니다.
• Path=URL: 쿠키가 전송될 URL을 특정할 수 있습니다. 기본값은 ‘/’이고 이 경우 모든 URL에서 쿠키를 전송할 수 있습니다.
• Secure: HTTPS일 경우에만 쿠키가 전송됩니다.
• HttpOnly: 설정 시 자바스크립트에서 쿠키에 접근할 수 없습니다. 쿠키 조작을 방지하기 위해 설정하는 것이 좋습니다.

세션 사용하기

쿠키의 정보는 노출되고 수정되는 위험이 있음

• 중요한 정보는 서버에서 관리하고, 클라이언트에는 세션 키만 제공
• 서버에 세션 객체(session) 생성 후, uniqueInt(키)를 만들어 속성명으로 사용
• 속성 값에 정보 저장하고 uniqueInt를 클라이언트에 보냄

    const expires = new Date();
    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=/`,
    });

위 코드처럼 session에 uniqueInt 라는 고유키를 설정해서 직접적인 데이터가 아닌 데이터를 받아올 수 있는 key를 저장하게 함, uniqueInt를 위에서는 현재 시간으로 지정하였지만 실제에서는 다른 방식으로 고유키를 만드는게 좋음

  // 세션쿠키가 존재하고, 만료 기간이 지나지 않았다면
  } else if (cookies.session && session[cookies.session].expires > new Date()) {
    res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
    res.end(`${session[cookies.session].name}님 안녕하세요`);

이후 위와 같이 session의 키 값을 넣어서 안의 value를 불러오게 함