[웹 풀사이클 데브코스 TIL] 7주차 Day 1 - 쿠키, 세션, JWT, 그리고 httpOnly

인증(Authentication)과 인가(Authorization)

인증(Authentication)

- 사용자의 신원을 확인하는 프로세스. 사용자가 누구인지 확인하고 검증하는 과정으로, 로그인을 말합니다 !

인증(Authorization)

- 인증된 사용자가 특정 리소스에 접근할 권한이 있는지를 결정하는 프로세스. 예를 들어 로그인 후 글을 작성하거나 편집할 권한이 있는지를 확인하는 것입니다.

 

 

쿠키(Cookie)와 세션(Session)

쿠키(Cookie)

- 클라이언트 측에 저장되는 데이터 조각을 말합니다. 주로 브라우저에 의해 관리되며, 사용자가 웹 사이트를 방문할 때 서버로부터 전송되어 클라이언트의 로컬 컴퓨터에 저장됩니다. 쿠키는 사용자가 웹 사이트를 다시 방문할때 사용자의 컴퓨터에서 읽히고, 서버로 전송됩니다!

예를 들어 어떤 사이트에서 아이디 비밀번호를 저장하면 사이트 방문 시 자동으로 로그인이 되는데요,  그래서 브라우저에서 쿠키를 삭제하고 사이트를 방문하면 재로그인을 해야 하는 것을 말합니다 !

 

🍀장점

1. 클라이언트 측에 저장되어 서버 요청 시 마다 함께 전송되므로, 서버 부하가 줄어듭니다.

2. 로그인 상태 유지, 사용자 설정, 사용자 추적 등 다양한 용도로 활용될 수 있습니다.

 

❗️단점

1. 클라이언트에 저장되기 때문에, 보안에 취약할 수 있습니다.

2. 브라우저당 쿠키의 크기에 제한이 있어 용량에 한계가 있습니다.

3. 사용자가 쿠키를 삭제하거나 브라우저 설정을 통해 거부할 수 있어 제어가 어려울 수 있습니다.

 

세션(Session)

- 서버 측에서 유지되는 상태 정보를 저장하는 방법을 말합니다. 각각의 클라이언트에 대해 서버는 고유한 세션을 생성하고, 이 세션은 일정 기간 동안 유지됩니다. 클라이언트는 세션 ID를 쿠키 등을 통해 받아 저장합니다.

 

🍀장점

1. 서버 측에서 관리되기 때문에 쿠키보다 보안성이 높습니다.

2. 더 많은 데이터를 저장할 수 있으며, 서버에서 필요한 만큼만 세션을 유지할 수 있습니다.

3. 민감한 정보는 서버에 저장하고, 클라이언트에는 세션 ID만 전달하여 유연하게 데이터를 저장 할 수 있습니다.

 

❗️단점

1. 서버 측에서 세션을 관리하기 때문에 많은 사용자가 접속할 경우 서버 부하가 발생할 수 있습니다.

2. 쿠키보다 데이터 전송 시 성능 면에서 조금 더 느릴 수 있습니다.

3. 사용자가 상태를 유지하기 위해 클라이언트와 서버 간의 상태를 유지하는 복잡성이 있을 수 있습니다.

 

 

 

 

JWT(JSON Web Token)

- JWT는 인증 및 정보 교환을 위한 토큰 기반의 인증 방식 중 하나로, 웹 및 모바일 애플리케이션에서 사용되며 쿠키와 세션의 일부 제한 사항을 보완하고 더 유연한 인증 방식을 제공합니다

 

🍀장점

1. Stateless: JWT는 서버에 세션 상태를 저장하지 않고 클라이언트에 전달되므로, 서버에서 세션 저장소를 관리할 필요가 없어지며, 상태를 유지할 필요가 없어 상태가 없는(stateless) 인증 방식을 제공합니다.

2. 확장성: JWT를 사용하면 여러 플랫폼에서 사용할 수 있으며, 데이터베이스 요청이 필요 없이 토큰 자체가 필요한 정보를 포함할 수 있습니다.

3. 보안성: 서명(signature)을 사용하여 토큰의 무결성을 검증하므로, 변경되지 않은 원본 토큰임을 확인할 수 있습니다.

4. 권한 부여: 페이로드(Claims)에 사용자 권한과 관련된 정보를 포함하여 인증과 함께 권한 부여에도 유용하게 활용됩니다.

 

