쿠키🍪_Cookie

'쿠키 수집에 동의하십시오.'

 

 

 

 

 

 

 

쿠키는 웹사이트가 사용자의 브라우저에 저장하는 작은 데이터 파일로,

사용자의 정보를 기억하고 웹 경험을 개선하는 데 사용됩니다.

 

 

 

 

 

쿠키 어원

초코칩 쿠키를 의미하는가 싶을 텐데, 정확하게는 웹 브라우저에서 이용하는 정보 파일을 일컫습니다.

쿠키의 어원은 1994년, 넷스케이프 개발자 루이 J. 몬툴리(Louis J. Montulli)가 고안했는데,

유닉스 프로그래머들이 프로그램 수신 후 변경하지 않고 반환하는 데이터의 패킷을

'매직 쿠키' 라고 부르는 데서 착안했습니다.

최초의 쿠키는 넷스케이프(Netscape Navigator) 웹 브라우저에서

쇼핑몰 장바구니 기능을 구현하는 데 사용되었습니다.

이를 통해 사용자가 웹사이트를 떠나도 장바구니 정보를 유지할 수 있었습니다.

 

쿠키 특징

• 세션 유지 – 사용자가 웹사이트를 새로고침 하거나 닫았다가 다시 열어도 정보를 유지
• 사용자 경험 개선 – 웹사이트가 방문자의 설정(언어, 테마 등)을 기억하여 맞춤형 환경을 제공
• 네트워크 트래픽 감소 – 서버가 매번 사용자 정보를 요청X. 서버 부담을 줄이고 웹사이트 속도를 개선
• 맞춤형 광고 제공 – 사용자의 방문 기록을 기반으로 개인화된 광고를 제공
• 웹사이트 분석 및 최적화 – 방문자의 행동을 분석하고, 웹사이트를 개선

 

로컬 스토리지 와 쿠키

 

1. 로컬 스토리지 (Local Storage)

 

장점:

• 지속성: 브라우저를 닫아도 데이터가 유지됩니다.
• 용량: 비교적 큰 용량(최대 5MB)을 저장할 수 있습니다.

단점:

• 보안: XSS(크로스 사이트 스크립팅 - 악성 코드를 넣어 로컬 스토리지 데이터 접근) 공격에 취약합니다. 즉, 다른 도메인에서 주입한 악성 코드(스크립트)가 로컬 스토리지에 접근 할 수 있습니다.

사용 예:

• 사용자가 자주 로그아웃하지 않는 애플리케이션.
• 장기적으로 사용자가 로그인 상태를 유지해야 하는 경우.

localStorage.setItem('token', jwtToken);

 

2. 쿠키 (Cookies)

 

장점:

• 보안: HttpOnly 플래그를 설정하면 자바스크립트에서 접근할 수 없으므로 XSS 공격에 대한 보안이 향상됩니다. Secure 플래그를 사용하면 HTTPS 연결을 통해서만 전송됩니다.

 

• 서버에 자동 전송: 클라이언트-서버 간 요청 시 자동으로 쿠키가 전송되므로 인증 헤더를 수동으로 설정할 필요가 없습니다.
• 동일한 도메인 간 쿠키 접근이 가능 하여 보안 및 개인 정보 보호를 강화합니다.

단점:

• 용량: 비교적 작은 용량(4KB)을 저장할 수 있습니다.
• 보안: *CSRF(Cross-Site Request Forgery. 크로스 사이트 요청 위조) 공격에 취약할 수 있습니다. 이를 방지하기 위해서는 CSRF 토큰을 함께 사용해야 합니다. CSRF 토큰 존재 여부 확인하여 신뢰할 수 있는 요청인지 확인합니다.

사용 예:

• 보안이 중요한 애플리케이션.
• XSS 공격을 방지하고자 할 때.

document.cookie = 'token=' + jwtToken + '; HttpOnly; Secure';

 

 

*CSRF 란 https://devscb.tistory.com/123