||
글. 정용욱(Eric) / 서비스웹개발팀
항공 프론트엔드 구축기: 토큰이 세 군데서 온다
안녕하세요. 서비스웹개발팀의 에릭입니다.
이번 편은 인증입니다. 토큰이 들어오는 길은 환경마다 다른데, 나가는 길은 하나로 모았습니다. 그 사이를 어떻게 메웠는지 적었습니다.
화면이 알고 싶은 건 하나입니다
예약 목록을 보려면 로그인이 필요합니다. 마이페이지도 그렇고, 쿠폰을 적용하는 것도 그렇습니다. 예약자 정보를 미리 채우려면 그 회원이 누구인지도 알아야 합니다.
화면 코드가 알고 싶은 건 결국 하나입니다. 지금 로그인한 사람이 누구인가.
const { isLoggedIn, myInfo } = useAuth();
그런데 이 한 줄에 답을 주려면 토큰이 필요하고, 토큰은 환경마다 다른 곳에서 옵니다. 웹에서는 쿠키에 있고, 앱 웹뷰에서는 앱이 갖고 있습니다.
앱이 갖고 있는 걸 웹이 가져오려면 지난 편의 브릿지를 지나야 합니다. 그러면 왕복이 생기고, 왕복에는 시간이 걸리고, 그동안 화면은 로그인 여부를 모릅니다.
화면마다 물어보면
가장 단순한 방법은 필요한 화면에서 각자 처리하는 것입니다. 그러면 이런 코드가 화면마다 생깁니다.
// 화면마다 반복되는 모양
if (isApp) {
const token = await 앱에서_토큰_가져오기();
const user = await 그_토큰으로_회원조회(token);
} else {
const user = await 쿠키로_회원조회();
}
세 가지가 걸립니다.
토큰이 화면 코드를 돌아다닙니다. 액세스 토큰은 들고 다니면 안 되는 값인데, 이렇게 하면 변수에 담기고 함수 인자로 넘어갑니다.
화면마다 기다리는 시점이 달라집니다. 어떤 화면은 렌더 후에 물어보고, 어떤 화면은 렌더 전에 물어봅니다. 로그인했는데 잠깐 비로그인 화면이 보이는 일이 화면마다 다르게 생깁니다.
앱 규약이 화면으로 옮겨옵니다. 7편에서 브릿지 뒤로 밀어 넣었던 게 다시 올라옵니다.
다른 방법도 생각할 수 있습니다.
앱에서 받은 토큰을 클라이언트가 들고 다니는 방법. 한 번 받아서 메모리나 스토리지에 두고, API를 부를 때마다 헤더에 붙이는 방식입니다. 앱과 웹을 같은 방식으로 맞출 수 있습니다.
문제는 방향이 반대라는 것입니다. 웹은 이미 쿠키로 잘 되고 있고, 그 쿠키는 JS가 읽을 수 없게 막아 둘 수 있습니다. 굳이 토큰을 꺼내서 JS가 만질 수 있는 곳에 두는 건 후퇴입니다. 앱을 맞추려고 웹을 낮추는 셈입니다.
무엇이 후퇴냐면, 액세스 토큰은 그 자체가 신분증이기 때문입니다. 값만 있으면 누구든 그 사람으로 행동할 수 있고, 만료되기 전까지 서버는 진짜와 구분하지 못합니다.
쿠키는 JS가 읽지 못하게 막아 둘 수 있는데, 막아 두더라도 요청에는 자동으로 실려 갑니다. 읽히지는 않으면서 쓰이기는 하는 자리입니다. 스토리지나 메모리는 그렇지 않습니다. 헤더에 붙이려면 JS가 먼저 값을 읽어야 하니, 토큰을 쓰는 코드는 반드시 값을 알게 됩니다.
값을 아는 코드가 생기면 나가는 길도 같이 생깁니다. 광고 스크립트든 외부 라이브러리든 페이지에서 도는 코드는 전부 같은 JS 세계에 있어서, 그중 하나만 잘못 들어와도(XSS) 읽어 갈 수 있습니다. 우리가 짠 코드도 예외는 아닙니다. 로그에 찍히거나 에러 리포팅에 실려 나가는 것도 값을 아는 코드에서만 일어나는 일입니다. 막아 둔 쿠키에는 그 경로가 아예 없습니다.
웹용과 앱용 인증을 따로 만드는 방법도 있습니다. 각자 자기 방식대로 하고, 화면은 둘 중 하나를 쓰는 겁니다. 그런데 그러면 화면이 어느 쪽을 쓸지 골라야 합니다. 6편에서 컨테이너를 둘로 쪼개려다 접었던 것과 정확히 같은 자리입니다. 고르는 일이 남으면 감춘 게 아닙니다.
들어오는 문은 셋입니다
실제로 토큰이 오는 경로를 세어 보면 셋입니다.
하나, 쿠키. 웹입니다. 그런데 이쪽은 브라우저가 하는 일이 거의 없습니다.
서버가 화면을 그리기 전에 쿠키를 읽고, 그 토큰으로 회원 정보를 조회하고, 결과를 화면에 붙여서 내려보냅니다. 1편에서 라우트 파일의
항공 프론트엔드 구축기 (8/10): 토큰이 세 군데서 온다
생성 일시
2026/09/10 01:06
최종 편집 일시
2026/09/10 01:06
태그
여기어때
파일과 미디어