Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

로컬 스토리지에 사용자 자격 증명을 안전하게 저장하는 방법

로컬 스토리지(Local Storage)란?

로컬 스토리지는 여러 브라우저 창에 걸쳐 데이터를 공유하고, 현재 세션이 종료된 이후에도 정보를 지속적으로 보존할 수 있도록 설계된 웹 스토리지 기술입니다. 특히 웹 애플리케이션은 성능 향상을 위해 사용자가 작성한 문서 전체나 메일함 같은 수 메가바이트 규모의 사용자 데이터를 클라이언트 측에 저장해야 하는 경우가 많습니다.

하지만 로그인 아이디나 비밀번호 같은 민감한 자격 증명(credential)을 로컬 스토리지에 그대로 저장하면 XSS 공격 등에 의해 노출될 위험이 있습니다. 이를 방지하기 위한 안전한 저장 기법을 소개합니다.

안전한 자격 증명 저장 절차

1단계: 무작위 토큰 생성

사용자가 성공적으로 로그인하면, 실제 자격 증명과는 전혀 관련이 없는 완전히 무작위적인 문자열(토큰)을 생성합니다. 이 토큰은 추측이 불가능해야 하며, 충분히 긴 길이를 사용하는 것이 좋습니다.

2단계: 데이터베이스에 토큰과 만료일 저장

생성한 토큰을 서버 측 데이터베이스에 저장합니다. 이때 만료 날짜(expiry date)를 반드시 함께 기록해야 합니다. 만료일이 없으면 탈취된 토큰이 무기한 유효하게 되어 보안 위험이 커집니다.

3단계: 클라이언트에 토큰 전달 및 저장

발급된 토큰 문자열을 JavaScript로 전달하여 브라우저의 로컬 스토리지에 저장합니다. 중요한 것은 로컬 스토리지에 저장되는 값이 실제 아이디나 비밀번호가 아니라, 서버에서만 그 의미를 알 수 있는 임의의 토큰이라는 점입니다.

로그인 상태 검증 방식

이후 사용자가 사이트에 접속할 때마다 다음 두 가지 조건을 확인하여 로그인 상태를 판별합니다.

  • 로컬 스토리지에 저장된 토큰이 데이터베이스의 토큰과 일치하는가?
  • 토큰의 만료 시간(timeout)이 지나지 않았는가?

두 조건이 모두 충족되면 해당 사용자를 로그인 상태로 간주하면 됩니다.

보안상의 이점

이 방식을 사용하면 로컬 스토리지에는 실제 자격 증명이 아닌 무작위 토큰만 존재하므로, 설령 로컬 스토리지 내용이 유출되더라도 사용자의 계정 정보가 직접 노출될 위험이 없습니다. 추가적으로 주기적인 토큰 재발급, HTTPS 통신 강제, 짧은 만료 기간 설정 등을 함께 적용하면 더욱 견고한 인증 체계를 구축할 수 있습니다.