[ 공모전 ] Auth : 세션, 토큰

이전 포스팅을 통해 http 통신의 특징으로 인해 불편함을 알아보았다.
이제는 이 불편함을 "웹 상에서" 해결하기 위해 어떠한 개념을 가지고, 어떻게 해결했는지를 이해하고 알아보자

사용자가 웹 서비스를 이용 할 때, 단 한번의 로그인을 통해 서비스를 이용 할 수 있는 것이 사용자에게 편한 서비스를 제공하는 것이라 당연한 생각이 들것이다.

http 통신의 특징을 지키면서 어떻게 한번의 로그인으로, 웹 서비스를 이용할 수 있는지 세션과 토큰을 통해 인증 / 인가가 어떻게 이루어지는지 알아보고 이해해보자.

세션 (Session)의 의미 2가지

※참고
세션이 브라우저상에 있는 저장소인 sessionStorage로 착각하지말자

일반적인 세션의 개념

세션이란 사용자와(user)와 서버간의 연결이 활성화된 상태를 의하믄 개념
즉, 클라이언트와 서버간의 상태는 무상태(stateless)가 아닌 활성화 된 상태를 의미한다.

우리가 세션관리는 어떻게 하냐, 세션 전략은 어떻게 되는지 질문 또는 내용들을 접하게 된다면

세션관리,세션 전략 : 서버와 클라이언트의 통신을 무상태(토큰)로 진행 아니면, 활성화(세션) 하냐이다.
여기서 세션 전략이라는 말의 의미는, 토큰을 활용할 것인지 아니면, session을 생성 및 세션 id를 통한 전략인지이다.

cf ) 토큰전략, 세션전략(session id) 둘 다, 일반적인 세션의 개념에서 파생된 하위개념이라 볼 수 있다.

세션 전략 (세션 기반 인증/인가) === 세션 쿠키 전략 방식

개념 : 세션을 통한 인증/인가는 서버가 사용자 인증과 인가 여부를 관리하는 방식

• 인증 : 사용자가 로그인 시, 서버는 사용자를 인증하고 세션을 생성 후
  세션 ID를 쿠키에 보관하여 보낸다. (세션 쿠키 방식)
  
• 인가 : 인증 이후의 사용자가 서버에 요청 할 때 마다, 서버는 요청헤더에 있는 세션 ID를 가진 쿠키가 있는지 확인 후, 응답을 해준다.

• 장점
  - 상태 유지: 사용자가 여러 번의 요청을 보내는 동안 상태를 유지,
  - 보안 관리: 서버 측에서 세션 정보를 관리하므로, 클라이언트 측에서 상태 정보가 노출되지 않는다.
  

※특이사항

• 세션 쿠키 : 세션 쿠키는 클라이언트 측 브라우저에 저장되며, 기본적으로 브라우저가 닫힐 때 삭제된다.
  세션 쿠키는, 서버측에서 세션 ID를 쿠키에 넣어 보내는데, 쿠키의 유효시간에 관한 이야기이다.

쿠키에 넣은 세션 ID가 브라우저를 닫을 때 삭제가 어떻게 되는지 설정 코드를 확인해보자

// Node Server
// express-session
app.use(session({
  secret: 'your-secret-key', // 세션 암호화에 사용되는 비밀 키
  resave: false, // 세션을 항상 저장할지 여부
  saveUninitialized: true, // 초기화되지 않은 세션을 저장할지 여부
  cookie: {
    httpOnly: true, // 클라이언트에서 자바스크립트를 통해 쿠키에 접근할 수 없게 설정
    secure: false // HTTPS를 통해서만 쿠키가 전송되게 설정 (개발 환경에서는 false로 설정)
    // maxAge나 expires 속성을 설정하지 않으면 세션 쿠키가 된다.
  }
}));

신기하지 않나?? 설정을 안하면 세션 쿠키가 된다니..

뿐만아니라, 클라이언트 단에서 어떻게 처리하는지 예시 코드로 알아보자

axios.get('http://localhost:3000', { withCredentials: true })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

withCredentials: true 옵션을 사용하면, 클라이언트는 요청 시 자동으로 해당 도메인의 쿠키를 포함하여 이 과정에서 세션 ID 쿠키도 함께 전송하게 된다.

