20210304 TIL

배운 것들

https
hashing
cookie
session
csrf

더 알아볼 것

cookie options
axios vs fetch
withcredentials
cookie vs session 테이블 외우기

cookie와 session 스프린트를 진행했다. axios대신에 fetch를 사용하여 구현하다가 꽤 애를 먹었다. axios는 fetch와 다르게 다음과 같은 특징을 갖는다.

error handling 관련해서
fetch는 catch에 걸리더라고 이후의 then 문을 실행하는 반면에
axios의 경우엔 then 문을 실행하지 않고 console 창에 해당 에러로그를 보여준다.
또한 JSON 데이터 자동 변환이 가능한데
fetch처럼 json으로 변환 후 출력하지 않고 바로 data 프로퍼티에 접근해서 출력할 수 있다.

이러한 특징 때문에 해결하는데 시간을 많이 쏟았다.

해결 후 cookieParser라는 미들웨어를 사용하여 쿠키를 전달했다.

const cookieParser = require('cookie-parser');

module.exports = {
  post: async (req, res) => {
    let userInfo = await Users.findOne({
      where: { userId: req.body.userId, password: req.body.password },
    });
    if(!userInfo||!userInfo.id){
      res.status(400).json({data:null,message:'not authorized'})
    }
    else{
      res.cookie('id',userInfo.id,{domain:'localhost',path:'/', secure:true, httpOnly:true, sameSite:'none'})
      res.json({data:null, message:'ok'})
    }
  },
};

클라이언트에게 쿠키를 전달하고 로그아웃 시에 cookie를 삭제하기 위해 cookie에 전달한 아이디 값을 확인한고 삭제해준다.

module.exports = {
  post: (req, res) => {
    if (!req.cookies.id)
      res.status(400).json({ data: null, message: 'not authorized' });
    else {
      res.clearCookie('id');
      res.json({ data: null, message: 'ok' });
    }
  },
};

쿠키는 자바스크립트로 접근이 가능하기에 보완에 취약할 수 있다. 이를 보완하기 위해 id 값만 전달하여 관리하는 방식이 session이다. session은 session id값을 섹션 객체에 저장하여 클라이언트에게 전달하는 방식이다.

module.exports = {
  post: async (req, res) => {
    const userInfo = await Users.findOne({
      where: {
        userId: req.body.userId,
        password: req.body.password
      },
    });

    if (!userInfo) {
      res.status(400).json({
        message: 'not authorized'
      })
    }
    else {
      req.session.userId = userInfo.id
      res.json({
        data: userInfo,
        message: 'ok'
      })
    }
  }
}

cookie 미들웨어에서 옵션 값으로 들어가는 값에는 이러한 것들이 있다.