TIL: 2022-11-10

⚙️ 오늘 배운 주제

인증/보안

 

🐹 오늘의 기분

인증, 보안 파트를 공부했다. 쿠키, 세션에 대해 배우고 요즘 사이트에 거의 들어가있는 로그인 기능을 구현하는 실습도 진행했다. 내용도 많고 서버랑 클라이언트 파일을 왔다갔다하는게 아주 정신없었다. 그 흐름을 이해하는게 굉장히 중요하게 느껴졌다. 코드 자체는 유어클래스에 그대로 나와있었어서 작성하는데 어려움은 없었지만, 왜 이렇게 쓰는 건지 이해하는데서 시간을 많이 썼다. 과제하는 내내 라이브세션이 절실했음... 그래도 세션에서 정리된 설명을 들으니 혼잡했던 머릿속이 조금이나마 정리된 느낌이다. 과제 살펴보면서 옵시디언 노트에 로직을 글로 써보는 중인데 이렇게 정리해보는 것도 꽤 도움되는 것 같음. 오늘 코플릿도 제대로 이해 못해서 그것도 뜯어봐야되고.. 평소보다 더 늦게 잘 것 같다 ㅎㅎ

 

🗝 키워드

쿠키, 세션, axios, set-cookie, express-session, clearCookie

 

🗣 스스로에게 설명

Cookie

사용자의 상태를 브라우저에 저장한다.

서버가 클라이언트에게 전송하는 작은 데이터 조각
클라이언트는 그 조각을 저장해놓았다가 동일한 서버에 재요청 시 저장된 데이터를 같이 전송함
HTTP의 무상태성을 보완.

 

쿠키는 삭제하지 않으면 사라지지 않는다.
사용자 선호, 테마 등 장시간 보존해야하는 정보 저장에 적합
쿠키는 한 번 생성되면 다음 요청을 보낼 때 같이 보내진다.

 

🍪 Set-Cookie와 Cookie 헤더
HTTP 요청을 받을 때 서버가 그에 대한 응답으로 Set-Cookie 헤더를 전송할 수 있음.
쿠키는 브라우저에 저장됨.

Set-Cookie: <cookie-name>=<cookie-value>

참고

HTTP 쿠키 - HTTP | MDN

데이터를 저장한 이후 특정 조건이 만족되어야 다시 가져올 수 있음.
조건은 아래 옵션들로 지정한다.

쿠키 옵션

Domain: 도메인 정보
Path: 세부 경로 정보
MaxAge or Expires: 쿠키의 유효기간을 정하는 옵션 (로그인 유지 등), 옵션 여부에 따라 세션 쿠키와 영속성 쿠키로 나뉜다.
Secure: true이면 HTTPS를 이용하는 경우에만 쿠키 전송 가능
httpOnly: 자바스크립트에서 접근 못하도록 막아줌.
SameSite: 요청을 보낸 Origin과 서버의 도메인, 프로토콜, 포트가 같은 경우를 말함. 하나라도 다르면 Cross-Origin으로 분류된다. 이 때는 CORS 처리를 따로 해주어야 함.

쿠키에 민감한 정보를 담는 것은 위험

 

Axios

HTTP 비동기 통신 라이브러리

npm install axios

axios.get("url"[,config])

fetch API와는 다르게 데이터를 자동으로 json 형태로 변환함. 바로 console.log()하면 된다.

 

Session

사용자의 정보를 서버에 저장하고 쿠키를 이용하여 검증하는 방식
세션은 서버의 메모리에 저장됨.
세션 유저 데이터가 메모리를 차지하고 있는 상태 -> 서버의 성능이 낮아질 수 있다.

 

session_id는 신분증과 같은 역할
유저가 인증에 성공했음을 알고 있다면, 매번 로그인할 필요가 없다.

인증에 따라 리소스의 접근 권한이 달라짐.

• 서버: 사용자가 인증에 성공했음을 알고 있어야 한다.
• 클라이언트: 인증 성공을 증명할 수단을 갖고 있어야 한다.

세션 성공을 증명할 수단으로써 세션 아이디를 전달
이제 다음 요청을 할 때에는 쿠키에 세션 아이디를 담아서 요청

 

로그아웃은?
서버는 세션 정보를 삭제하고
클라이언트는 쿠키를 갱신해야 함.

서버는 쿠키를 임의로 삭제할 수 없음. set-cookie로 세션 아이디의 키값을 무효한 값으로 갱신 가능.

 

express-session

Node.js의 모듈
세션을 위한 미들웨어

const express = require('express');
const session = require('express-session');

const app = express();

app.use({
  session({
    secret: <비밀 키>,
    resave: false,
    saveUninitialized: true,
    cookie: {
      // 쿠키 옵션
    }
  })
})

express 서버에서 쉽게 세션을 위한 공간을 다룰 수 있도록 만들어줌.
secret 옵션의 비밀키로 암호화해 세션 id를 생성하고 클라이언트에 쿠키로 전송함.
--> 암호화를 위한 로직을 작성할 필요가 없음. 다 알아서 해준다.

쿠키로 전송된 세션 id는 이에 종속되는 고유한 세션 객체를 가지며 세션 객체는 서버에 저장됨.

req.session으로 세션 객체에 접근 가능.

 

🔎 공부가 더 필요한 부분

cookie가 오고가는 방식
set-cookie와 cookie
res.cookie냐 req.cookie냐 이게 너무 헷갈린다!

-> 쿠키를 응답으로 보낼 땐 res.cookie('쿠키 이름', 쿠키 내용, 쿠키 옵션), 받아온 쿠키를 활용할 때에는 req.cookies