본문 바로가기
프론트엔드/React

유저기능 - 인증 / 인가

by 학습하는 청년 2024. 6. 17.

최종 수정 : 2024-06-17

유저기능

인증과 인가를 합친 것을 통칭하여 말한다.

 

인증(Authentication)

클라이언트와 서버는 인증서를 사용해서 리퀘스트를 보낸 유저가 누구인지 파악한다. 서버가 리퀘스트를 보낸 유저가 누구인지 파악하는 것을 '인증'이라고 하며, 이 인증서에는 두 가지 종류가 있다. 작동하는 원리에 따라 각각 세션과 토큰이라고 부른다. 세션을 사용하면 세션 기반 인증, 토큰을 사용하면 토큰 기반 인증이라고 한다. 

 

# 쿠키 인증

쿠키(Cookie)란 이름-값 쌍, 속성으로 구성되어 있으며 서버 리스폰스나 클라이언트 코드에 따라 브라우저에 저장되는 작은 단위의 문자열 파일들을 말한다. 속성에는 서버에서 정한 만료일이나 보안 설정 등 다양한 내용들이 담겨 있다.

 

서버 리스폰스의 Set-Cookie를 통해서 문자열 인증서를 쿠키로 저장하고 리퀘스트에 저장한 쿠키를 추가해서 전송하는 부분은 따로 코드를 작성하지 않아도 브라우저에서 자동으로 해준다. 덕분에 클라이언트 입장에서는 비교적 편리하게 인증을 구현할 수 있다. 이처럼 서버에서 리스폰스의 Set-Cookie 헤더를 통해 클라이언트에 인증서를 저장하고 리퀘스트의 Cookie 헤더를 통해 이것을 다시 서버로 보내는 인증 방식을 쿠키 인증이라고 한다.

 

쿠키

유저 인증뿐만 아니라 브라우저 이용자에 대한 개인화된 기능과 데이터 제공 수단으로 사용할 수 있다. 로그인을 하지 않아도 검색 기록이 저장되거나, 쇼핑 카트를 사용할 수 있거나, 한 번 설정한 라이트와 다크 테마도 유지되는 경우들이 이에 해당한다. 하지만 다른 사람이 쿠키를 가로채거나 악용한다면, 보안 문제가 생길 수 있다. 이러한 보안 문제를 줄일 수 있는 설정들을 살펴보자.

 

1) Secure 설정

서버에서 리스폰스를 보낼 때 이 설정을 추가해 주면 HTTP보다 보안에 강한 HTTPS를 사용할 때만 클라이언트에서 서버로 쿠키가 보내진다. HTTPS를 사용하면 항상 리퀘스트와 리스폰스가 암호화되기 때문에 눅누가 중간에 리퀘스트를 가로챘을 때 정보 유출을 줄일 수 있다.

 

리스폰스 Set-Cookie 헤더에 이름-값 쌍 뒤 ; 과 Secure 키워드를 사용해 적용할 수 있다.

Set-Cookie: cookie_name=cookie_value; Secure;

 

2) HttpOnly

이 설정을 추가하면 클라이언트가 자바스크립트 코드로 해당 쿠키에 접근할 수 없게 된다. 자바스크립트 코드로는 가지고 올 수 없고, 그냥 쿠키를 설정한 웹사이트에 리퀘스트로 보낼 수만 있다. 코드로 쿠키에 접근할 수 없기에 개인 정보에 직접 접근하는 것을 막을 수 있는 것이다. 하지만 떄에 따라서 코드로 저장한 쿠키에 접근할 있기에 필요에 따라서 사용하면 된다.

 

리스폰스 Set-Cookie 헤더에 이름-값 쌍 뒤 ; 과 HttpOnly 키워드를 사용해서 적용할 수 있다.

Set-Cookie: cookie_name=cookie_value; Secure; HttpOnly;

 

3) SameSite

Cross site request forgery의 약자,  CSRF(또는 XSRF)라는 공격을 예방할 수 있는 설정이다.

 

