쿠키(Cookie)

Seokki Oh·2022년 4월 16일
0

쿠키는 내가 직접적으로 만질 기회가 없었어서 대충만 알고 있어서
최근 회사에서 터진 쿠키 관련 이슈에서 맥없이 당할 수 밖에 없었다
이것도 자존심 때문인지 대충 보면 해결될거라 조금 조금만 찾아보다가
내가 완전히 이해하지 않으면 안됨을 알고 쿠키에 대한 자료들을 충분히 찾아보게 되었다 ^^
프론엔드 개발자 기본 소양 역시 멀었다 공부 열심히 하자

쿠키 사용 방식

쿠키는 웹서버에서 생성한다 서버에서 Set-cookie 속성을 Header에 붙여서 클라이언트에 응답한다 그러면 브라우저는 자체적으로 내부에 쿠키를 저장한다
그리고 이것은 dev tool을 이용하면 볼 수 있고 자바스크립트 코드 document.cookie를 통해서도 조회할 수 있다

앞으로 동일 domain에 요청을 할 때마다 요청 Header에 쿠키 값을 실어서 보내게 된다
그렇기 때문에 서버에서 사용자의 쿠키정보를 통해서 사용자가 로그인 상태인지를 알고, 그래서 새로고침이 일어나 모든 data가 메모리에서 사라져도 브라우저의 쿠키값을 통해서 로그인을 유지할 수 있게 되는 것이다

domain

회사에서도 서브도메인의 쿠키 사용에서 문제를 겪은 적이 있어서 쉽게 알 수 있었다
쿠키는 안정성을 위해서 다른 domain에서는 접근하지 못한다
naver 서버에서 생성한 쿠키를 google에서 접근할 수 없는 것이다
이는 서브도메인 즉, papago.naver.com의 경우도 마찬가지인데 이를 가능하게 해주는 설정이 domain이다
domain 속성을 naver.com으로 설정해주면 naver에서 설정한 쿠키에 접근이 가능하다

httpOnly

httpOnly 옵션은 웹서버에서 Set-Cookie 헤더를 이용해 쿠키를 설정할 때 지정할 수 있다
httpOnly: true 속성은 브라우저에서는 cookie에 접근할 수 없도록 막는 것이다 document.cookie를 통해서 접근이 불가능하여 읽기,쓰기가 불가하게 된다

secure

원래 쿠키의 경우 도메인만 따지고 프로토콜은 상관이 없다
그래서 http에서 생성해도 https에서 사용이, https에서 생성해도 http에서 사용이 가능하다
하지만 secure를 설정한 경우에 https 프로토콜의 경우에만 사용이 가능하게 된다

회고

상기된 속성들 외에도 더 여러가지 속성이 있지만 여기까지만 적는다 헤헤

profile
Frontend Developer

0개의 댓글