❗️단점

1. 토큰 크기와 보안: 정보가 토큰에 포함되므로 토큰의 크기가 커질 수 있으며, 민감한 정보가 노출될 가능성이 있습니다. 따라서 보안적인 측면을 고려하여 민감한 정보는 저장하지 않는 것이 좋습니다.

2. 토큰 만료 관리: 토큰이 만료되면 재발급이 필요하며, 만료된 토큰을 제거하거나 갱신하는 로직을 구현해야 합니다.

3. 서버에서 검증: 서명만으로는 토큰이 유효한지 알 수 없으며, 서버에서 매번 토큰을 검증해야 합니다.

JWT는 쿠키와 세션의 단점을 보완하면서 상태 없는(stateless) 방식의 인증을 가능하게 하며, 다양한 장점을 제공합니다. 그러나 보안 및 관리 측면에서 주의가 필요하며, 적절한 사용 및 관리가 필요합니다.

 

JWT의 구성 요소

JWT는 Header, Payload, Signature의 세 가지 부분으로 구성됩니다!

1. Header: 토큰의 유형과 해싱 알고리즘 등의 메타데이터가 포함됩니다.
2. Payload: 클레임(Claims)이라고 불리는 토큰에 포함될 정보가 담겨있습니다. 클레임은 정보의 속성을 나타냅니다.
3. Signature: 헤더와 페이로드의 인코딩, 시크릿 키를 사용하여 생성된 서명입니다. 이 서명은 토큰이 변경되지 않았음을 검증하는 데 사용됩니다.

jwt 공식 사이트 https://jwt.io/ 에서 HEADER, PAYLOAD, SIGNATURE의 형태를 확인 할 수 있습니다.

+  페이로드 값이 바뀌면, 서명 값이 통째로 바뀌기 때문에 JWT를 믿고 사용할 수 있습니다 ( ´･ᴗ･` )

 

 

 

.env (environment :  환경 변수 관리를 위한 파일)

.env 파일은 프로젝트의 환경 변수를 관리하기 위한 설정 파일입니다 ( • ᎑ • )

주로 비밀 키, API 토큰, 데이터베이스 연결 정보 등... 을 저장하고 보안성을 유지하기 위해 사용됩니다 !

 

.env 파일은 'key = value' 형식으로 환경 변수를 설정하는데요, 예를 들면 'API_KEY=abcdefg12345' 와 같이 설정합니다 ㅎㅎ

보안성 유지를 위해 .env파일은 프로젝트 버전 관리 시스템(Git 등)에서 제외해야 합니다.

또 이 파일은 프로젝트의 최상위 폴더 안에 생성해야합니다!

const apiKey = process.env.API_KEY;

환경 변수 안의 내용은 이런 식으로 접근할 수 있습니다.

 

+ 추가로 Vite와 같은 빌드 도구를 사용하게 되면 환경 변수 파일에서 토큰을 불러오는 명령어도 조금씩 다르기 때문에,
코드가 작동하지 않는다면 현재 사용하고 있는 빌드 도구의 환경설정 방법을 찾아 보는것을 추천드립니다 !! (경험담.... ㅠㅠ...)

 

 

 

httpOnly 는 뭔가요?

httpOnly는 쿠키의 속성 중 하나입니다! 이 값을 설정하면 해당 쿠키가 Javascript를 통해 접근할 수 없도록 합니다.

이를 통해 보안상의 취약점을 줄이고, XSS, CSRF 같은 공격을 예방하는데 도움을 줍니다 ㅎㅎ

→ 보안을 강화하고자 'httpOnly' 속성을 'true'로 설정하는 것을 권장

 

 

httpOnly 설정으로 Javascript를 통해 접근할 수 없도록 한다는 것의 예시를 들어볼게요, 예를들어 웹 애플리케이션이 사용자의 로그인 정보를 쿠키에 저장한다고 가정했을때, 이 쿠키가 httpOnly 속성이 적용되어 있다면 웹 페이지의 Javascript 코드로는 해당 쿠키 값을 읽거나 수정하는것이 불가능합니다 !

// 이 코드는 httpOnly 속성이 설정되어 있는 쿠키에 접근할 수 없음
const cookieValue = document.cookie; // 이 코드는 동작하지 않음

== 브라우저의 개발자 도구 탭에서도 해당 쿠키 값을 확인할 수 없습니다 ( •⌄• ू )✧