Oauth 2.0란? & JWT 토큰의 사용?

인증은 유저가 직접하고 권한은 서비스를 제공하는 서버가 가지게 되는 구조입니다.

인증 과정

인증과정에서 클라이언트의 개입이 없이 유저와 인증서버와의 통신으로 인증단계를 진행 합니다.

인증이 끝이 나면 서버에서 클라이언트에 인가권한 코드를 주고 해당 구글의 서비스를 사용 할 수 있게 됩니다.

 

CORS 

 

cors는 다른 출처의 소스를 받기위해서 허가를 요청하는 것인데 주고 받기 위해서는 우선 preflight라고 서버에 요첨을 보내고 서버에서 응답을 하면 원래 보내기 위해서 있는 요청을 보내게 됩니다.

preflight의 안에는 출처의 주소, 메소드 헤더의 부분이 들어가고

응답으로는 승인이 되었으며, 그외에 가능한 메소드와 헤더의 내용을 알려줍니다. 추가로 응답 캐시 시간을 적어서 보내줍니다.

GET,POST.HEAD메서드중에 해당 규칙을 만족하면 CORS없이 바로 보낼 수 있습니다.

JWT토큰

 

1. Access 토큰 저장 위치

1) Memory (메모리)

• Access 토큰을 메모리에 저장하는 것은 가장 안전한 방법 중 하나입니다. 자바스크립트의 전역 변수나 상태 관리 라이브러리(예: Redux, Vuex)를 사용하여 토큰을 유지할 수 있습니다.
• 장점:
  • XSS(크로스 사이트 스크립팅) 공격에 상대적으로 안전합니다.
• 단점:
  • 페이지가 새로고침되면 토큰이 사라지므로, 이를 보완하려면 추가적인 처리(예: refresh 토큰을 사용해 재발급)를 해야 합니다.

2) HttpOnly 쿠키

• HttpOnly 속성을 가진 쿠키에 Access 토큰을 저장하면, 자바스크립트로 쿠키에 접근할 수 없기 때문에 보안이 강화됩니다.
• 장점:
  • XSS 공격에 대한 보호가 가능합니다.
  • 서버와의 통신 시 쿠키가 자동으로 포함되므로 별도의 인증 헤더를 관리할 필요가 없습니다.
• 단점:
  • CSRF(크로스 사이트 요청 위조) 공격에 취약할 수 있으므로, CSRF 보호를 추가해야 합니다.

3) LocalStorage

• LocalStorage는 클라이언트 측에서 데이터를 영구적으로 저장할 수 있는 방법으로, 브라우저를 닫아도 데이터가 유지됩니다.
• 장점:
  • 구현이 간단하고 페이지 새로고침 후에도 토큰이 유지됩니다.
• 단점:
  • XSS 공격에 매우 취약하므로, 자바스크립트로 접근 가능한 LocalStorage에 저장하는 것은 보안상 위험합니다.

4) SessionStorage

• SessionStorage는 브라우저 세션 동안만 데이터를 유지하며, 브라우저나 탭을 닫으면 데이터가 사라집니다.
• 장점:
  • LocalStorage보다 안전하며, 브라우저가 닫힐 때 토큰이 삭제되므로 민감한 정보 저장에 적합할 수 있습니다.
• 단점:
  • 여전히 XSS 공격에 취약할 수 있습니다.

2. Refresh 토큰 저장 위치

1) HttpOnly 쿠키 (권장)

• Refresh 토큰은 HttpOnly 쿠키에 저장하는 것이 권장됩니다. HttpOnly 쿠키는 자바스크립트로 접근할 수 없기 때문에 탈취 위험이 낮아집니다.
• 장점:
  • Refresh 토큰이 장시간 저장되어도 안전하며, 자바스크립트로 접근할 수 없어 XSS 공격에 안전합니다.
  • 쿠키로 관리하므로 자동으로 서버와의 통신에 포함됩니다.
• 단점:
  • CSRF 공격에 대한 보호 기능이 필요합니다.

2) 서버 측 세션 관리

• Refresh 토큰을 클라이언트에 저장하지 않고, 서버 측에서 세션을 유지하며 관리하는 방법입니다. 클라이언트는 세션 ID만 저장하고, 서버에서 이 세션을 기반으로 토큰을 발급합니다.
• 장점:
  • Refresh 토큰이 클라이언트에 저장되지 않기 때문에 보안성이 매우 높습니다.
• 단점:
  • 서버 자원 소모가 크며, 서버 상태를 관리해야 하므로 무상태성을 중시하는 RESTful 원칙과는 맞지 않을 수 있습니다.

---

토큰 저장 방식 요약

1. Access 토큰:
   • 메모리: XSS에 안전하지만 새로고침 시 유지되지 않음.
   • HttpOnly 쿠키: XSS에 안전하며 자동으로 서버로 전송되지만, CSRF 보호가 필요함.
   • LocalStorage/SessionStorage: 구현이 쉽지만 XSS 공격에 취약.
2. Refresh 토큰:
   • HttpOnly 쿠키: 가장 안전한 방식으로 권장되며, XSS 공격에 대한 보호를 제공함.
   • 서버 측 세션 관리: 서버에서 직접 관리하여 클라이언트에 저장하지 않지만, 서버 자원 소모가 큼.

---

권장 방식

• Access 토큰: 메모리나 HttpOnly 쿠키에 저장.
• Refresh 토큰: HttpOnly 쿠키에 저장하고, access 토큰이 만료되면 refresh 토큰으로 새롭게 발급받는 구조.

