리액트 스터디 17탄) 쿠키, 세션, 토큰의 이해

2022. 7. 21. 16:08·웹/리액트

리액트를 다루는 기술을 참고하여 기술하였습니다.


인증과 인가

먼저 토큰기반과 세션기반인증을 살펴보기 위해서 인증과 인가를 알아야 한다.

인증 (Authentication)

  • 유저가 누구인지 확인하는 절차
  • 로그인, 유저의 identification을 확인하는 절차

인가(Authorization)

  • 유저의 권한을 허락하는 것, 유저마다 다른 권한이 존재하고, JWT와 같은 토큰을 이용하여 인가할수 있다.

인증과 인가의 차이

기존 HTTP프로토콜의 특성이자 약점

http프로토콜의 약점이자 특성은 다음과 같다.

1. connectionless 프로토콜( 비연결 지향)

클라이언트가 서버에 요청을 했을때, 그 요청에 맞는 응답을 보낸후 연결을 끊는 처리 방법이다.

이를 통해서 수만명의 웹 서비스 유저를 동시에 받더라도 접속유지는 최소한으로 하기 때문에 더많은 유저의 요청을 처리할수 있다.

2. Stateless 프로토콜(상태정보 유지 안함)

클라이언트의 상태 정보를 가지지 않는 서버처리 방식이다.

위의 connetionless로 파생되는 특징으로, 클라이언트의 이전 상태정보를 알수 없다면, 계속해서 로그정보를 유지할수가 없다. 왜냐하면 클라이언트와 첫번째 통신에서 데이터를 주고 받았더라도, 두번째 연결에서는 첫번째 데이터를 유지하지 않기 때문이다.

  • stateless하다면, 확장성을 얻게 된다. 클라이언트와 서버의 연결고리가 없기 때문이다.

하지만 실제로 데이터 유지를 필요한 경우가 많다. (로그인처럼) 이를 해소하기 위해서 나온 방법이 cookie이며, 쿠키를 사용하는 인증 방식은 크게 세션기반과 토큰기반으로 나뉜다.

쿠키(Cookie)란??

쿠키란 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다.

쿠키는 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효시간이 정해지면 브라우저가 종료되도 유지된다.

쿠키는 사용자가 따로 요청하지 않아도, 브라우저가 자동으로 HTTP헤더에 포함하여 서버에 전송한다.

  • 쿠키는 로컬에 현재 사용자의 정보가 저장되기 때문에 보안에 매우 취약하다.

쿠키의 사용 예 )

  • 로그인 정보 저장
  • 쇼핑몰 장바구니 기능

세션(Session)이란?

세션은 쿠키를 기반하지만 사용자 파일 정보를 브라우저에서 저장하는것이 아난 서버측에서 관리하는 것을 의미한다.

서버에서는 클라이언트를 구분하기 위해서 세션 ID값을 부여하게 되고, 서버에 접속해 있는 한해서는 인증상태를 유지한다.

서버에 사용자 정보 파일을 유지하기 때문에 보안이 좋다.

또한 서버 메모리에 과부하를 주기 때문에 성능 저하가 생길수도 있다.

  • 중요한 점은 서버가 계속해서 클라이언트의 상태를 유지한다는점이다(이를 Stateful한 서버 라고 한다.)

이러한 세션(서버)기반의 인증의 단점

  1. 데이터베이스 성능에 무리를 준다.

    : 로그인 중인 유저의 동시접속자 수가 많으면 서버메모리에 id값을 다 부여하고 이를 저장해둬야하기 때문에 램이 과부하 된다.

  1. 확장성

    : 세션을 이용하면 서버 확장이 어려워 진다. 단순히 서버의 사양을 업그레이드 하는것 뿐 아니라, 트레픽을 감당하기 위해서는 여러개의 프로세스를 만들거나, 서버를 추가해야하는데 이는 매우 복잡하고 어렵다.

  1. CORS(Cross Origin Resource Sharing)

    : 쿠키는 단일 및 서브 도메인에서만 작동하도록 설계 되어있기 때문에 이를 여러 도메인에서 관리하는것이 어렵다.