CSRF는 일반 사이트 A와 악의적 사이트 B가 있을 때, B 웹 페이지에서 브라우저에 저장된 쿠키를 가지고 사이트 A 서버로 리퀘스트를 보내는 공격을 말한다. 이 문제는 SameSite 설정을 사용하면 예방할 수 있다.

 

SameSite는 Strict로 하면 다른 도메인에서 리퀘스트를 보낼 때 쿠키가 가는 걸 아예 방지할 수 있다. 즉, 리퀘스트를 보내는 클라이어늩와 이걸 받는 서버의 도메인이 서로 같을 때만 쿠키가 간다. 예를 들어 changeyourpassword.com이란 페이지에서 facebook.com으로 리퀘스트를 보낼 때는 가지 않는다.

 

하지만 이메일이나 메시지, 심지어 다른 페이지에 있는 링크를 통해서도 페이지에 접근하는 상황에도 쿠키가 가지 않는 문제가 생긴다. 다시 말해, URL에 직접 facebook.com을 치면 저장돼있던 쿠키가 가지만, 친구가 메시지로 보낸 링크를 통해 페이지를 방문할 때는 쿠키가 가지 않아서 다시 로그인을 해야 한다. 보안을 위해 이렇게 되길 원한다면 상관없지만, 인증 정보처럼 민감한 정보가 아닐 때는 과한 조치일 수 있다.

 

이럴 때 사용하는 설정이 Lax이다. '느슨한' 이라는 뜻이 있는 것처럼 이 설정을 하면 링크를 통해 사이트를 직접 방문할 때는 쿠키가 보내진다.

 

SameSite 설정을 None으로 하면 아무런 제한 없이 브라우저에서 보내는 모든 리퀘스트에 쿠키가 붙어서 간다. None으로 할 때는 보안 문제 때문에 항상 Secure 설정을 추가해야 한다. 추가하지 않을 경우에는 특정 브라우저들은 보안이 취약하다고 판단하고 쿠키를 저장하지 않는다.

 

SameSite 설정은 리스폰스 Set-Cookie 헤더에 이름-값 쌍 뒤 ; 과 SameSite 키워드, 그리고 원하는 쿠키 사용 범위 키워드, None, Lax, Strict를 사용해서 적용할 수 있다.

Set-Cookie: cookie_name=cookie_value; Secure; HttpOnly; SameSite=Lax;

 

# 세션 기반 인증

세션이란 서버가 저장하는 사이트 방문자들에 대한 기록을 말한다. 

 

 

# 토큰 기반 인증

인증 토큰이란 걸 사용해서 리퀘스트를 보낸 유저를 파악한다. 인증 토큰은 유저에 대한 정보를 암호화한 문자열을 말한다. 서버에 보내서 유저가 특정 기능이나 콘텐츠에 접근할 수 있게 해주기 때문에 Access, 접근 토큰이라고도 부른다. 인증 토큰을 사용하면 서버는 세션과 같이 유저의 로그인 상태를 저장해놓고 리퀘스트가 올 때마다 저장 및 확인하지 않고도 리퀘스트를 보낸 유저를 알 수 있다. 토큰 자체를 해석해서 사용하면 되기 때문에 가능한 일이다.

 

토큰에는 여러 종류가 있지만 JWT(JSON Web Token) 형식을 많이 사용한다.

 

 

인가(Authorization)

 

헤더 인증 장점

1) 리퀘스트에 인증서를 붙일지 안 붙일지 선택 가능

2) 서로 다른 루트 도메인 사이에서 인증 가능

 

유의해야 할 점 : 비밀번호 같이 민감한 정보는 쿠키나 로컬 스토리지에 절대 저장하지 않는다. 

'프론트엔드 > React' 카테고리의 다른 글

React Query의 캐시  (0) 2024.07.22
React Query  (0) 2024.07.22
useRef()  (0) 2024.06.17
useState()  (0) 2024.06.17
리액트 훅(Hooks)과 커스텀 훅(Custom Hooks)  (0) 2024.06.17

댓글