2023. 3. 16. 15:58ㆍ프론트엔드
날짜: 2023년 3월 13일
태그: 교육, 원티드 프리온보딩
세션 기반 로그인 구현과 JWT와의 비교 및 인프라스트럭쳐
세션이란 무엇인가?
세션이란 단어는 무엇을 의미 하는가? 토큰의 의미를 다시 한번 새겨 보자
이처럼 토큰은 명백한 뜻이 있고 정의를 내릴 수 있다. 그렇다면 세션은..?
세션(session)은 컴퓨터 과학에서, 특히 네트워크 분야에서 반영구적이고 상호작용적인 정보 교환을 전제하는 둘 이상의 통신 장치나 컴퓨터와 사용자 간의 대화나 송수신 연결상태를 의미하는 보안적인 다이얼로그(dialogue) 및 시간대를 가리킨다.
(출처 : 위키백과)
위의 정의를 보고 다양한 생각이 들 수 있는데,,
- 데이터 저장 방식?
- 통신 프로토콜?
- 인증 방법론?
- 암호화 방식?
“아무튼 로그인에 쓰이는 방법 아닌가요???”
우리가 생각하는 세션은 로그인에 사용하는 방법인데, 그렇다면 토큰 방식 로그인을 돌아보자
토큰 기반 로그인에서는 토큰🪙을 발급하고 사용자가 기능 요청 통신을 전송할때 토큰🪙을 같이 보낸다. 이 토큰을 서버에서 확인하고 사용자가 누군지 인식한다.
그렇다면? 세션 기반 로그인이란…
특히 네트워크 분야에서 반영구적이고 상호작용적인 정보 교환을 전제하는 둘 이상의 통신 장치나 컴퓨터와 사용자 간의 대화나 송수신 연결상태
세션기반 로그인 인증은 위의 세션의 정의와 함께 생각 해보면 다음과 같은 결론을 내릴 수 있다.
세션:
사용자의 로그인 이후 로그아웃 혹은 로그인 만료까지의 기간
세션 방식 로그인:
사용자 로그인이 유요한 시간 동안 서버에 세션 아이디를 기록해 두고 인증에 사용하는 방식
사용자가 성공적으로 로그인을 마치면, 서버에서 사용자의 세션을 저장하고, 요청마다 세션의 있는 정보를 이용할 수 있다는 것이다.
세션은 어떤 방식으로 기록을 하나?
쿠키
쿠키의 역할은 다음과 같다.
- 서버가 사용자의 웹브라우저에 전송하는 작은 데이터 조각
- 쿠키는 두요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용
- 상태가 없는 HTTP 프로토콜에서 주로 사용된다.
- 세션관리 (Session Management) : 서버에 저장해야할 로그인, 장바구니, 게임 스코어 등의 정보관리
- 세션 로그인 방식은 쿠키에 sid (세션아이디)를 담아서 전송하게 될것이다.
브라우저에 쿠키를 저장하는 방법은 …. 서버에서 발급된 sid로 자동으로 담아 진다. 서버에서 응답이 올때 Set-Cookie
헤더에 sid
가 담아져서 전송이 되고 이 헤더는 차후에 http
전송을 날릴 때 자동으로 담겨져서 날라간다. 이 때 여러가지 세션 쿠키에 관한 정책들(보안, 만료기간,,,)은 서버에서 설정하게 된다!
쿠키 관련 정책 지정하기
프론트에서는 http 통신을 할때 관련 정책을 지정할 수 있다.
SameSite
쿠키의 정책으로 None
, Lax
, Strict
세 가지 종류를 선택할 수 있고, 각각 동작하는 방식이 다름
None
:None
으로 설정된 쿠키의 경우 크로스 사이트 요청의 경우에도 항상 전송됨. 보안적으로도SameSite
적용을 하지 않은 쿠키와 마찬가지로 문제가 있는 방식임Strict
: 가장 보수적인 정책Strict
로 설정된 쿠키는 크로스 사이트 요청에는 항상 전송되지 않음.Lax
:Strict
에 비해 상대적으로 느슨한 정책Lax
로 설정된 경우, 몇 가지 예외적인 요청에 전송됨- 동일출처사이트 가능
- "안전한" HTTP 메서드 요청 가능 (get method)
httpOnly
- document.cookie와 같은 자바스크립트로 쿠키를 조회하는 것을 막는다.
- 서버로 HTTP Request 요청을 보낼때만 쿠키를 전송한다.
- 이를 통해 XSS(Cross Site Scripting) 공격을 차단할 수 있다.
Secure
- 웹브라우저와 웹서버가 HTTPS로 통신하는 경우에만 웹브라우저가 쿠키를 서버로 전송하는 옵션
보안정책을 적재적소에 따라 수행해 안전한 웹 개발을 하자 !
CORS 이슈
악명 높은 cors 이슈… 어떤걸까..?
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.
말그대로 주소(포트포함)가 다르면 cors 경고가 뜨면서 통신이 되지 않는다.
해결방법은?
프론트엔드에서 해야 하는 일
- 베포됐을 경우에는… 별 일 할 수 없다.
- 로컬 환경에서는 브라우저의 보안 기능꺼서 해결 가능
벡엔드에서 해야 하는 일
- cors를 허용하는 도메인을 설정해줄 수 있다.
세션 로그인을 구현할 때, 자주 뜰 수 있는 오류이니 당황하지 말고 cors 옵션을 잘 설정하자!
세션의 로그인 흐름
- 브라우저에 접속하면 세션이 유효한지(서버에서) 검증함
- 유효하면 세션을 계속 유지 함
- 유효하지 않으면 로그인을 진행해서 새로운 세션을 발급받음
세션의 사용하기위한 추가 기능
로그아웃
- 세션을 서버에 저장하기 때문에 만료시키거나, 세션파괴를 통해 세션을 관리 해야할것
권한 관리
- 세션에 따라 서버에 접근할 수 있는 권한을 설정해야 할것이다.
세션 vs JWT
JWT 기반 인증 | 세션 기반 인증 |
• 서버/백엔드 비용 감소 • 프론트엔드 복잡도 높아짐 • 보안 상 세션보다 조금 더 위험 |
• 서버 백엔드 비용 대폭증가 • 프론트엔드 인증 쉬워짐 • 보안상 약간의 향상 |
무슨 방법을 선택해야 하는가?
어떤 기준으로 생각해야 하는가? 다음과 같은 기준으로 생각해보길 바란다.
- 동시접속사 수
- 서비스 규모
- 앱/웹 동시운용 여부
- 팀 내 인력 구성
- 일정
'프론트엔드' 카테고리의 다른 글
프론트엔드 개발자도 알면 좋은 지식 Infra (0) | 2023.05.18 |
---|---|
개발자의 기본 협업 (1) | 2023.05.18 |
JWT토큰 인증 방식 로그인 (0) | 2023.03.14 |
로그인 개념과 어플리케이션 구조 알아보기 (0) | 2023.03.07 |
Nextjs 기본부터 알아보자 1 (0) | 2023.03.06 |