일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- JS
- 쿠키
- CSS
- 1주차
- 3주차
- OperatingSystem
- WIL
- chapter2
- Til
- HTML
- 버킷리스트
- react
- 항해99
- computerscience
- javaScript기초
- 실전프로젝트
- 숙제
- 스터디
- OS
- 생각정리
- javascript
- 4주차
- 화살표함수
- 알고리즘
- Todo
- 완강
- 5주차
- DOM
- 자바스크립트는왜그모양일까
- CS
- Today
- Total
개발캡슐
[CS] -[Network, 보안] 쿠키(cookie)의 옵션 설정 본문
cookie 설정
cookie
가볍게 쿠키의 의미에 대해 알아보자.
쿠키에 대해 더 알고자하면 https://ahahahangstudy.tistory.com/109 해당 링크를 참고.
쿠키는 HTTP 프로토콜의 바상태성을 보완하기 위한 수단인데,
클라이언트 로컬(local)에 저장되는 키와 값(key, value)이 들어있는 작은 데이터 파일이야.
애초에 서버와 클라이언트가 지속적으로 데이터 교환을 하기 위해 만들어졌어.
서버에서 HTTP Response Header에 Set-Cookie속성을 이용해서 클라이언트에 쿠키를 제공하지.
쿠키에는 이름, 값, 만료날짜/시간(쿠키 저장기간), 경로 정보들이 들어있어.
- 서버가 웹 브라우저에 정보를 저장하고 불러올 수 있는 수단이고
- 해당 도메인에 대해 쿠키가 존재하면, 웹브라우저는 도메인에게 http요청 시 쿠키를 함께 전달해.
- cookie는 삭제하지 않으면 사라지지 않아.
cookie는 삭제하지 않으면 사라지지 않는다는 특성이 있어서
장기간 저장해야하는 옵션을 클라이언트에 저장하기에 적합해.
예를 들면 maxage, expire을 사용해서.
ex) 30일동안 로그인 상태유지, 로그인과 로그아웃을 위해 인증 정보를 쿠키에 저장하기도 해.
위 같은 경우로 많이 쓰이지만, cookie는 쉽게 찾아볼 수 있어서 보안에 취약하단 단점이 있어.
그래서 인증정보같은 경우는 Hashing처리가 되어있어.
Cookie의 전달방법
1. 서버가 응답 헤더의 set-Cookie라는 프로퍼티에 쿠키의 이름, 값, 경로등의 옵션을 저장해.
2. 쿠키가 담긴 응답을 받을 클라이언트는 응답 헤더에 존재하는 set-Cookie를 확인하게 돼.
3. 이후 매번 요청할 때마다 쿠키에 존재하는 이름과 값을 서버에 전송하게 되지.
4. 이런 식으로 클라이언트가 쿠키를 저장하면 이후로는 해당 웹 사이트를 이용할 때,
매 요청에서 자동으로 쿠키가 같이 전송 돼.
5. 그래서 쿠키 내용을 바탕으로 서버는 클라이언트에 저장된 쿠키내용을 바탕으로
로그인을 유지하거나, 장바구니가 담겨있다던지의 편의성을 제공하게 돼.
그런 쿠키의 옵션을 알아보자.
쿠키의 옵션을 통해 보안에 취약한 쿠키의 단점도 보완할 수 있어.
그래서 쿠키를 사용할 땐, 프론트엔드에서도 설정해줘야하지만 백엔드에서도 설정해주면 좋지.
cookie의 옵션
1. Domain
2. Path
3. MaxAge or Expires
4. Secure
5. HttpOnly
6. SameSite
1. Domain
도메인은 www.google.com 과 같은 서버에 접속할 수 있는 이름이야.
쿠키 옵션에서 도메인은 포트, 서브 도메인 정보, 세부 경로를 포함하지 않아.
서브 도메인이란 "www"같은 도메인 앞에 추가로 작성되는 부분이야.
따라서 요청해야할 URL이 http://www.localhost.com:3000/users/login 이라 하면
여기서 Domain은 localhost.com이 돼.
만약 쿠키 옵션에서 도메인 정보가 존재한다면 클라이언트에서는 쿠키의 도메인 옵션과
서버의 도메인이 일치해야 쿠키를 전송할 수 있어.
2. Path
세부 경로는 서버가 라우팅할 때 사용하는 경로야.
만약 요청해야 하는 URL이 http://www.localhost.com:3000/users/login 인 경우,
Path, 세부 경로는 "/users/login"이 돼.
명시하지 않으면 기본으로 /으로 설정되어 있어.
Path 옵션의 특징
- 설정된 path를 정부 만족하는 경우 요청하는 Path가 추가로 더 존재해도
쿠키를 서버에 전송할 수 있어.
즉, Path가 /users로 설정되어 있고,요청하는 세부 경로가 /users/login 인 경우면
쿠키 전송이 가능해.
- 하지만 /user/login으로 전송되는 요청은 Path 옵션을 만족하지 못해서
서버로 쿠키를 전송할 수 없어. /users가 아니라 /user라서.
3. MaxAge or Expires
쿠키의 유효한 기간(생명주기/수명)을 정하는 옵션이야.
MaxAge
- 앞으로 몇 초 동안 쿠키가 유효한 지 설정하는 옵션.(쿠키 유지 시간 지정)
Expires
- 언제까지 유효한지 Date를 지정해.(쿠키 폐기 시간 지정)
이때 클라이언트의 시간을 기준으로 해.
=> 두 옵션을 동시에 설정하면 MaxAge가 더 높은 우선 순위로 적용돼.
이후 지정된 시간, 날짜를 초과하게 되면 쿠키는 자동으로 파괴돼.
- 두 옵션이 모두 지정되니 않은 경우엔 브라우저의 탭을 닫아야 쿠키가 제거(폐기)될 수 있어.
- 쿠키를 빠르게 폐기한다면 옵션을 설정하지 않으면 되고,
쿠키를 계속 사용하고 싶다면 두 옵션 중에 하나라도 설정해주는 게 좋아.
이때, 브라우저를 종료하면 삭제되는 임시 쿠키를 세션 쿠키(Session Cookie)라고 하고,
설정한 옵션만큼 사용가능한 쿠키를 영속성(지속) 쿠키(Persistent Cookie)라고 해.
4. Secure
- 쿠키를 전송해야할 때 사용하는 프로토콜에 따른 쿠키 전송 여부를 결정해.
- 해당 옵션이 true로 설정된 경우, 'HTTPS' 프로토콜을 이용하여 통신하는 경우에만
쿠키를 전송할 수 있어.
5. HttpOnly
- 자바스크립트에서 브라우저에 쿠키에 접근 여부를 결정해.
- 해당 옵션이 true로 설정된 경우, 자바스크립트에선 쿠키에 접근이 불가해.
- 명시되니 않는 경우 기본으로 'false'로 지정되어 있어.
만약 이 옵션이 false인 경우, 자바스크립트에서 쿠키에 접근이 가능해서 'XSS'공격에 취약해.
6. SameSite
Cross-Origin 요청을 받은 경우 요청에서 사용한 메소드와 해당 옵션의 조합으로
서버의 쿠키 전송 여부를 결정하게 돼.
사용 가능한 옵션들은 3가지야.
- Lax
- Strict
- None
이러한 옵션들을 지정한 다음 서버에서 클라이언트로 쿠키를 처음 전송하게 된다면
헤더에 Set-Cookie라는 프로퍼티에 쿠키를 담아 전송하게 돼.
이후 클라이언트 혹은 서버에서 쿠키를 전해야 한다면
클라이언트는 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 서버에 쿠키를 전송하게 돼.
세션 쿠키(Session Cookie)
- 사용자가 사이트 탐색할 때 관련한 설정들과 선호사항을 저장하는 임시 쿠키정도라고 생각하면 돼.
- 만료 날짜/시간을 지정하지 않으면 세션 쿠키가 되고.
- 브라우저 메모리에 저장돼.
- 현재 세션이 끝날 때 삭제돼.
브라우저는 "현재 세션"이 끝나는 시점을 정의해(브라우저가 닫히면 세션 종료),
어떤 브라우저들은 재시작할 때 세션을 복원해서 세션 쿠키가 무기한 존재할 수 있도록 해.
지속 쿠키(Persistent Cookie)
- 만료 날짜/시간을 지정하면 지속 쿠기가 돼.
- 파일로 디스크에 저장되서 브라우저가 종료되어도 컴퓨터를 재시작해도 쿠키가 남아있어.
(사용자 로그인을 항상 유지하는 데에 사용 돼 )
- Expires 속성에 명시된 날짜에 삭제되거나,
Max-Age 속성에 명시된 기간이후에 삭제 돼.
즉, 만료 시점을 지정하지 않으면 세션 쿠키고,
만료 시점을 정하면 지속 쿠키가 돼.
-참고자료-
https://velog.io/@ahsy92/%EC%9D%B8%EC%A6%9D%EB%B3%B4%EC%95%88-%EA%B8%B0%EC%B4%88-Chapter-Cookie
https://jeong-pro.tistory.com/80
https://velog.io/@jeju_daun/%EC%9D%B8%EC%A6%9D%EB%B3%B4%EC%95%88-Cookie-%EC%84%A4%EC%A0%95
https://ko.javascript.info/cookie
https://velog.io/@ahsy92/%EC%9D%B8%EC%A6%9D%EB%B3%B4%EC%95%88-%EA%B8%B0%EC%B4%88-Chapter-Cookie
'CS' 카테고리의 다른 글
[CSS] Position (0) | 2023.03.30 |
---|---|
[CS] HTTP (0) | 2023.03.30 |
[CS] - [OS] - 캐시(Cache) (0) | 2023.03.29 |
[CS] 프레임워크와 라이브러리, 그 차이점 (0) | 2023.03.29 |
[CS]웹페이지가 브라우저에 렌더링되는 과정 (0) | 2023.03.27 |