프로젝트
오늘은 하루종인 프로젝트 기술발표 준비를 하고 녹화를 했다.
5분여의 불과한 시간의 발표지만, 정확한 정보를 이야기하고 싶어서 노력을 많이했다.
주제는 새로고침시 로그인 상태 유지였다.
추가에 오늘 준비한 대본을 첨부하겠다.
Dev Log
오늘은 어떻게 프로젝트에 기여했나요?
- 개인 기술발표 업로드
- XSS 보안 추가
오늘의 프로젝트에서 힘든 점은 무엇인가요?
- XSS와 CSRF에 대한 공부가 어려웠다.
내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- Main CSS 수정
- Main에 들어갈 동영상 녹화
추가
발표
안녕하십니까. 프로젝트 클라우디에서 프론트엔드 파트를 맡은 김민찬입니다.
제가 발표할 주제는 새로고침시 로그인 유지 입니다.
발표는 다음과 같은 순서로 진행하겠습니다.
로컬스토리지 첫만남
'이전' 프로젝트를 진행하면서 저희 팀은 클라이언트와 서버간의 통신을 마지막 삼 일간 진행 했었습니다.
그 결과 수많은 오류를 만나고, 그에 따라 밤을 지새우면서 해결했습니다.
로그인은 마지막에 확인하게 되었는데, 문제가 발생 하였습니다.
새로고침을 눌렀더니 로그인 정보가 다 사라져버린 것입니다.
이런 문제를 해결하는 방법을 찾아보다가 로컬스토리지에 대해서 알게 되었습니다.
당시에는 로그인 확인이 마지막 날이어서, 로컬스토리지에 대해 자세하게 서칭할 시간이 없이, 로컬스토리지에 대해 알자마자, 바로 로컬스토리지에 로그인정보를 저장을 해서 유저 정보 새로고침 문제를 해결했습니다.
그리고 이번 파이널 프로젝트에 들어오면서 새로고침시 로그인 정보 핸들링 경험이 있는 제가, 로그인 유지와 장바구니 유지를 맡게 되면서 저장소에 대해 더욱 공부하고 적용하기로 했습니다.
세 가지 후보
우선 세 가지 후보를 정했습니다.
바로 쿠키와 로컬스토리지와 그리고 세션스토리지입니다.
세션스토리지 제외 이유
가장 먼저 세션스토리지가 후보에서 제외되었습니다.
세션스토리지가 제외된 이유는 영구성이 없다는 것이었습니다.
저희는 계획단계부터 로그인정보와 비회원의 장바구니가, 브라우저를 종료하더라도 남아있기를 바랬습니다.
저희 프로젝트는 홀더 커스터마이즈 기능과 다양한 인센스 스틱이 있습니다.
비회원 유저가 장바구니만 담아놓고 나중에 접속했을때 자신이 저장해놓은 커스터마이즈가 사라진다면 구매 의욕이 떨어질것이라고 생각했기 때문입니다.
그래서 브라우저를 종료하면 저장정보가 사라지는 세션스토리지는 적합하지 않았습니다.
쿠키 vs 로컬 스토리지
이제 후보에는 쿠키와 로컬스토리지가 남았습니다.
장바구니는 로컬스토리지에 담는 것이 자명했습니다.
장바구니에 제품의 다양한 정보들이 담기기 때문에, 최대 4KB에 불과한 쿠키에 장바구니를 저장하기에는 부적절했습니다.
그리고 이제 남은 것은 유저정보입니다.
유저정보를 쿠키에 저장할지, 로컬스토리지에 저장할지 고민된 이유는 바로 토큰의 존재 때문입니다.
비밀번호를 스테이트에서 제외시켜 민감한 정보를 없앴다고 생각했지만, 토큰이 탈취되면 비밀번호를 탈취당한 거보다 더 위험할 수도 있겠다는 생각이 들었습니다.
그래서 가장 대표적인 두 가지 공격방법인 XSS공격과 CSRF공격에서 더 안전하다고 생각되는 방법을 선택하기로 했습니다.
다방면으로 서칭해본 결과 여러사이트에서 그리고 블로그에서의 의견이 모두 달랐습니다.
결론부터 말씀드리면 저는 로컬스토리지에 저장하기로 했습니다.
쿠키는 httpOnly 옵션을 적용하더라도 XSS 공격을 완벽히 막을 수 없지만 CSRF공격에 취약합니다.
반면에 로컬스토리지는 XSS 공격 보안만 신경쓰면 CSRF공격에서는 안전하기 때문입니다.
XSS 공격 보안
그래서 XSS공격을 막기 위해 두 가지 방법을 도입했습니다.
첫 번째 글자수를 제한 할 수 있는 곳들은, 글자수 제한을 두었습니다.
두 번째 정규표현식을 사용해서 클라이언트와 서버 두 곳에서 다음과같은 특수문자들의 (특수문자 <, >, (, ), ", ', = 등을) 사용을 금지시켰습니다.
이러한 방법으로 자바스크립트 삽입을 막아서 XSS 공격 보안을 신경썼습니다.
이상 발표를 마치겠습니다. 들어주셔서 감사합니다.
