쿠키, 세션

쿠키

 

클라이언트의 웹 브라우저에 저장되는 데이터
키와 값이 들어있는 작은 데이터 조각

도메인에따 제한되고 유효기간 있음

 

 

쿠키동작 방식

 

1. 서버에서 쿠키 생성 : 클라이언트에서 서버로 요청(request)하면 서버가 쿠키를 생성
2. 클라이언트에게 쿠키 전송 : 서버는 생성된 쿠키를 응답(reponse) 헤더에 포함시켜 클라이언트에게 전송, 클라이언트의 웹 브라우저에는 쿠키저장소가 따로 있어서 거기에 쿠키를 저장시킴
3. 클라이언트 요청 시 쿠키 전송 : 클라이언트가 동일한 웹 사이트에 다시 접속할 때마다 웹브라우저는 저장된 쿠키를 요청 헤더에 포함하여 서버로 전송
4. 서버에서 쿠키 읽기 : 서버는 클라이언트가 보낸 쿠키를 읽고 클라이언트를 고유하게 식별하거나 이전 상태 정보를 참조
5. 쿠키의 유효기간 : 쿠키는 정된 유효기간 동안 클라이언트의 웹 브라우저에 저장되며 유효기간 만료되면 자동으로 삭제됨
6. 쿠키의 옵션 : 쿠키의 유효기간, 도메인, 경로 등

• maxAge: 수명
• expires: 만료 날짜를 GMT 시간으로 설정
• path: 해당 디렉토리와 하위 디렉토리에서만 경로가 활성화되고, 웹 브라우저는 해당하는 쿠키만 웹서버에 전송한다.
• domain: 쿠키가 전송될 특정 도메인 (기본값: 현재 도메인)
• secure: 웹브라우저와 웹서버가 https 로 통신하는 경우만 웹브라우저가 쿠키를 서버로 전송
• httpOnly: 웹서버를 통해서만 쿠키에 접근(자바스크립트 document.cookie를 이용해서 쿠키에 접속을 막는것)
• signed: 쿠키의 암호화를 결정

 

 

 

 

쿠키 사용하기

 

npm install cookie-parser

//쿠키 모듈 가져오기
const cookieParser = require("cookie-parser");

//쿠키를 사용하겠다~
app.use(cookieParser()); 

//쿠키 옵션객체
const cookieOption = {
  maxAge: 60 * 1000,
  httpOnly: true,
  signed: true,
};

//쿠키 설정
res.cookie('쿠키이름','쿠키값','cookieOption');

 

 

 

 

실습 - 오늘 그만 보기 모달창

 

 

1. 체크박스가 체크되면 쿠키가 저장되고

2. 특정 데이터가 저장되어 있는 동안 모달창을 숨겨야한다.

 

 

 

# ejs 

<div class="modal-footer">
  <div class="form-check">
     <input
       class="form-check-input"
       type="checkbox"
       value=""
       id="checkbox"
       onclick="closeModal()"
      />
      <label class="form-check-label" for="flexCheckDefault">오늘하루 안보이게</label>
  </div>
</div>
<script>
      const myModal = new bootstrap.Modal("#exampleModal");

      
      if ("<%= data%>" === "") { //popup이라는 이름의 쿠키 값이 비어있다면
        myModal.show(); //모달창을 보여주세여
      }

      function closeModal() {
        const checkbox = document.querySelector("#checkbox");
        if (checkbox.checked) { //checkbox.checked : 체크박스에 체크가 되어있다면 (true라면)
          axios({ //axios사용해서 /setCookie 경로로 post 해주시고
            method: "post",
            url: "/setCookie",
          }).then((res) => {
            console.log(res.data);
          });
          myModal.hide(); //모달창을 숨겨주세여
        }
      }
</script>

 

 

 

# cookie.js

const express = require("express");
const cookieParser = require("cookie-parser");
const app = express();
const PORT = 8000;

app.use(cookieParser());

const cookieOption = {
  maxAge: 60 * 1000,
};

//템플릿
app.set("view engine", "ejs");
app.use("/view", express.static(__dirname + "/views"));

app.get("/", (req, res) => {
  res.render("index", { data: req.cookies.popup }); //req객체의 cookies 속성에서 popup이라는 이름의 쿠키
});