세션 쿠키 : maxAge 나 expires 속성을 설정하지 않음.
- 브라우저가 닫히면 쿠키가 삭제된다.
영구 쿠키: maxAge나 expires 속성을 설정함
- 브라우저가 닫혀도 설정된 시간 동안 쿠키가 유지

🤔 세션 쿠키 방식이 상태 유지라고??

상태유지(?)
클라이언트와 서버간 통신 할 때 세션 ID를 확인하는 작업을 하고, 인가를 논하는것이기에, 세션 ID를 통한 확인도 결국 없다면, 무상태 아닌가? 라는 생각이 들었다.


그렇지만, 클라이언트 단과 서버측 서로간에는 session id를 통해 독립적으로 상태 유지를 의미 하는 것으로 받아들였다. 서버측에서는 session생성과 id를 발급하여 클라이언트에 넘겨줬으니 결국 session id를 넘겨준 클라이언트가 요청시 헤더에 있는 cookie 값을 통해 넘겨줬었지 하고 "기억" 하는 것
이다. 통신 자체 (HTTP통신)은 당연히 무상태(stateless)를 유지한다.

토큰

개념 : 토큰 기반 인증은 사용자 인증 정보를 토큰으로 발급하고, 클라이언트가 이 토큰을 사용하여 서버와 상호작용하는 방식

• 인증 : 사용자가 로그인하면, 서버는 토큰을 발급하고, 클라이언트에서 저장한다. (sessionStorage, LocalStorage, cookie)
• 인가 : 인증 이후의 사용자가 서버에 요청 할 때 마다, 클라이언트는 토큰을 헤더에 포함하여 서버에 보내고, 토큰의 유효성 검사 후, 응답을 해준다.

예시코드를 한번 봐 보자

const ACCESS_TOKEN = 'Wdlejqmfdbxhzmsdlqslekjwttoken'

axios.get('https://myServer.com/data',{
  headers:{
      Authorization: `Bearer ${ACCESS_TOKEN}` 
  }
}

세션 방식과 토큰의 차이점

세션 방식

• 상태 유지: 세션 기반 인증은 서버 측에서 사용자의 인증 상태를 관리한다. 클라이언트가 로그인하면 서버는 세션을 생성하고, 이 세션 ID를 클라이언트의 쿠키에 저장하여 유지한다.
• 무상태: 클라이언트가 요청을 보낼 때마다 서버는 세션 ID를 통해 클라이언트의 인증 상태를 파악한다. 그러나 HTTP 프로토콜 자체는 무상태이므로, 각 요청은 독립적으로 처리된다. 단지 세션 ID를 통해 클라이언트를 식별하고 인증 상태를 유지하는 데에만 상태 유지가 이루어진다.

토큰 방식

• 상태 유지: 토큰 기반 인증은 클라이언트 측에서 상태를 유지한다. 사용자가 인증되면 서버는 토큰을 발급하고, 이 토큰을 클라이언트에게 전달하여, 클라이언트는 이 토큰을 저장하고, 각 요청을 헤더에 포함시켜 서버에 전달한다.
• 무상태: 서버는 클라이언트로부터 받은 토큰을 검증하여 인증한다. 서버는 토큰의 유효성을 검사하고, 이 과정에서 상태 유지를 클라이언트가 담당한다. 서버는 각 요청을 독립적으로 처리하며, HTTP 프로토콜 자체는 여전히 무상태이다.

마무리

물론 각자의 방식에서 장점과 단점이 존재한다고 한다.
세션 방식은 서버측에서 관리하므로, 클라이언트 측에서 정보 노출이 되지 않는다는 장점이 있지만, 사용자가 많아지면 많아질 수록 서버비용이 증가 할 수 있다.

토큰 방식은 클라이언트 측에서 관리하므로, 사용자가 많아져도 서버측에서 부담이 적다(단순히 토큰 검증이므로)
그러나, 보안적으로 탈취가능성과 그에 따른 남용이 있을 수 있다.

이렇게 세션과 토큰방식을 정리 해 봤다.

이제는 실제 내가, 공모전에서 했던 내용들을 써보기로 하겠다.

잘못된 개념, 또는 이해가 안간다면 댓글 남겨주세요@임**