본문 바로가기

Develop_story/TIL(Today I Learned)

TIL - 68 쿠키, 세션, 쿠키-세션, 토큰

SMALL
  • 인증 (Authentication) : 서비스를 이용하는 유저가 등록된 회원인지 확인하는 과정
  • 인가 (Authorization) : 유저에게 특정 리소스에 접근할 수 있는 권환을 줌 (권환 부여)
    • 운영자의 권환을 확인하는 절차
    • 마이페이지에 대한 권환을 확인하는 절차

1. 쿠키

  • 무상태와 비연결성이라는 http통신의 특징(TIL - 60 확인)에도 불구하고 마치 서버가 클라이언트의 인증 상태를 기억하는 것처럼 구현할 수 있는 수단으로 사용 가능 
  • 브라우저에 저장되는 텍스트파일로 key-value 형태로 저장 (예시 : 브라우저가 주머니에 쿠키를 넣어뒀다)
  • http 특징인 무상태와 비연결성을 개선할 수 있도록 사용됨
  • 별도로 삭제되거나 유효기간이 지나지 않은 이상 서버와 통신할 때 자동으로 주고받게 됨
  • 서버에 특정 API를 요청했을 때 서버가 응답 시 header 안에 set-cookie 속성으로 쿠키 정보를 담아주고, 응답 받은 브라우저는 쿠키를 브라우저에 자동으로 저장 ( 개발자 도구 > 애플리케이션 > 저장용량 > 쿠키  에서 확인 가능 )
  • 서버에 http 요청을 할 때마다 브라우저에 저장되어 있는 쿠키는 자동으로 서버에 보내짐
  • (단, 동일한 Origin 또는 CORS를 허용하는 Origin에만 쿠키를 보냄)
  • ex) 유튜브 서버에서 받은 쿠키는 유튜브 이용시 주고 받을 수 있음
  • 쿠키는 클라이언트에서 직접 추가/수정/삭제 가능

  1) Origin(출처)이란?

protocol + host + port를 의미

URL : http://localhost:3000/users?sort=desc&page=1#hash

  • http:// -> protocol or scheme
  • localhost -> host or domain
  • :3000/ -> port
  • /users -> path
  • ?sort=desc&page=1 -> query string
  • #hash -> Fragment

port까지 포함한 부분이 origin

  2) CORS(Cross Origin Resource Sharing)란?

  • Origin간의 Origin끼리 리소스를 쉐어링하는 정책
  • 다른 출저에 리소스를 요청하는 것을 이용하는 정책
  • 브라우저는 보안상의 이유로 같은 Origin에만 자원을 공유하는 것을 원칙으로 지정
  • 하지만 서버와 클라이언트는 각각 CORS 설정을 통해 상호협의된 웹사이트는 예외적으로 서로 다른 Origin임에도 불구하고 API 요청이 가능

2. 세션

  • 세션이란 클라이언트와 서버간의 연결이 활성화 된 상태를 의미 / 인증이 유지되고 있는 상태
  • http는 비연결성이라는 특징을 가지고 있지만, 이를 개선하는 것이 세션
  • 로그인 기능
    • 로그인 성공 > 서버에서 세션 생성 및 저장 (key-value형식) > key(sessionId)를 브라우저에 응답(by 쿠키)

3. 토큰

  • 클라이언트에서 보관하는 암호화된 인증 정보를 의미
  • 세션처럼 서버에서 사용자의 인증 정보를 보관할 필요가 없기 때문에, 서버의 부담을 줄여줄 수 있는 인증 수단
  • 웹에서 인증 수단으로 사용되는 토큰은 주로 JWT를 많이 사용

4.  JWT ( 중요! )

  • header.payload.signiture 형식으로 3가지 데이터로 구성
  • 국제 인터넷 표준 인증 규격 중 하나
  • 암호화된 토큰은 누구나 복호화하여 payload를 볼 수 있음 -> 토큰의 용도는 인증 정보에 대한 보호가 아닌 위조 방지
  • 정보를 토큰화할 때 signiture에 secret key가 필요하고, secret key는 복호화가 아니라 토큰이 유효한지 검증
LIST

'Develop_story > TIL(Today I Learned)' 카테고리의 다른 글

REACT-COOKIE / basic  (0) 2023.03.01
RESTful API  (0) 2023.02.28
TIL - 66 React Query  (0) 2023.02.18
TIL - 65 custom hook  (0) 2023.02.17
TIL - 64 Thunk 심화  (0) 2023.02.17