일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- https://dasima.xyz/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A0%9C%EA%B3%B1-math-pow-%EA%B3%84%EC%82%B0/
- 노드교과서
- UX
- 자바스크립트#JS#slice#splice
- for~in/for~of
- 자바스크립트#조건문#문자열
- cmarket
- removeCookie
- dom
- 자바스크립트#JS#var#let#const#undefined#null
- slice/splice/split
- 헷갈린다~
- variable#function
- @redux-toolkit
- js
- JS#3일차달리자#초반인데#시간금방~
- ㄷㅌ
- 내장고차함수
- children vs childrenNodes
- react
- User Flow
- https://www.daleseo.com/js-array-slice-splice/
- toString#String
- https://developer-talk.tistory.com/299
- UI
- redux상태유지
- https://lo-victoria.com/introduction-to-redux-toolkit-for-beginners
- Beesbeesbees
- 자바스크립트
- CSS
- Today
- Total
Daily Front_Minhhk
Cookie 본문
Cookie
쿠키는 서버에서 클라이언트에 영속성있는 데이터를 저장하는 방법
서버가 원한다면 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져오기 가능!
단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고
클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함
서버가 클라이언트에 특정한 데이터를 저장할 수 있다
데이터를 저장한 이후 아무 때나 데이터를 가져올 수는 없고,
데이터를 저장한 이후 특정 조건들이 만족되어야 다시 가져올 수 있다.
'Set-Cookie':[
'cookie=yummy',
'Secure=Secure; Secure',
'HttpOnly=HttpOnly; HttpOnly',
'Path=Path; Path=/cookie',
'Doamin=Domain; Domain=codestates.com'
]
위 코드처럼 쿠키 옵션으로 표현할 수 있다.
🍪 쿠키옵션
- Domain: 서버와 요청의 도메인 일치하는 경우 전송
- 서브도메인정보, 세부경로 불포함(www, /users/login)
- Path: 서버와 요청의 세부경로가 일치하는 경우 전송
- path=/users 일때 /users/login에 쿠키ok
- MaxAge or Expires: 쿠키의 유효기간 설정
- maxage(초) expires(날짜지정)
- 세션쿠키: 임시쿠키. 브라우저 종료시 삭제/영속성쿠키: 유효시간지정
- HttpOnly: 스크립트의 쿠키 접근 가능여부
- true/false
- document.cookie로 접근 가능
- Secure: HTTPS 프로토콜에서만 쿠키 전송여부 결정
- SameSite: CORS요청 옵션 및 메서드에 따라 쿠키전송여부 결정
→
HttpOnly
쿠키는 <script> 태그로 접근이 가능하다 = XSS공격에 취약하다민감한 정보나 개인정보는 X
sameSite
CSRF 공격 방지
- Lax: get메서드 요청만 쿠키 전송
- Strict: cross-origin 쿠키 전송불가. same-site(Origin과 서버의 도메인, 프로토콜, 포트가 같음)에만 전송
- None: Secure옵션이 있는 모든 메서드요청에 쿠키 전송
+
session cookie
세션 쿠키는 사용자가 사이트 탐색 시에 관련한 설정들과 선호사항을 저장하는 임시 쿠키이다.
브라우저를 닫는 순간 삭제된다.
non-persistent cookies 또는 temporary cookies라고 부르기도 한다.
메모리에 저장되며 디스크에는 절대 저장되지 않는다.
브라우저가 active 상태일 때 까지만 유효하게 설정하고자 한다면 유효 시간을 세팅하지 않는 session cookie를 생성한다.
온라인 뱅킹의 예시를 생각하면 이해가 빠르다. 온라인 뱅킹의 경우 사이트를 재 접속했을 때 브라우저가 유저 정보를 기억해서는 안 된다. 재 접속한 사람이 초기에 접속했던 사람과 동일한 사람이 아닐 수 있기 때문이다.
초기에 접속한 사람이 아닌 다른 사람이 초기에 접속한 사람의 유저 정보로 은행 거래라도 진행한다면 큰일이기 때문에 해당 브라우저는 active할 때에만 유저 정보를 지니고 있도록 설정되어야 한다. 이러한 경우에 사용되는 것이 바로 session cookie이다.
persistent cookie
지속 쿠키는 유저의 정보를 디바이스에 저장한다.
디스크에 저장되며 브라우저를 닫거나 컴퓨터를 재시작하더라도 남아있다.
이전에 등록했던 정보들과 세팅, 로그인 여부 등을 저장하고 있어 이후의 접속에서 편리함
(로그인을 이미 한 유저에게 재로그인을 하도록 요구하지 않는 등)을 제공한다.
지속 쿠키는 웹 서버로부터 받을 때 유효기간이 세팅되어 있다. 유효기간이 만료 되면 그때 파기된다.
구글의 개발자 도구에서 cookie를 조회하면 session cookie와 persistent cookie를 구분해볼 수 있다.
...
persistent cookie는 expires 컬럼에 실제 날짜 값이 저장되어 있는 것을 알 수 있다.
이 날짜가 곧 쿠키의 유효기간이고 이 기간이 지나면 지속 쿠키는 파기된다.
반면 session cookie는 expires 컬럼에 'Session' 이라는 값이 저장되어 있다. 이 쿠키 값은 브라우저가 종료되는 즉시 사라진다.
쿠키를 이용한 상태 유지
이러한 쿠키의 특성을 이용하여 서버는 클라이언트에 인증정보를 담은 쿠키를 전송하고, 클라이언트는 전달받은 쿠키를 서버에 요청과 같이 전송하여 Stateless한 인터넷 연결을 Stateful하게 유지할 수 있습니다.
하지만 기본적으로 쿠키는 오랜 시간 동안 유지될 수 있고, HttpOnly 옵션을 사용하지 않았다면 자바스크립트를 이용해서 쿠키에 접근할 수 있기 때문에 쿠키에 민감한 정보를 담는 것은 위험합니다.
이런 인증정보를 이용해 공격자가 유저인척 서버에 요청을 보낸다면 서버는 누가 요청을 보낸 건지 의심하지 않고 이를 인증된 유저의 요청으로 취급하게 됩니다. 이때 개인정보와 같은 민감한 정보를 공격자가 탈취한다면 2차 피해가 일어날 수 있습니다.
'Code개발일지' 카테고리의 다른 글
Session (0) | 2023.01.07 |
---|---|
[cookie] sprint-auth-cookie (0) | 2023.01.07 |
HTTP/HTTPS (0) | 2023.01.07 |
네트워크[TCP/UDP, OSI 7] (0) | 2023.01.06 |
웹 접근성, WAI-ARIA (1) | 2023.01.02 |