서버 사이드 렌더링(SSR) 및 JWT 인증 방식

서버 사이드 렌더링의 장점

 

렌더링이란 웹페이지가 서버에

요청해서 받은 내용(ex. HTML 파일)을
브라우저 화면에 표시하는 것을 말합니다.

서버 사이드 렌더링(SSR)은
사용자가 페이지를 이동할 때마다 새로운 페이지를 요청하여
모든 템플릿을 서버 연산을 통해 렌데링하고
완성된 페이지 형태로 응답합니다.

클라이언트 사이드 렌더링이 빈 HTML 페이지를 받아
브라우저에서 그리는 것과 다르게
서버 사이드 렌더링은 서버에서 미리 그려서 브라우저로 보내주기 때문에
페이지를 그리는 시간, 즉 초기 로딩 속도를 단축할 수 있습니다.

자바스크립트 파일을 불러오고 렌더링 작업이 완료되기 전에
사용자가 사이트 컨텐츠를 이용할 수 있게 되므로,
화면에 사용자에게 유의미한 정보가 표시되는 시간이 빨라집니다.

또한, 웹 페이지 검색엔진이 자료를 수집하고
순위를 매기는 방식에 맞게 웹 페이지를 구성해서
검색 결과의 상위에 나올 수 있게 하는
검색 엔진 최적화(SEO)가 가능하다는 장점이 있습니다.

JWT 인증 방식 및
쿠키/세션 대비 JWT의 장점

 

먼저 쿠키란 클라이언트가 어떠한 웹사이트를 방문할 경우,
그 사이트가 사용하고 있는 서버를 통해
클라이언트의 브라우저에 설치되는
작은 기록 정보 파일을 일컫습니다.

쿠키를 통해 클라이언트 로그인 상태를 유지할 수 있지만,
쿠키가 유출 및 조작 당할 위험이 존재한다는 단점이 있습니다.


세션은 일정 시간 동안
같은 사용자(브라우저)로부터 들어오는 일련의 요구를
하나의 상태로 보고, 그 상태를 유지하는 기술입니다.

여기서 일정 시간은
방문자가 웹 브라우저를 통해 웹 서버에 접속한 시점부터
웹 브라우저를 종료하여 연결을 끝내는 시점을 말합니다.
즉, 방문자가 웹 서버에 접속해 있는 상태를
하나의 단위로 볼 때, 이 단위를 세션이라고 합니다.

쿠키와 달리 세션은 비밀번호 등 클라이언트의 인증 정보를
쿠키가 아닌 서버 측에 저장하고 관리합니다.

쿠키를 포함한 요청이 외부에 노출되더라도
세션 ID 자체는 유의미한 개인정보를 담고 있지 않아
보안에 강하지만,
해커가 이를 중간에 탈취하여
클라이언트인 척 위장할 수 있다는 한계가 존재합니다.


JWT(Json Web Token)은
인증에 필요한 정보들을 암호화 시킨 토큰을 말합니다.
JWT는 Header, Payload, Signature라는
세 가지 문자열의 조합으로 만들어지며,
각 문자열은 .을 구분자로 하여 나누어집니다.

Header는 alg과 typ는 각각 정보를 암호화 할
해싱 알고리즘 및 토큰의 타입을 지정합니다.

Payload는 토큰에 담을 정보를 지니고 있으며,
주로 클라이언트의 고유 ID 값 및 유효 기간이 포함됩니다.

Signature는 인코딩된 Header와 Payload를 더한 뒤
비밀키로 해싱하여 생성합니다.

Header와 Payload는 단순히 인코딩된 값이기 때문에
제 3자가 복호화 및 조작할 수 있지만,
Signature는 서버 측에서 관리하는 비밀키가
유출되지 않는 이상 복호화할 수 없습니다.
따라서 Signature는 토큰의 위변조 여부를 확인하는데 사용됩니다.

JWT는 Header와 Payload를 가지고
Signature를 생성하므로
데이터 위변조를 막을 수 있어 보안에 강합니다.

쿠키/세션 대비 JWT 인증 방식은 여러 장점이 있습니다.

세션은 클라이언트 인증 정보를 저장하기 위해
서버에서 세션 저장소를 사용하지만,
JWT는 인증 정보에 대한 별도의 저장소가 필요하지 않아
서버를 무상태로 만듭니다.

쿠키는 웹 브라우저마다
쿠키에 대한 지원 형태가 다르기 때문에
브라우저 간 공유가 불가능하지만,
JWT는 토큰 기반으로
다른 로그인 시스템에 접근 및 권한 공유가 가능합니다.
OAuth의 경우, Facebook이나 Google 등
소셜 계정을 이용하여
다른 웹서비스에단서도 로그인을 할 수 있습니다.

JWT는 토큰에 대한 기본 정보, 전달할 정보,
그리고 토큰이 검증됐음을 증명하는 서명 등
필요한 모든 정보를 자체적으로 지니고 있습니다.

또한 확장성이 우수하고,
모바일 어플리케이션 환경에서도 잘 동작합니다.