프리온보딩 FE 세션, 쿠키(3)

 

오늘 프리온보딩 FE  주제는 세션이었다.

 

세션이란 무엇인가?

• 데이터 저장 방식?
• 통신 프로토콜?
• 인증 방법론
• 암호화 방식?

jwt토큰 때 얘기했을 때처럼 애플리케이션에서 사용자의 정보를 필요로 하는 기능에서

사용자인지 , 사용자의 정보를 확인하기 위해 사용했듯이 세션도 똑같은 느낌이다

 

로그인에서 세션이란?

사용자의 로그인 이후 로그아웃 혹은 로그인 만료까지의 기간

 

세션 방식 로그인?

사용자 로그인이 유효한 시간 동안 서버에 세션 아이디를 기록해 두고 인증에 사용하는 방식

 

네트워크? 부문에서 세션이란?

영구적이고 상호작용적인 정보 교환을 전제하는 둘 이상의 통신 장치나 컴퓨터와 사용자 간의 대화나 송수신 연결상태를 의미하는 보안적인 다이얼로그(dialogue) 및 시간대를 가리킨다 즉 클라이언트와 서버 간의 연결 상태라고 함!?

 

세션 방식의 로그인을 구현하기 위해서는 클라이언트의 저장소인 로컬 스토리지, 세션 스토리지, 쿠키 중

쿠키를 통해 구현한다고 한다

 글을 쓰다 생각해 보니 예전에 브라우저 저장소에 대해 정리해 놓은 글이 있었다.
. https://zoon-bloom.tistory.com/73

브라우저 저장소

쿠키는

HTTP의 무상태성이라는(stateless) 성질 때문에 Cookie는 생성된 이후부터 모든 웹 요청의 헤더에 담겨 서버로 전송하며

 (통신이 끝나면 상태정보를 저장하지 않는 무상태성 때문에 정보 저장 및 사용자를 식별하기 위해서는 매번 전송해야 함 )

쿠키를 사용하여 별도의 인증과정을 거치지 않고 서버에서 사용자를 인증할 수 있다.

 

하지만 해커나, 다른 공격자에 의해 쉽게 변조될 수 있고 보안적인 문제가 있다고 한다?
(Cross-site 스크립팅 (XSS)) 공격?) 그럼 문제를 방지하기 위해, http only를 설장하는 방법을 사용해야 한다

HTTP Only Cookie를 설정하면 브라우저에서 해당 쿠키로 접근할 수 없게 되어 다른 Cross-site 공격을 차단하고

브라우저에서 즉 프런트 측에서도 접근이 불가능하게 된다

강의에서는 애초에 mdn 사이트에서 쿠키에 대해 접근하는 것을 권장하지 않는다고 설명되어 있다고 하여 이 부분은

참고하면 좋을 것 같다.

 

또한 Cross-site 공격 외에 네트워크를 통해 쿠키를 탈취할 수도 있다고 하는데 이 문제를 위해 쿠키에 Secure 옵션을

설정해서 SSL ({Over} Secure Socket Layer) 암호화가 적용된 HTTPS 프로토콜을 사용하여 데이터를 암호화하여 서버에 넘겨주면   해커들은 쿠키를 탈취하였다고 하여도 암호화가 되어 있어 정보를 알아낼 수 없다고 한다.

https를 통해 서버와 브라우저의 연결과정

1. 클라이언트(브라우저)가 서버로 최초 연결 시도를 함
2. 서버는 공개키(엄밀히는 인증서)를 브라우저에게 넘겨줌
3. 브라우저는 인증서의 유효성을 검사하고 세션키를 발급함
4. 브라우저는 세션키를 보관하며 추가로 서버의 공개키로 세션키를 암호화하여 서버로 전송함
5. 서버는 개인키로 암호화된 세션키를 복호화하여 세션키를 얻음
6. 클라이언트와 서버는 동일한 세션키를 공유하므로 데이터를 전달할 때 세션키로 암호화/복호화를 진행함

 

jwt vs Session

JWT의 장점과 단점

• 서버/백엔드 비용 감소
• 프런트엔드 복잡도 높아짐
• 보안상 세션보다 조금 더 위험

세션의 장점과 단점

• 동시접속자 수
• 서비스 규모
• 앱/웹 동시운용
• 여부 팀 내 인력구성
• 일정

강의 jwt와 session 중에 어떤 것을 더 많이 사용한다는 문제에도 정답은 없다고 한다

경우에 따라 다르며 확실히 jwt는 편하지만 보안적인 문제가 있고 session은 좀 더 안전하지만

시간과 돈이 들어간다는 문제가 있는 것 같다.

 

오늘 강의는 컨디션이 안 좋아 실습도 집중도 완전 망이었다. 

제일 기억나는 건 결국 jwt 건 session 이건  문제 생기면 프런트엔드가 할 수 있는 건 거의 없다는 거?

아무것도 하기 싫다는 기분 때문인지 이 부분은 인상 깊었다 

 

참고 블로그 : https://theheydaze.tistory.com/550

https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies

https://mangkyu.tistory.com/98