토큰기반의 인증 시스템

토큰(token)이란?

토큰이란 본인확인 수단이다. 로그인을 할때, 혹은 유저의 id값을 확인한 후 서버가 그것을 확인하여 이 사용자가 유효한 사용자라는 토큰을 발행해 준다. 이렇게 발행된 토큰을 통해 사용자가 웹 사이트나 앱에 엑세스를 하게 되는 것이다.

토큰의 작동방식

  1. 사용자의 로그인을 통해 id와 pw를 받는다.
  1. 서버가 해당 정보를 검증하고 토큰을 발행한다.
  1. 클라이언트가 서버에 요청을 할때마다, 해당 토큰을 서버 헤더에 포함하여 전달한다.
  1. 토큰을 검증하고, 확인이 되면 요청에 응답한다.

이러한 방식을 통해서 서버는 계속해서 클라이언트의 상태를 저장하지 않고, 요청이 올때만 헤더에 포함된 토큰을 확인만 하면 되는것이다.(이렇게 상태를 저장하지 않는 것을 Stateless라고한다.)

토큰 기반의 인증서비스 이점

  1. 무상태성(stateless)과 확장성(scalability)

    토큰은 완전히 서버에 stateless하며, 서버와 클라이언트의 연결고리가 없기 때문에 확장하기에 매우 적합하다.

  1. 보안성

    클라이언트가 서버로 더이상 쿠키를 전달하지 않기 때문에 쿠키사용에 의한 취약점이 없어진다.

  1. 확장성(Extensibility)

    extensibility는 scalability와 다른 개념으로, scalability는 서버를 확장하는 것을 의미하지만, extensibility는 로그인 정보의 분야를 확장하는것을 의미한다. 최근 구글이나 카카오, 네이버등 아이디를 연동하여 회원가입을 하고 로그인 하는 방법을 의미한다.

  1. 여러 플랫폼 및 도메인

    CORS의 경우에는 단일 도메인에서만 사용가능한 단점을 의미했지만, 토큰의 경우에는 어떤 도메인에서도 토큰만 유효하다면, 요청이 정상적으로 처리 된다.

    즉 여러 플랫폼이나 여러 도메인에서도 사용가능 하다.


참고자료

HTTP 프로토콜이란?
HTTP(Hypertext Transfer Protocol)는 인터넷상에서 데이터를 주고 받기 위한 서버/클라이언트 모델 을 따르는 프로토콜이다. 애플리케이션 레벨의 프로토콜로 TCP/IP위에서 작동 한다. 1.1 작동방식 HTTP는 서버/클라이언트 모델을 따른다. 클라이언트에서 요청(request)를 보내면 서버는 요청을 처리해서 응답(response)한다. 클라이언트 : 서버에 요청하는 클라이언트 소프트웨어(IE, Chrome, Firefox, Safari ...)가 설치된 컴퓨터를 이용한다. 클라이언트는 URI를 이용해서 서버에 접속하고, 데이터를 요청할 수 있다.
https://shlee0882.tistory.com/107
[JWT] 토큰(Token) 기반 인증에 대한 소개
토큰(Token) 기반 인증은 모던 웹서비스에서 정말 많이 사용되고 있습니다. 여러분이 API 를 사용하는 웹서비스를 개발한다면, 토큰을 사용하여 유저들의 인증작업을 처리하는것이 가장 좋은 방법입니다. 토큰 기반 인증 시스템을 선택하는데에는 여러가지 이유가 있는데요, 그 중 주요 이유들은 다음과 같습니다 Stateless 서버 Stateless 서버를 이해하려면 먼저 Stateful 서버가 무엇인지 알아야합니다.
https://velopert.com/2350
[Server] JWT(Json Web Token)란?
현대 웹서비스에서는 토큰을 사용하여 사용자들의 인증 작업을 처리하는 것이 가장 좋은 방법이다. 이번에는 토큰 기반의 인증 시스템에서 주로 사용하는 JWT(Json Web Token)에 대해 알아보도록 하겠다. JWT(Json Web Token)란 Json 포맷을 이용하여 사용자에 대한 속성을 저장하는 Claim 기반의 Web Token이다. JWT는 토큰 자체를 정보로 사용하는 Self-Contained 방식으로 정보를 안전하게 전달한다.
https://mangkyu.tistory.com/56
토큰 기반 인증란 무엇인가? | Okta Identity Korea
오늘날 휴대전화(앱)와 웹 앱을 통해 시스템에 액세스하는 사용자들이 많아지면서 개발자에게 이러한 플랫폼에 적합한 안전한 인증 방법이 필요해졌습니다. 개발자들은 애플리케이션에 토큰 인증 방식을 도입할 때 이러한 문제를 해결하기 위해 JSON Seb Token(JWT)으로 눈을 돌리고 있습니다. JSON Web Token(JWT)은 입니다. 완성된 코딩 결과물은 발신자와 수신자 사이에서 안전한 통신을 지원합니다.
https://www.okta.com/kr/identity-101/what-is-token-based-authentication/


