프로젝트를 마무리 한 후, 회고를 하라는 조언을 들었습니다. 유저들로부터 개선방향을 들었고, 이를 반영하고자 하였습니다.
플랫폼 Web, Chrome Extension
개발인원 6명
개발 기간 2025-01-06~2025-02-21 (7주)
담당역할 컨테이너 모니터링 시스템 구축(기여도 100%)
VUE 전역 관리 스토어 설계(기여도 50%)
유저 페이지 구현(기여도 50%)
프론트엔드 전역 인터셉터 구현(기여도 100%)
Navigation Guard로 예외처리(기여도 100%)
JIRA 스프린트를 시작할 때에는, 일주일치 이슈를 설정하고 시작하기
매일매일 이슈를 추가하니 번다운 차트가 이상적인 우하향을 그리지 않았습니다.
https://www.youtube.com/watch?v=OfSdOV68q54
프로젝트 공식 기간 이후 유저 피드백을 받을 때 간단한 문제들이 발생했었습니다.
문제 발생
프로젝트의 질적인 부분에서 예외처리를 확인하는데 크게 두 가지 문제가 발생했습니다.
- (유저피드백) 익스텐션 로그인이 자주 풀려서 불편하다.
- 로그인 했다 로그아웃 한 후 마이페이지 링크를 검색창에 쳐도 그대로 들어가지는 문제가 발생했습니다.
해결방법
1번은 구글로 로그인 한 경우 토큰 유효기간 설정을 짧게 해놓아서 길게 수정했습니다.
6백만L 는 1시간 40분이고, 이를 7일로 늘려주었습니다.
2번은 프론트 라우터에서 isLoggedin 같은 변수를 넣어서 localStorage에 넣어놓은 토큰을 확인하는 방식으로 확인해야할 것 같습니다.
팀원이 meta.requiresAuth로 네비게이션을 도입하려 했던 흔적이 보이길래 그대로 활용하여,
라우팅되기전에 beforeEach를 설정하여 로컬스토리지에 토큰이 없으면 /login으로 라우팅되게 하였습니다.
토큰이 있으면, 원래 가고자 하려했던 곳으로 가게 하였습니다.
그러나, HttpOnly 쿠키가 아닌 localStorage 방식은 XSS 공격에 취약하다고 합니다. 다음 프로젝트인 핀테크 프로젝트인 만큼, 보안에 더 신경을 쓰는 개발을 진행하도록 하겠습니다.
핀테크 프로젝트 시작
핀테크 프로젝트를 하게 되다보니 보안에 대한 고민을 시작하게 되었습니다. WebDRM으로 개발자도구의 접속을 차단하는 방법도 고민했습니다.
기사를 보면 생각보다 많은 시중 서비스들이 고객의 데이터를 털리거나 하는 보안문제가 많이 발생함을 알 수 있습니다.
nginx proxy manager에서 지원하는 HSTS 등 보안에 대해 잘 몰랐고, 보안의 필요성에 대해 느껴 HSTS 정책과 XSS 공격에 대해 알아 보겠습니다.
XSS 란?
Cross-site scripting(XSS)은 공격자가 하나 이상의 웹 스크립트를 통해 악성 코드를 합법적인 웹 사이트 또는 웹 앱에 삽입하는 전술입니다.
사용자가 웹 사이트를 로드하거나 웹 앱을 실행하면 이러한 스크립트가 사용자의 브라우저 내에서 실행됩니다.
XSS 공격의 예시:
- 세션 탈취: 사용자가 로그인된 상태에서 악성 스크립트가 실행되면, 공격자는 사용자의 세션 쿠키를 훔쳐서 사용자의 권한을 빼앗을 수 있습니다.
- 피싱 공격: 악성 스크립트를 사용해 사용자의 입력을 가로채거나, 로그인 페이지처럼 보이는 페이지를 만들어 사용자가 개인정보를 입력하도록 유도합니다.
공격 예시를 보면, 보안이 중요한 핀테크 서비스에는 필수적으로 XSS공격을 방어해야함을 알 수 있습니다.