로컬스토리지 토큰 저장 시 보안문제
안녕하세요 선생님
supabase의 회원가입 기능을 사용하여 가입한 경우 자동으로 로컬스토리지에 토큰정보들이 저장이 되는 부분에서 이 부분들이 보안적으로 문제가 되지 않나요?? supabase를 사용하는 실무에서 이러한 문제를 어떤식으로 보통 해결하나요?
답변 2
0
안녕하세요 박선우님 이정환입니다.
우선 말씀하시는 보안적인 문제가 혹시 어떤 부분에서 발생하는건지 구체적으로 알 수 있을까요? 보안적인 문제의 종류에 따라 해결책과 대응 방법이 각각 다 다르기 때문에 답변에 앞서 말씀해주신 보안 문제가 구체적으로 어떤 것인지 궁금합니다.
아! 물론 Local Storage에 저장하는 경우, 스크립트 기반 공격(XSS 등)을 통해 토큰이 탈취될 수 있다는 보안상의 우려가 있는건 사실입니다. 이에 HTTPOnly 쿠키를 사용하는 방식이 상대적으로 더 안전한 선택이 된다고 알려져있기도 합니다.
다만 React.js는 기본적으로 XSS 공격을 방지하는 설계가 적용되어 있습니다. 예를 들어, JSX로 문자열을 렌더링할 경우 내부적으로 textContent를 사용하기 때문에, 악성 스크립트가 자동으로 실행되지 않습니다. 즉, 개발자가 dangerouslySetInnerHTML을 직접 사용하거나, 외부 입력을 검증 없이 그대로 DOM에 삽입하는 등의 명백한 실수를 하지 않는 한, React 자체만으로도 대부분의 XSS 공격은 방어할 수 있습니다.
또 Supabase처럼 클라이언트 중심의 인증 구조를 사용하는 서비스의 경우, 서버가 존재하지 않기 때문에 HTTPOnly 쿠키를 설정하거나 읽을 수 있는 환경이 아닙니다. 따라서 이 경우에는 로컬 스토리지를 사용하는 방식이 구조적으로 더 적합합니다.
실제로 앞서 말씀드렸듯이 Supabase의 공식 문서나 클라이언트 초기화 예제에서도, 토큰을 localStorage에 저장하고 이를 바탕으로 인증 상태를 유지하는 방식을 사용하고 있습니다.
또한, SPA(Single Page Application) 환경에서는 새로고침 후에도 로그인 상태를 유지하거나 자동 로그인을 구현해야 하는 UX 측면에서, Local Storage가 더 나은 선택지가 되는 경우도 많습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 박선우님.
Supabase를 사용하여 회원가입 후 토큰 정보가 로컬스토리지에 자동으로 저장되는 것에 대한 보안 우려는 충분히 공감할 수 있는 부분입니다. 로컬스토리지는 XSS(교차 사이트 스크립팅)와 같은 공격에 노출될 가능성이 있기 때문입니다.
로컬스토리지의 보안 문제와 대책
XSS 공격 방지:
- XSS 공격을 피하기 위해서는 애플리케이션 내 입력값을 안전하게 처리해야 합니다. React와 같은 프레임워크는 기본적으로 일정 수준의 XSS 방어를 제공합니다.
- XSS 공격을 피하기 위해서는 애플리케이션 내 입력값을 안전하게 처리해야 합니다. React와 같은 프레임워크는 기본적으로 일정 수준의 XSS 방어를 제공합니다.
Secure Cookie 사용:
- 실무에서는 HTTPOnly 쿠키를 사용하여 토큰을 저장하는 것이 더 안전한 방법으로 간주됩니다. HTTPOnly 속성을 사용하면, JavaScript로 쿠키를 조작할 수 없어 악성 스크립트가 토큰을 가로채기 어렵습니다.
- 실무에서는 HTTPOnly 쿠키를 사용하여 토큰을 저장하는 것이 더 안전한 방법으로 간주됩니다. HTTPOnly 속성을 사용하면, JavaScript로 쿠키를 조작할 수 없어 악성 스크립트가 토큰을 가로채기 어렵습니다.
토큰 저장 방식 변경:
- 로컬스토리지를 사용하지 않는 대안으로 메모리에 토큰을 저장하는 방식이 있습니다. 이렇게 하면 브라우저가 닫힐 때마다 토큰이 사라지므로 안전하지만, 사용자 경험 측면에서 불편함이 있을 수 있습니다.
- 로컬스토리지를 사용하지 않는 대안으로 메모리에 토큰을 저장하는 방식이 있습니다. 이렇게 하면 브라우저가 닫힐 때마다 토큰이 사라지므로 안전하지만, 사용자 경험 측면에서 불편함이 있을 수 있습니다.
토큰의 짧은 수명:
- 토큰의 유효기간을 짧게 설정하고, 주기적으로 토큰을 갱신하도록 설계하는 방법도 있습니다. 이와 함께 만료된 토큰을 자동으로 갱신하는 로직도 함께 구현하면 보안성을 높일 수 있습니다.
- 토큰의 유효기간을 짧게 설정하고, 주기적으로 토큰을 갱신하도록 설계하는 방법도 있습니다. 이와 함께 만료된 토큰을 자동으로 갱신하는 로직도 함께 구현하면 보안성을 높일 수 있습니다.
실무에서의 대안
- Supabase 또는 다른 클라우드 기반 플랫폼을 사용할 때 보안 강화를 위해 백엔드서버를 통한 OAuth2 등을 구현하여 사용자 인증을 처리하고, JWT 등을 보관할 때는 HTTPOnly 쿠키에 저장하는 것이 권장됩니다.
- 이러한 구현에는 추가적인 서버 설정이 필요할 수 있지만, 사용자 데이터 보호 측면에서 매우 유용합니다.
관련 질문 URL
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
useMutation 적용 후 새로운 글 등록시 content가 안보여요
0
32
2
6.8 zustand 세션 질문입니다.
0
74
2
next.js 강의에서도 리액트 라이브러리들을 다뤄주시나요?
0
60
2
shadcn에서 radix ui와 base ui 차이는 뭔가요?
0
215
2
updateTodo 함수 생성시 화살표 함수 사용 안하는 이유
0
63
2
4.11 바로 투두 삭제가 안됨 질문
0
75
3
매개변수 updatedTodo 관련 질문
0
57
3
인증 정보가 만료되었을 때 라우트 가드 처리가 궁금합니다!
0
73
2
supabase를 사용하지 않을 경우 세션 데이터의 변경을 감지하고 스토어에 보관하는 방법이 궁금합니다!
0
60
2
4.6 id를 string으로 변경시 오류
0
55
2
리액트 타입스크립트 관련 질문있습니다.
0
54
1
소셜 로그인 구현하기 관련하여 질문이 있습니다!
0
88
2
ui 파일 질문드립니다.
0
65
1
tanstack query devtools에서 질문있습니다!
0
58
2
댓글 삭제 시 isPending 질문
0
56
2
두번째 예외상황에 대해 질문있습니다!
0
56
1
리액트 쿼리 질문입니다
0
57
2
개발자도구에서 components 가 안보입니다.
0
81
3
state 관리에 대한 정리
0
70
3
[(2.4) Shadcn/ui를 소개합니다] 강의 Shadcn 세팅 관련 질문 있습니다.
0
150
3
like 테이블에서 왜 create_at이 필요한지 궁금합니다.
0
67
1
삭제가 바로 안되네요ㅠ
0
56
2
access 토큰은 꼭 소셜서버로부터 받아서 사용해야만하나요?!
0
72
2
전역 모달이 여러 개일 경우 모달 프로바이더는 몇 개가 필요한가요?
0
56
1