프론트에서 안전하게 로그인 요청하기(feat. 리액트)

서론

클라이언트에서 안전하게 로그인을 요청하는 방법을 알려면 

다음의 세 가지를 먼저 이해해야 한다.

 

1. 로그인은 어떻게 이루어지나

2. 브라우저 저장소의 종류와 보안 이슈

3. 브라우저 저장소 별 장단점

 

---

로그인은 어떻게 이루어지나

1. 세션 id를 이용하는 방식

(1) 클라이언트에서 로그인을 시도하면 (2) 서버에서 세션을 생성한다. (3) 생성한 세션에서 세션 id를 클라이언트에게 보내주게 되면 (4) 클라이언트에서는 받아온 세션id를 브라우저에 저장한다. (5 )그 뒤 사용자 인증이 필요한 데이터 요청 때 서버에 세션 id 값을 보내면 (6) 서버는 그 id를 통해 세션을 불러와 유효한지 확인하는 방식으로 인증한다.  

2. JWT를 이용하는 방식(ft. refresh token, access token)

(1) 클라이언트에서 로그인을 시도하면 (2) 서버에서는 암호화가 가능한 어떤 데이터 패키지 안에 인증 정보를 담아주는데 이 패키지가 바로 JWT(JSON Web Token)이다.  JWT안에는 accessToken과 refreshToken이 유저인증에 사용되게 되는게 이 정보를 클라이언트는 브라우저에 저장해둔다.

 

브라우저 저장방식 별 장단점

우리는 로그인을 한 뒤로는 별도의 절차가 없이도 서비스를 사용할 수 있다. 이는 앞서말한 세션id나 토큰을 클라이언트에서 브라우저 어딘가에 저장해놓고, 사용자 인증이 필요한 순간 서버에 요청과 함께 보낸다.

그렇다면 이것들을 어디에 저장 할 수 있을까?

바로 localstorage와 cookie이다.

그럼 이 둘을 비교해보겠다.

 

localstorage의 장점

• Localstorage는 pure javascript로써 사용이 쉽다.

localstorage의 단점

• XSS 공격에 취약하다. 내 웹사이트에서 공격자가 javascript를 실행할 수 있을 때 발생한다. 즉, 공격자가 localstorage에 저장된 내 access token이나 세션 id를 탈취할 수 있다.

cookie의 장점

• localstorage만큼 XSS공격에 취약하지 않다. javascript로 접근이 불가능하기 때문이다. httpOnly나 secure옵션을 사용하면 내 쿠키는 javascript의 접근에 안전해진다.

cookie의 단점

• 쿠키는 4KB라는 제한 용량이 있다. 이 용량을 넘어서는 JWT토큰을 사용하면 못 쓴다.

사실 보안성을 높인 저장방식이 하나있다.

바로

secure, httpOnly 쿠키 저장 방식

• 쿠키에 저장하는 것은 똑같지만 javascript로 접근이 불가하다.

------여기부터 내용 추가 예정

정리

• 로그인하려면 서버로부터 세션id나 token을 받아올 수 있다.
• token에는 accessToken과 refreshToken이 담겨온다.
• localStorage에 저장하던지 cookie에 저장하던지 클라 맘대로. 근데 cookie 추천.