Uploaded by N2T

반응형

'웹 > 리액트' 카테고리의 다른 글

리액트 스터디 18탄) JWT(JSON Web Token)란?  (0) 2022.07.21
리액트 스터디 16탄) axios로 api호출하기  (0) 2022.07.16
리액트 스터디 15탄) 비동기 작업과 Promise, async, await  (0) 2022.07.16
리액트 스터디 14탄) useNavigate, Outlet, NavLink  (0) 2022.07.16
리액트 스터디 13탄) url 파라미터와 쿼리스트링  (0) 2022.07.16
'웹/리액트' 카테고리의 다른 글
  • 리액트 스터디 18탄) JWT(JSON Web Token)란?
  • 리액트 스터디 16탄) axios로 api호출하기
  • 리액트 스터디 15탄) 비동기 작업과 Promise, async, await
  • 리액트 스터디 14탄) useNavigate, Outlet, NavLink
진ddang
진ddang
안녕하세요 진땅의 개발자 블로그 입니다. 피드백은 환영입니다. 깃헙 : https://github.com/it794613
    반응형
  • 진ddang
    맛동산이
    진ddang
  • 전체
    오늘
    어제
    • 분류 전체보기 (199)
      • 일기 그리고 목표 (1)
      • 웹 (20)
        • 리액트 (19)
      • 앱 (115)
        • Swift 문법 (15)
        • Swift (65)
        • SwiftUI (32)
        • 리액트 네이티브 (3)
      • CS (30)
        • 컴퓨터그래픽스 (8)
        • 운영체제 (6)
        • 네트워크 (16)
      • 알고리즘 (13)
        • 백준 (12)
        • 프로그래머스 (1)
      • 대외활동 (7)
        • ict한이음(2022.04) (2)
        • 멋쟁이 사자처럼 (5)
        • Apple Developer Academy (0)
      • 다양한 내용들 (8)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    c++
    네트워크
    위젯킷
    후기
    Protocol
    SwiftUI
    swift concurrency
    widget
    멋사
    ReactorKit
    스위프트
    cs
    웹
    알고리즘
    TCA
    Swift
    영남대
    문법
    dispatchqueue
    리액트
    멋쟁이사자처럼
    대외활동
    composable architecture
    컴퓨터그래픽스
    uikit
    spritekit
    widgetkit
    운영체제
    스유
    백준
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
진ddang
리액트 스터디 17탄) 쿠키, 세션, 토큰의 이해
상단으로

티스토리툴바