로컬 스토리지란 무엇인가?
로컬 스토리지(Local Storage)는 여러 브라우저 창에 걸쳐 공유되며, 현재 세션이 종료된 후에도 데이터가 유지되도록 설계된 클라이언트 측 저장소입니다. 특히 웹 애플리케이션은 성능상의 이유로 사용자가 작성한 문서 전체나 사용자의 메일함 같은 수 메가바이트(MB) 규모의 사용자 데이터를 클라이언트 측에 저장해야 할 수 있습니다.
자격 증명을 로컬 스토리지에 저장하는 올바른 절차
로컬 스토리지에 자격 증명을 저장할 때는 다음 단계를 따르는 것이 안전합니다.
1단계: 무작위 토큰 생성
로그인에 성공하면 사용자의 실제 자격 증명(ID, 비밀번호 등)과는 전혀 관련이 없는 완전히 무작위적인 문자열(토큰)을 생성합니다.
2단계: 서버 측 저장 및 만료일 설정
생성한 토큰을 데이터베이스에 저장하고, 반드시 만료일(expiry date)을 함께 기록합니다. 만료일을 설정하지 않으면 토큰이 무기한 유효해져 보안 위험이 커집니다.
3단계: 클라이언트에 토큰 전달 및 저장
해당 문자열을 JavaScript로 전달하여 로컬 스토리지에 저장합니다. 이때 실제 비밀번호가 아닌 토큰만 저장된다는 점이 핵심입니다.
로그인 상태 검증 방식
이후 사용자가 사이트에 방문할 때마다 로컬 스토리지에 저장된 토큰이 데이터베이스의 토큰과 일치하는지, 그리고 만료 시간이 지나지 않았는지를 확인합니다. 두 조건이 모두 충족되면 해당 사용자를 로그인 상태로 간주합니다.
보안상의 이점
이러한 방식을 사용하면 로컬 스토리지에는 실제 자격 증명이 아닌 일회성 토큰만 저장되므로, 로컬 스토리지가 노출되더라도 사용자의 원래 자격 증명이 유출될 위험이 없습니다.
다만 로컬 스토리지는 JavaScript를 통해 접근 가능하므로, XSS(교차 사이트 스크립팅) 공격에 대비한 입력 값 검증과 출력 인코딩 등 기본적인 웹 보안 조치를 함께 적용하는 것이 좋습니다.