//axios의 post
app.post("/setCookie", (req, res) => {
  res.cookie("popup", "hide", cookieOption); //쿠키('이름','값','옵션')
  res.send({ result: true });
});

app.listen(PORT, () => {
  console.log(`http://localhost:${PORT}`);
});

 

 

 

 

 

세션

 

서버에 저장되는 데이터

ex) 사용자가 로그인을 하면 서버는 세션을 생성해서 사용자가 로그인 상태임을 기억, 사용자가 다른페이지로 이동하거나 요청을 하더라도 서버는 세션을 확인하여 사용자가 로그인한 상태인지 아닌지 파악할 수 있다

세션은 서버에서 관리되며 사용자마다 고유한 세션 ID를 사용하여 구별한다, 이 세션 ID은 쿠키 방식으로 브라우저에 전달된다. (=세션 ID를 갖고 있는 쿠키!)

 

 

# session 미들웨어

app.use(
  session({
    secret: process.env.COOKIE_SECRET, 
    resave: false,
    saveUninitialized: true,
    name: "my-session", //세션ID를 식별하기 위한 쿠키의 이름
  })
);

session 옵션 중 name에 세션 ID를 식별하기 위한 쿠키의 이름을 지정하면 된다

 

 

쿠키와 세션의 가장 큰 차이점은

상태 정보의 저장 위치이다.

쿠키는 클라이언트(브라우저)에 저장되고 세션은 서버에 저장된다.

보안적인 측면은 쿠키보다 세션이 더 우수!

쿠키는 클라이언트(브라우저)에 저장되기 때문에 변질되거나 해킹당할 위험이 있지만

세션은 세션id만 저장하고 중요한 유저 정보는 서버에 있기 때문에 보안이 비교적 높다

속도에서는 쿠키가 세션보다 더 우수하다

 

 

 

세션 사용하기

 

npm install express-session

//세션 모듈 가져오기
const session = require("express-session");

require("dotenv").config();

//세션은 미들웨어에서 옵션 설정
app.use(
  session({
    secret: process.env.COOKIE_SECRET, //쿠키 secret값과 동일하게 설정하는 것이 좋음.
    resave: false,
    saveUninitialized: true,
    name: "my-session",
  })
);

//세션 생성 및 사용 예시
app.get("/", (req,res)=>{
	//세션 데이터 설정
	req.session.name = "홍길동";
    res.send({result:true});
});

app.get("/getSession", (req,res)=>{
	//세션 데이터 확인
    console.log(req.session.name);
    res.send({ name : req.session.name});
)

app.get("/clearSession", (req,res)=>{
	//세션 데이터 삭제
    req.session.destroy((err)=>{
    	if(err){
        	console.log(err);
        }
        res.redirect("/getSession");
    })
)

세션은 미들웨어에서 옵션을 설정할 수 있다

• secret: 안전하게 쿠키를 전송하기 위해 쿠키 서명 값 (세션을 발급할때 사용되는 키)
• resave: 세션에 수정사항이 생기지 않더라도 매 요청마다 세션을 다시 저장할 것인지(덮어쓰기 가능)
• saveUninitialized: 세션에 저장할 내역이 없더라도 처음부터 세션을 생성할지 설정
• cookie: 세션 쿠키에 대한 설정
• secure: 값을 true로 하면 https에서만 세션을 주고받음
• name: 세션 식별자를 저장할 쿠키의 이름을 지정

 

위의 코드에서 세션 생성 및 사용 예시를 보면

" / " 경로로 요청이 들어왔을 때 세션 데이터를 설정하고

" /getSession " 경로로 요청이 들어왔을 때 세션 데이터를 확인한다

" /clearSession " 경로로 요청이 들어오면 req.session.destroy( ) 메서드가 실행되어 세션에 저장된 모든 데이터가 삭제된다. 데이터 삭제 작업이 에러없이 완료되면 res.redirect( ) 메서드가 실행되어 " /getSession " 경로로 이동되고 세션에 데이터가 비어있는지 확인이 가능하다. *res.redirect( ) - 지정한 경로로 리디렉션하는 메서드