[React 심화] 인증/인가 1 - 쿠키, 세션, 토큰, JWT

조아영·2025년 3월 26일

◼ 인증과 인가

인증(Authentication)

서비스를 이용하려는 사용자가 등록된 회원인지 확인하는 절차. 일반적으로 로그인 과정.

인가(Authorization)

인증이 완료된 사용자가 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차.
로그인 이후, 기능 또는 데이터 접근 권한을 검사하는 과정.

◼ HTTP 프로토콜 특징

무상태(stateless)

  • 독립적 요청 처리 : HTTP는 무상태 프로토콜로, 서버가 이전 요청에 대한 정보를 기억하지 않음.
  • 클라이언트 책임 : 서버가 이전 요청의 상태나 정보를 기억하지 않으므로, 클라이언트는 매 요청마다 필요한 상태 정보를 포함하여 전달해야 함.
  • 서버 운영 효율 : 상태값은 매 요청마다 클라이언트가 가지고 오기 때문에, 서버는 클라이언트의 상태를 별도로 기억할 필요없이 주문받은 대로 응답.
  • 수평 확장성(Scale-out) 유리 : 각 서버는 상태를 기억할 필요가 없어 독립적으로 요청을 처리할 수 있음. 하나의 서버에 장애가 발생하더라도 다른 서버가 계속해서 요청을 처리할 수 있어 안전.

스케일 아웃(Scale-out)이란?
동일 애플리케이션을 여러 대의 서버에 배포하고 로드 밸런서를 통해 요청을 여러 서버로 분산하는 방식.

비연결성(connectionless)

  • 연결 즉시 종료 : 클라이언트와 서버가 요청과 응답을 주고받은 후 바로 연결을 끊음.
  • 자원 관리 : 서버 입장에서는 연결을 유지하는 비용이 들지 않아 최소한의 자원으로 많은 수의 요청 대응 가능.
  • 한계점 : 매번 새로운 연결을 맺어야 하므로, 요청이 잦은 서비스에서는 비효율적일 수 있음.

◼ 쿠키, 세션, 토큰

쿠키(Cookie)

브라우저에 저장되는 작은 텍스트 데이터 조각 (Key-Value 형태).

  • HTTP의 무상태성, 비연결성 보완 : 쿠키를 사용하여 마치 서버가 클라이언트의 인증 상태를 기억하는 것처럼 구현.
  • 자동 전송 : 별도로 삭제 처리하거나 유효기간이 만료되지 않는 한, 서버와 통신할 때 자동으로 주고받음(단, 동일 Origin 또는 CORS 허용 범위 내에서만 작동).
  • Set-Cookie : 서버에 특정 API 요청을 했을 때(ex: 로그인 요청)서버가 응답 헤더에 이 속성을 담으면 브라우저가 알아서 저장. 서버에서 브라우저에게 저장하도록 지시할 수 있다는 점에서는 localStoragesessionStorage와는 다름.

Origin 이란?
protocol + host + port 를 의미.

CORS 란?
Cross Origin Resource Sharing(CORS)는 다른 출처에 리소스 요청하는 것을 허용하는 정책.
브라우저는 보안상의 이유로 Same Origin Policy(SOP)를 원칙으로 하고 있지만, 서버와 클라이언트 각각 CORS 설정을 통해 상호합의된 웹사이트는 예외적으로 서로 다른 출처(Cross-Origin)임에도 API 요청이 가능.

세션(Session)

서버와 클라이언트 간의 연결/인증이 유지되고 있는 상태.

  • 인증 과정
    1. 로그인 성공 시 서버에서 세션 생성 및 저장소(DB, Redis 등)에 보관.
    2. 생성된 sessionId를 쿠키에 담아 브라우저로 응답.
    3. 브라우저는 이후 요청마다 쿠키(sessionId)를 함께 보냄.
    4. 서버는 수신한 ID를 저장소에서 조회하여 인증 처리.
  • 상태값
    • 세션 유지 : 서버 저장소에 해당 데이터가 존재함
    • 세션 만료 : 서버 저장소에서 데이터가 삭제됨 (로그아웃 또는 시간 초과).

토큰(Token)

클라이언트가 직접 보관하는 암호화/인코딩된 인증 정보.

  • 장점 : 세션처럼 서버에서 사용자의 인증 정보를 보관할 필요가 없어 서버 부담이 적음.
  • 주요 방식 : 주로 JWT(JSON Web Token) 형식을 사용.
  • 암호화 vs 인코딩
    • 암호화 : 데이터 보호 목적. 데이터를 특정 알고리즘으로 변환하여 인가된 사용자만이 읽을 수 있도록 하는 과정이며, 기밀성을 유지.
    • 인코딩 : 전송/처리 목적. 데이터를 다른 형식으로 변환하여 전송 및 저장을 용이하게 하는 과정으로, 특별한 키 없이도 원래 형태로 복원할 수 있음.

JWT

토큰 기반 인증의 표준 규격으로, 로그인 후 API 요청 시 신분증 역할을 함.

구조

  1. 헤더(Header) : 토큰 종류 및 서명 알고리즘 정보 포함.
  2. 본문(Payload) : 실제 데이터 부분. 예를 들어, 사용자 ID, 토큰의 만료 시간 등.
  3. 서명(Signature) : 토큰 위조여부를 확인하는 역할. 서버만 알 수 있는 비밀키로 서명되어 있음. 이 서명 때문에 토큰의 무결성이 보장됨.

특징

  • 위조 방지 : 인코딩된 토큰을 누구나 복호화하여 payload를 볼 수 있습니다. 즉, 토큰의 용도는 데이터 보호가 아니라 "이 데이터를 서버가 발행한 진짜가 맞는가?"를 검증하는 위조 방지 역할.
  • 무결성 보장: Secret Key가 있어야 Signature 검증이 가능하므로 클라이언트가 임의로 수정 불가.

인증 보안 강화(Access & Refresh)

프론트엔드 개발 시 백엔드와 협업하여 보안을 강화하는 방식.

  • Access Token : 리소스 접근용. 만료 기간을 짧게(예: 30분) 설정하여 탈취 위험 감소.
  • Refresh Token : Access Token 재발급용. 만료 기간을 길게(예: 1~2주) 설정.
  • 작동 원리 : Access Token이 만료되면 Refresh Token을 서버에 보내 새 Access Token을 받아옴. 둘 다 만료되면 다시 로그인 필요.

0개의 댓글