[포스코x코딩온] Cookie, Session

🍪 특정 사이트에 들어가는 순간 보이는 팝업 창은 모두 닫아버리는 나였다.

눈에 거슬리던 것들이 cookie 라니,, 

한 두 개의 팝업이면 모를까 , 여러 개면 더욱더 거추장스럽다.

나처럼 보기 싫은 사람들을 위한 첫 화면에서 많은 쿠키가 있다면 모든 쿠키를 한 번에 제거할 수 있는 방법을 개발하면 좋을 것 같다. 

Cookie

웹 브라우저 ( 클라이언트)에 저장되는 키와 값(이름, 값, 만료일, 경로 정보)이 들어있는 작은 데이터 파일이다.

개발자 도구 Appliction > Cookie > 확인 가능 

ex.  자동 로그인, 안내문의 "☐ 오늘 그만 보기"

 

동작 방식

1. 클라이언트가 페이지를 요청한다.
2. 서버에서 쿠키를 생성한다.
3. http 헤더에 쿠키를 포함하여 보내고, 만료기간이 끝나지 않았다면 쿠키를 보관하고 있다.
4. 같은 요청을 반복할 경우, http 헤더에 쿠키를 함께 보낸다.
5. 서버에서 쿠키를 읽어 이전 정보와 다를 경우 쿠키를 업데이트하여 응답한다. 

 

Cookie 사용

 # cookie-parser 설치
 npm install cookie-parser

• cookie-parser 설치

 

//cookie-parser 모듈 불러오기
const cookieParser = require('cookie-parser');
app.use(cookieParser());

• 설치한 cookie-parser 모듈 불러오기

 

// 쿠키 설정
res.cookie(key, value, options)

// 쿠키 삭제
res.clearCookie(key, value, options)

 

• 쿠키 설정 & 삭제

 

Cookie 생성 옵션

• httpOnly : true : 웹 서버를 통해서만 쿠키 접근 가능
• maxAge : 쿠키 수명 (ms단위)
• expires : 만료 날짜
• secure : https에서만 쿠키 접근
• signed : 쿠키 암호화

const cookieConfig = {
  httpOnly: true, //  웹 서버를 통해서만 쿠키 접근 가능
  maxAge: 60 * 1000, //쿠키 수명 (ms 단위)
  // expires :  만료 날짜 설정
  // secure : https 에서만 쿠키 접근
  // signed : 쿠키 암호화
};

 

Seesion

쿠키와 다르게 상태 정보를 웹 서버에 저장한다. 

ex. 로그인 유지, 티켓팅 2-30분 유지하고 있으면, 강제적으로 서버 다운 하는 것

 

동작방식

1. 클라이언트가 서버 접속 시 세션 id 발급받는다.
2. 클라이언트는 세션 id에 대해 쿠키를 사용해서 저장하고 가지고 있는다.
3. 클라이언트는 서버에 요청할 때, 이 쿠키의 세션 id를 서버에 전달해서 사용한다.
4. 서버는 세션 id를 전달받아서 별다른 작업 없이 세션 id로 세션에 있는 클라이언트 정보를 가져온다.
5. 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답한다.

 

Session 사용

# session 설치
npm install express-session

 

const session = require('exprss-session');
app.use(session('옵션객체'));


// 세션 설정
req.session.키 = 값

// 세션 읽기(사용)
req.sessoion.키

// 세션 삭제
req.session.destroy(callback_함수)

 

Session 모듈 옵션

• secret : 세션 발급 시 사용되는 키 (임의로 변조하는 것을 방지)
• resave : 세션에 수정사항이 생기지 않더라도 매번 반복되는 요청에 다시 저장할 유무
• saveUninitalized : 세션에 저장할 내역에 없더라도 처음부터 세션을 생성할 것인지
• secure : https 프로토콜에서만 세션을 주고받을 것인지

app.use(
  session({
    secret: process.env.SECRET_KEY, // 필수 옵션(세션 암호화할 때 쓰이는 키, 넣는 값은 암호화할 문자열은 자유)
    resave: false,
    saveUninitialized: false, //일반적으로 false 지정
  })
);

 

.env

= 환경 변수 파일

개발 도중에 개발자만 알아야 하는 값들을 보호하고 싶을 때 .env 파일에 정의하여 보호할 수 있다.

.env 파일은 프로젝트 최상위 루트에 위치해야 한다.

# 설치
npm i dotenv

• npm 을 사용해 설치한다. 

const dotenv = require('dotenv');
//dotenv : 환경변수를 파일에 저장해놓고 접근할 수 있게 돕는 모듈

dotenv.config()

 

.env

SECRET_KEY='secret number'

session.ejs

app.use(
  session({
    secret: process.env.SECRET_KEY, // 필수 옵션(세션 암호화할 때 쓰이는 키, 넣는 값은 암호화할 문자열은 자유)
    resave: false,
    saveUninitialized: false, //일반적으로 false 지정
  })
);

 

Cookie vs Session

세션 = 서버 쿠키 => 전체적인 역할과 동작 원리 비슷

쿠키 - 로컬 & 세션 - 서버

보안: 세션(세션 id만 저장하고 서버가 털리지 않는 한 안전함) > 쿠키(=로컬에 저장)

속도 : 쿠키> 세션

https://hocheon.tistory.com/97