웹 기초 학습하기 - 쿠키 편

tilnote2023-02-03 17:14

파인만 기법

파인만 기법이라는 것이 있다. 어떤 주제를 공부하고 이를 다른 사람에게 가르쳐 보는 방법이다. 이 과정에서 잘 모르는 부분을 파악하여 해당 부분을 다시 정리할 수 도 있다. 누군가에게 가르쳐 보는 과정에서 배움을 얻는 방법이다. 그래서 내가 다시 자바스크립트 기초를 공부하면서 배운 내용을 정리해보려고 한다. Learning in public 이라고 부르기도 하다. 그냥 다시 공부글을 쓰면서 나중에 다시 볼 때 편하게 하려고 한다.

쿠키란 무엇인가?

쿠키는 브라우저에 저장하는 문자열이다. 보통 서버에서 HTTP 응답 헤더에 Set-Cookie 에 담아주고 이를 세션 식별자로 사용한다. 이런 인증 외에도 간단한 클라이언트 식별에도 사용이 된다.

사용법은 docement.cookie 로 접근할 수 있다. 브라우저에서도 접근이 가능하다.

key=value 로 이루어져 있고 ; 로 구분한다. cookie1=value1; cookie2=value2;

예시 : document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

값을 설정하려면 document.cookie = "user=glevel" 처럼 설정해주면 된다. 이렇게 하면 cookie의 user 값만 갱신된다.

쿠키의 옵션 알아보기

쿠키에 다양한 옵션을 주고 사용할 수 있다. key=value; 의 형식으로 작성하면 된다.

path

path=/mypath이 옵션을 주게 되면 설정한 해당 경로의 하위 경로에서만 쿠키에 접근이 가능하다. path=/ 를 주면 모든 경로에서 접근이 가능하고 path=/mypath 를 주면 해당 경로인 /mypath나 하위 경로인 /mypath/some 에서만 접근이 가능하다.

domain

domain=site.com

쿠키에 접근이 가능한 도메인을 지정한다. 몇 가지 제약이 있어서 아무 도메인이나 지정할 수 없다. 만약 domain 값을 넣지 않았다면 쿠키를 설정한 도메인에서만 쿠키에 접근할 수 있다. 예를 들어 a.com 에서 설정한 쿠키는 b.com 에서 얻을 수 없다.

그렇다면 서브 도메인에서도 접근할 수 없을까? 보통 메인 도메인에서 설정한 쿠키는 서브 도메인에서 접근할 수 없는게 원칙이다. 하지만 도메인에 domain=site.com 이라고 명시적으로 적어주면 blog.site.com 과 같은 하위 도메인에서도 접근이 가능하다. site.com 앞에 점을 붙인 domain=.site.com 도 동일하게 기능한다. 점을 붙인 도메인은 하위 브라우저에서도 호환이 가능하다.

expires와 max-age

expires와 max-age 가 지정 되어 있지 않으면 브라우저가 닫힐 때 쿠키도 같이 삭제 된다. 이런 쿠키를 "세션 쿠키"라고 부른다.

expires=Tue, 19 Jan 2038 03:14:07 GMT

expires는 GMT 포맷으로 설정한다. javascript에서는 date.toUTCString 을 사용하여 해당 포맷을 쉽게 얻을 수 있다.

max-age=3600

max-age는 만료일시까지의 시간을 '초'로 환산한 값을 설정한다. 0이나 음수값을 설정하면 쿠키는 바로 삭제된다.

secure

https로 통신하는 경우에만 쿠키가 전송된다.

samesite 옵션

XSRF (Cross Site Request Forgery)를 막기 위한 옵션이다. 이 옵션에는 두 가지가 있다.

samesite=strict는 다른 사이트에서 요청을 원래 사이트로 보낼 때 쿠키가 절대 전송되지 않는다.
samesite=lax는 GET과 같은 안전한 HTTP 메서드인 경우와 iframe이나 AJAX가 아닌 최상위 레벨에서 탐색하는 경우에만 쿠카를 전송한다. (브라우저 주소창에서 URL을 변경하는 경우)

XSRF 공격이란

bad.com 에서 good.com 으로의 요청을 가진 링크나 버튼이나 기능 등 으로 사용자 몰래 요청을 보내는 것이다. 이 때 good.com으로 갈 때 good.com의 쿠키를 함께 전송하게 되므로 사용자 몰래 악의적으로 정보를 조작할 수 있다. 이를 막기 위해 good.com에 모든 요청에 XSRF 토큰을 함께 보내는 방법으로 보안을 강화하기도 한다.

httpOnly

이 옵션을 설정하게 되면 자바스크립트와 같은 클라이언트 측 스크립트에서 쿠키 정보에 접근할 수 없다. 따라서 악의적인 스크립트로 쿠키 정보를 훔쳐가지 못하게 할 수 있다.

이상 웹의 쿠키에 대해 알아봤습니다. 웹은 앞으로 우리와 오랜시간 동안 함께할 매체입니다. 그렇기 때문에 이에 대해 알아두는 것은 매우 좋은 일 같습니다.

참고는 javascript.info의 쿠키와 document.cookie 문서를 참고했습니다.

모던 JavaScript 튜토리얼 사이트(javascript.info)는 자바스크립트를 공부할 때 너무 좋은 사이트 같아서 추천합니다.

공부

til