Inflearn コミュニティ Q&A

안녕하세요 TAESUN님,

질문 주신 res.cookie 설정에서 httpOnly: true 옵션은 웹 보안, 특히 사용자 인증 정보를 다룰 때 가장 핵심이 되는 방어 기제 중 하나이기에 그 원리를 깊이 이해하고 넘어가는 것이 좋습니다.

우선 TAESUN님께서 언급하신 ‘브라우저 쿠키’와 ‘클라이언트 사이드 스크립트 쿠키’가 별개의 저장소나 다른 종류의 쿠키를 의미하는 것은 아니라는 점을 먼저 짚고 넘어가야 하는데, 이는 동일한 쿠키 저장소에 위치하지만 자바스크립트를 통한 ‘접근 권한’이 있느냐 없느냐의 차이로 이해하시는 것이 정확합니다. 기본적으로 브라우저 콘솔에서 document.cookie를 입력했을 때 조회가 가능한 쿠키들은 자바스크립트로 언제든지 값을 읽거나 탈취할 수 있는 상태인데, httpOnly: true 옵션을 붙여서 서버가 쿠키를 내려주게 되면 브라우저는 이 쿠키를 저장하되 document.cookie와 같은 자바스크립트 명령어로 조회하는 것을 기술적으로 차단하게 되며 오직 HTTP 통신(서버로 요청을 보낼 때) 상에서만 이 쿠키를 포함시켜 전송하게 됩니다.

우리가 이렇게까지 자바스크립트의 접근을 막으려 하는 가장 큰 이유는 바로 XSS(Cross Site Scripting)라고 불리는 교차 사이트 스크립팅 공격 때문입니다. 만약 해커가 게시판이나 댓글 등을 통해 악성 자바스크립트 코드를 웹페이지에 심어놓는 데 성공했다고 가정했을 때, 일반적인 사용자가 그 페이지에 접속하여 해당 스크립트가 실행되는 순간 해커는 사용자의 브라우저 저장소에 접근할 수 있게 됩니다. 이때 로그인 토큰이 담긴 쿠키에 자바스크립트 접근이 허용되어 있거나 혹은 자바스크립트로 접근이 매우 자유로운 로컬 스토리지(LocalStorage)나 세션 스토리지(SessionStorage)에 토큰을 저장해 두었다면, 해커는 아주 손쉽게 사용자의 인증 토큰(JWT 등)을 탈취하여 그 사용자 행세를 할 수 있게 됩니다.

흔히 프론트엔드 개발 시 편의성을 이유로 로컬 스토리지에 JWT와 같은 인증 토큰을 저장하는 경우가 많지만, 로컬 스토리지는 태생적으로 자바스크립트로 데이터를 다루기 위해 만들어진 공간이기에 XSS 공격에 무방비로 노출될 수밖에 없다는 치명적인 단점을 가지고 있습니다. 반면에 쿠키는 httpOnly 설정을 통해 자바스크립트의 접근을 원천 봉쇄할 수 있으므로, 설령 해커가 XSS 공격을 통해 스크립트를 실행시킨다 하더라도 브라우저 내부에 숨겨진 인증 쿠키의 값 자체는 읽어낼 수 없어 토큰 탈취를 방지할 수 있게 됩니다.

결국 우리가 JWT와 같은 중요한 인증 토큰을 다룰 때 굳이 쿠키를 사용하고 httpOnly 옵션을 켜는 이유는, 브라우저가 가진 ‘요청 시 자동으로 쿠키를 포함하여 서버로 전송하는 특성’을 활용해 개발의 편의를 챙기는 동시에, ‘스크립트 접근 차단’이라는 강력한 보안 기능을 활용하여 해커의 공격으로부터 사용자의 계정 정보를 안전하게 지키기 위함입니다. 따라서 질문하신 코드는 서버가 클라이언트에게 "이 토큰은 인증에 필요하니 저장해두고 나한테 요청 보낼 때만 보여줘, 대신 자바스크립트로는 절대 열어보지 못하게 막아둬"라고 브라우저에게 명령을 내리는 과정이라고 이해하시면 전체적인 인증 처리의 흐름이 명확히 보이실 겁니다.

마지막으로 실무에서 JWT와 같은 토큰을 실제로 어디에 가장 많이 보관하는지에 대한 팁을 드리자면, 단순히 개발하기 편하고 구현이 빠르다는 이유로 ‘로컬 스토리지’에 Access Token을 저장하는 경우가 꽤 흔하지만, 앞서 말씀드린 보안 이슈 때문에 금융권이나 대형 서비스와 같이 보안이 중요한 환경에서는 지양하는 추세입니다. 가장 보안적으로 견고하다고 평가받는 방식은 Refresh Token은 httpOnly 쿠키에 담아 XSS로부터 보호하고, Access Token은 메모리(자바스크립트 변수)에 담아 관리하는 방식 혹은 Access Token과 Refresh Token 모두를 httpOnly 쿠키로 관리하는 방식입니다. 물론 쿠키를 사용할 경우 CSRF(사이트 간 요청 위조) 공격에 대한 별도의 방어 처리가 필요해지지만, 토큰 자체가 탈취되는 최악의 상황을 막기 위해 실무에서는 httpOnly 쿠키를 적극적으로 활용하는 것을 권장합니다.

참고해주세요!

안녕하세요, 인프런 AI 인턴입니다. TAESUN님.

httpOnly 옵션에 대해 궁금하신 것 같습니다. res.cookie("token", token, {httpOnly: true});라는 코드를 실행하면, 서버가 클라이언트에 쿠키를 전송할 때 httpOnly 속성을 포함하여 전송합니다. 이 설정은 주로 보안상의 이유로 활용됩니다.

httpOnly 속성의 의미

• 목적: httpOnly 속성이 설정된 쿠키는 JavaScript를 통해 클라이언트 측에서 직접 접근할 수 없습니다. 즉, 클라이언트의 스크립트로부터 쿠키의 내용을 읽거나 수정할 수 없게 만듭니다.
  
• 보안 이유: 쿠키가 XSS(Cross-Site Scripting) 공격으로부터 안전해집니다. 공격자는 클라이언트의 쿠키 정보를 탈취하려 할 수 있지만, httpOnly 속성 덕분에 JavaScript를 통해 쿠키를 직접 훔치는 것을 방지할 수 있습니다.
  

브라우저 쿠키 vs. 클라이언트 사이드 스크립트 쿠키

• 브라우저 쿠키: 브라우저 자체에서 관리하는 쿠키로, 서버와의 요청/응답에 따라 전달됩니다.
  
• 클라이언트 사이드 스크립트 쿠키: JavaScript 등을 통해 클라이언트 측에서 조작될 수 있는 쿠키입니다. 만약 httpOnly 속성이 없으면 JavaScript에서 document.cookie를 사용해서 쿠키에 접근할 수 있습니다.
  

그럼 왜 이런 설정을 할까요?

악의적인 사용자가 JavaScript를 통해 쿠키를 쉽게 탈취할 수 있으면, 쿠키에 포함된 민감한 정보(예: 세션 토큰)가 공격자에게 노출될 위험이 높습니다. 그래서 httpOnly 속성을 주어 이런 리스크를 줄이는 것입니다.

관련해서 더 깊이 이해하고 싶으시다면, HTTP 쿠키의 보안 설정 길잡이를 참조하시면 많은 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.