Quest10

Quest 10. 인증의 이해

Introduction

• 이번 퀘스트에서는 웹에서의 인증에 관해 알아보겠습니다.

Topics

• Cookie
• Session
• JWT

Resources

• MDN - HTTP 쿠키
• Cookies and Sessions
• JWT

Checklist

• 쿠키란 무엇일까요?

쿠키는 인터넷을 사용하는 유저가 어떤 웹사이트를 방문했을 때 그 사이트가 사용하는 서버를 통해 로컬에 저장되는 작은 데이터이다.
쿠키는 키와 밸류로 이루어져 있으며 만료기간, 도메인, 경로 등의 정보를 가지고 있다. 유효시간 범위내에서는 정보가 저장되어, 주로 사용자 인증을 유지하는데(로그인 지속, authentication, 장바구니 접속 등) 활용한다.

• 쿠키는 어떤 식으로 동작하나요?

  1. 클라이언트가 페이지를 요청
  2. 서버에서 쿠키를 생성
  3. HTTP 헤더에 쿠키를 포함 시켜 응답
  4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
  5. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
  6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답
  

• 쿠키는 어떤 식으로 서버와 클라이언트 사이에 정보를 주고받나요?

  1. 클라이언트가 페이지를 요청
  2. 서버에서 쿠키를 생성
  3. HTTP 헤더에 쿠키를 포함 시켜 응답
  4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
  5. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
  6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답
  

• 웹 어플리케이션의 세션이란 무엇일까요?

  사용자 정보 저장 및 인증 등에 활용하기 위해 key,value로 이루어진 문자열 데이터이다.
  
  쿠키는 기본적으로 많은 트랙픽을 발생시키고 보안에 취약하다는 문제가 있는데, 이러한 단점을 보완하기 위해 session id(식별자)를 넣고 해당 server/DB에 저장한다.
  

  • 세션의 ID와 내용은 각각 어디에 저장되고 어떻게 서버와 교환되나요?

    1. 클라이언트가 서버에 요청을 보낸다. (첫 요청에서는 Session ID 가 존재하지 않는다.)
    2. 서버에서는 쿠키 내에 세션 아이디 값이 없는 것을 확인하고, 세션 아이디를 새로 발급해서 응답한다.
    3. 클라이언트는 서버에서 전달받은 세션 아이디를 요청마다 헤더 쿠키에 넣어서 요청한다.
    4. 서버는 세션 아이디를 통해서 사용자를 식별한다.
    5. 클라이언트가 로그인을 요청하면, 서버는 로그인 정보로 Session 을 갱신하고 새로운 세션 아이디를 발급하여 응답한다.
    6. 클라이언트는 로그인 사용자의 session id 쿠키를 요청과 함께 전달하고, 서버에서도 로그인된 사용자로 식별 가능하다.
    7. 클라이언트 종료(브라우저 종료) 시 세션 아이디 제거, 서버에서도 세션 제거
    

• JWT란 무엇인가요?

  JSON Web Token, Json 포맷을 이용하여 사용자에 대한 속성을 저장하는 Claim 기반의 Web Token이다. JWT는 토큰 자체를 정보로 사용하는 Self-Contained 방식으로 정보를 안전하게 전달한다.
  

  • JWT 토큰은 어디에 저장되고 어떻게 서버와 교환되나요?

    애플리케이션이 실행될 때, JWT를 static 변수와 로컬 스토리지에 저장하게 된다. static 변수에 저장되는 이유는 HTTP 통신을 할 때마다 JWT를 HTTP 헤더에 담아서 보내야 하는데, 이를 로컬 스토리지에서 계속 불러오면 오버헤드가 발생하기 때문이다. 클라이언트에서 JWT를 포함해 요청을 보내면 서버는 허가된 JWT인지를 검사한다. 또한 로그아웃을 할 경우 로컬 스토리지에 저장된 JWT 데이터를 제거한다. (실제 서비스의 경우에는 로그아웃 시, 사용했던 토큰을 blacklist라는 DB 테이블에 넣어 해당 토큰의 접근을 막는 작업을 해주어야 한다.)
    

• 세션에 비해 JWT가 가지는 장점은 무엇인가요? 또 JWT에 비해 세션이 가지는 장점은 무엇인가요?

  JWT 장점 : JWT를 이용하면 따로 서버의 메모리에 저장 공간을 확보할 필요가 없다. 서버가 토큰을 한번 클라이언트에게 보내주면 클라이언트는 토큰을 보관하고 있다가(가장 쉬운 방법은 local storage에 저장하는 것이다) 요청을 보낼때마다 헤더에 토큰을 실어보내면 된다. 쿠키를 사용할 수 없는(쿠키는 웹브라우저에서 사용할수 있는 기능이다!) 모바일 어플리케이션에는 JWT를 사용한 인증방식이 최적이다.
  
  Session 장점 : 세션의 경우 Cookie 헤더에 세션 ID만 실어 보내면 되므로 트래픽을 적게 사용한다. 하지만 JWT는 사용자 인증 정보와 토큰의 발급시각, 만료시각, 토큰의 ID등 담겨있는 정보가 세션 ID에 비해 비대하므로 세션 방식보다 훨씬 더 많은 네트워크 트래픽을 사용한다.
  
  
  

Quest

• 이번에는 메모장 시스템에 로그인 기능을 넣고자 합니다.
  • 사용자는 딱 세 명만 존재한다고 가정하고, 아이디와 비밀번호, 사용자의 닉네임은 하드코딩해도 무방합니다.
  • 로그인했을 때 해당 사용자가 이전에 작업했던 탭들과 마지막으로 활성화된 탭 등의 상태가 로딩 되어야 합니다.
  • 세션을 이용한 버전과, JWT를 이용한 버전 두 가지를 만들어 보세요!
    • 세션을 이용할 경우 세션은 서버의 메모리나 파일에 저장하면 됩니다.

Advanced

• Web Authentication API(WebAuthn)은 무엇인가요?