이 방식은 XSS 공격에 대한 안전성을 보장하면서도, 보안 취약점을 최소화할 수 있는 방법입니다. CSRF 방지를 위해 CSRF 토큰을 사용하거나 SameSite 쿠키 옵션을 설정하는 것도 추가적인 보안 대책이 될 수 있습니다.

 

브라우저 각 저장소의 차이

 

1. 세션 저장소 (Session Storage)

Session Storage는 특정 탭이나 창에서만 데이터를 저장하며, 브라우저 탭이 열려 있는 동안만 데이터를 유지합니다. 브라우저 창을 닫으면 데이터가 사라집니다.

• 저장 위치: 브라우저 메모리 (탭 또는 창에 한정)
• 특징:
  • 탭별 독립적: 각 탭에 저장된 데이터는 다른 탭에서 접근할 수 없습니다.
  • 브라우저 세션 동안만 유지: 창이나 탭이 닫히면 저장된 데이터가 삭제됩니다.
  • 용량 제한: 일반적으로 5MB 정도의 데이터 저장 가능.

javascript
코드 복사
// 세션 저장소에 데이터 저장 
sessionStorage.setItem('key', 'value'); 

// 세션 저장소에서 데이터 가져오기 
let value = sessionStorage.getItem('key'); 

// 세션 저장소에서 데이터 삭제 
sessionStorage.removeItem('key'); 

// 세션 저장소 전체 삭제 
sessionStorage.clear();

2. 로컬 저장소 (Local Storage)

Local Storage는 브라우저에 데이터를 영구적으로 저장하는 방식으로, 브라우저가 닫히더라도 데이터가 삭제되지 않고 유지됩니다. 사용자가 수동으로 삭제하거나 브라우저의 캐시를 삭제하지 않는 한 데이터가 남아 있습니다.

• 저장 위치: 브라우저 메모리 (클라이언트 측 저장소)
• 특징:
  • 브라우저에 영구 저장: 브라우저나 컴퓨터를 다시 시작해도 데이터가 유지됩니다.
  • 모든 탭과 창에서 공유: 같은 도메인 내의 모든 탭과 창에서 접근 가능합니다.
  • 용량 제한: 일반적으로 5~10MB 정도의 데이터 저장 가능.

// 로컬 저장소에 데이터 저장
localStorage.setItem('key', 'value');

// 로컬 저장소에서 데이터 가져오기
let value = localStorage.getItem('key');

// 로컬 저장소에서 데이터 삭제
localStorage.removeItem('key');

// 로컬 저장소 전체 삭제
localStorage.clear();

3. 쿠키 (Cookies)

쿠키는 브라우저에서 데이터를 저장하는 또 다른 방식으로, 서버와 클라이언트 간의 통신에서 작은 데이터 조각을 저장하고 전송하는 데 사용됩니다. 쿠키는 만료 시간을 설정할 수 있으며, 기본적으로 서버 요청 시마다 함께 전송됩니다. HttpOnly 속성이나 Secure 속성을 사용하여 보안을 강화할 수 있습니다.

• 저장 위치: 브라우저 내 쿠키 저장소 (클라이언트 측 저장소)
• 특징:
  • 만료 기간 설정 가능: 쿠키는 만료 시간을 설정할 수 있으며, 설정된 시간이 지나면 자동으로 삭제됩니다.
  • 크로스 탭 공유 가능: 같은 도메인 내의 모든 탭에서 쿠키에 접근 가능합니다.
  • 용량 제한: 하나의 쿠키 크기는 약 4KB로 제한되며, 도메인당 최대 20개의 쿠키를 저장할 수 있습니다.
  • 자동 전송: 쿠키는 HTTP 요청 시 서버로 자동 전송되며, 주로 세션 ID나 인증 정보를 저장하는 데 사용됩니다.

// 쿠키에 데이터 저장 (만료 시간 설정)
document.cookie = "username=John; expires=Fri, 31 Dec 2024 12:00:00 UTC; path=/";

// 쿠키에서 데이터 가져오기
let cookies = document.cookie;

// 쿠키 삭제 (만료 시간을 과거로 설정)
document.cookie = "username=John; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

---

비교 요약

항목	Session  Storage	Local  Storage	Cookies
유지 기간	브라우저 탭/창이 닫히면 사라짐	영구적 (수동 삭제 시까지 유지)	만료 시간 설정 가능 (기본: 브라우저 세션 동안)
용량 제한	약 5MB	약 5~10MB	4KB per 쿠키, 도메인당 약 20개 쿠키 저장 가능
탭/창 간 데이터 공유	공유되지 않음	동일 도메인 내에서 모든 탭/창에서 공유 가능	동일 도메인 내에서 모든 탭/창에서 공유 가능
서버와 자동 전송	전송되지 않음	전송되지 않음	HTTP 요청마다 자동으로 서버에 전송
보안성	XSS에 취약	XSS에 취약	HttpOnly, Secure 속성 사용 시 XSS에 보호 가능

---

어떤 상황에 사용할까?

• Session Storage: 임시 데이터, 예를 들어 사용자가 한 페이지 내에서만 필요한 데이터를 유지할 때 적합.
• Local Storage: 영구적인 데이터를 저장할 때, 예를 들어 사용자의 테마 설정이나 장바구니와 같은 데이터를 유지하는 경우 사용.
• 쿠키: 서버와 클라이언트 간의 인증 정보나 세션 ID와 같은 데이터를 저장하여 서버로 자동 전송되어야 할 때 사용.

각 저장 방식은 데이터의 보안, 유지 기간, 용도에 따라 적절한 방식으로 선택하는 것이 중요합니다.

나는 어떤 삶을 살아가야 할까?

나는 어떤 삶을 살기 원하는걸까?