질문
[질문] 안녕하세요 @[프론트]이선협 강사님, 그리고 다른 멘토/강사님, 동기님!
CS스터디 발표를 위해 Cookie 옵션 중의하나 HttpOnly 에 대한 공부 중 직접 실제 사이트의 cookie 값들을 조회하던중에 의문점이 생겨 질문드립니다.
현상curl -Ihttps://www.youtube.com을 통해 유튜브 서버에서 응답하는 set-cookie (httponly가 적용된) 들을 확인
- 실제 브라우저를 통해 youtube에 접속하여
document.cookie를 통해 cookie를 조회하니 httponly가 적용된 cookie들은 표시되지 않으나 set-cookie에는 존재하지 않던 다른 cookie값을 확인
- youtube.com 만이아닌 .google.co.kr과 같은 Domain을 통해서도 cookie가 생성된것을 확인
추측- 브라우저 별로 생성되는 cookie가 약간 다른것으로 보아 브라우저측에서도 무언가 cookie를 생성하지 않을까..? ( Chrome이기 때문에 google.com에서..? )
- 서버측에서 응답을 한번만 하는것이 아니라 렌더링 이후에도 응답이 추가적으로 있지않을까..?
질문curl -Ihttps://www.youtube.com조회를 통해 알 수 있는 cookie들외의 다른 cookie들은 어떤 경로를 통해 생성되는걸까요?
- 그 cookie들이 브라우저측에서 생성되는것인지, 서버측에서 생성하는건지 궁금합니다. 그리고 이러한 cookie들의 경로(?)를 추적할수 있을까요?
- 조금은 벗어난 질문이지만, 강의 중 사용자 인증을 하는데 있어 httponly가 SPA가 대세인 요즘 사용하는데 어려움이 있다고 하셨는데, 그 이유를 찾는데 어려움을 겪고있습니다. 이부분에 대해서 이해를 도울 수 있을만한 키워드가 있을까요??
감사합니다!! (편집됨)
답변
httpOnly를 통해 생성된 쿠키는 브라우저에서 (정확히는 자바스크립트를 통해) 조작할 수 없습니다. document.cookie를 통해 보이지 않는 것은 httpOnly로 생성된 쿠키기 때문입니다. 꼭 httpOnly가 아니더라도 쿠키를 이용할 수 있어요. 예를 들면, 팝업창에서 “하루 동안 그만보기” 같은 버튼을 누를 경우 유효기간이 하루인 쿠키가 생성됩니다. 그것이 아니라더도 여러 상태를 위해 웹 사이트가 쿠키를 이용할 수 있어요!SPA(Single Page Application)에서 httpOnly 사용이 어렵다고 한 이유는 자바스크립트를 통해 쿠키 접근이 불가능하기 때문입니다.만약에 서버에서 만들어준 토큰을 브라우저에 저장한다면 이후 ajax API 호출을 할 때 토큰을 담아 보내야하는데 자바스크립트로 쿠키를 확인 할 수 없으니 토큰을 사용할 수가 없습니다. 따라서
httpOnly를 사용하기 힘듭니다.그래서 보통 브라우저 쿠키나 localStorage를 통해 저장하는데 이 경우엔 XSS 해킹 위험이 있을 수 있습니다. 보통 앞으로 배울 Vue.js나 React가 어느정도 막아주고 브라우저 차원에서도 막아주지만 항상 해킹 위험이 있을 수 있음을 인지하고 작성하는 것이 중요합니다.