쿠키/세션 (1)

🔗 참고자료

쿠키/세션/토큰 자료 아카이빙

(Web) 브라우저 저장소 (쿠키와 세션, 토큰) 1주차스터디

💡

세션, 쿠키 모두 HTTP의 무상태성으로 갖는 인증 유지의 문제를 해결하기 위해 등장

개념 정리

쿠키

• 클라이언트에 데이터를 저장하는 방법
• 특정 도메인에 대해 쿠키가 존재한다면, 웹브라우저는 해당 도메인에 http요청 시 쿠키를 함께 전달
• 로그인 상태유지 사용, 장바구니 목록 유지

• server에서 set-cookie 옵션을 통해 저장 가능

• 한 번 쿠키가 저장되면, 다음 요청시 마다 request Header에 쿠키가 담겨서 전송된다.

• Options
• httpOnly : document.cookie 접근을 막는다.
• secure: Https를 통해서만 쿠키 전송 가능
• maxAge: 쿠키 보존 기간 설정
• Domain: ' localhost' 같은 도메인에서만 쿠키 주고받도록 설정
• Path: 세부경로가 일치하는 경우만 전송
• SameSite: cross-origin요청의 경우 옵션에 따른 쿠키 전송여부 설정 : Lax -GET 메소드만 허용, Strict-쿠키전송불가 (same-site만가능) : None- 모든메서드요청가능(secure옵션필요) : CSRF공격을 방지하기 위해 사용

• 동작과정
• 1) 클라이언트 페이지 요청
• 2) 서버에서 쿠키 생성하여 set-Cookie로 넣어 응답
• 3) 클라이언트(local Pc)에서 보관하고, 다음 요청시 요청과함께 쿠키를 전송

• 장점/단점
장점
• 서버에부담을 덜어줌
단점
• 쿠키는 인증을 위한 수단이 아니기 때문에 보안에 취약함

세션

• 사용자의 인증 여부를 서버에 저장하고, 이 정보(세션Id)를 쿠키에 담아 클라이언트에 공유

• 세션id는 보안을 위해 암호화과정을 거쳐야한다.

• 동작과정
• 1) 클라이언트 페이지요청
• 2) 서버는 쿠키의 세션Id를 확인
• 없다면 인증확인 후 세션Id 생성하여 쿠키에 보냄
• 3) 클라이언트는 세션Id 담긴 쿠키로 이후 요청을 진행

• 장점/단점
• 장점
• 중요정보 서버에 보관하여 쿠키보다 보안성이 좋음
• 단점
• 서버에 부담
• 여전히 쿠키를 사용하기 때문에 보안의 문제

토큰

• 인증을 위해 사용되는 암호화 된 문자열
• 인증 성공시, 서버는 토큰을 클라로 보냄
• 클라에서 인증정보를 보관, 요청시 토큰을 같이 보냄(header에포함)
• 서버는 토큰의 '유효성'을 확인
• 토큰이 유효할 경우, 인증정보를 저장하지 않고 진행

• JSON Web Token
• AccesToken과 RefreshToken을 통해 인증을 진행
• AccessToken
• 최초 인증 시 발급받은 token
• 짧은 유효시간을 가져, 탈취되어도 사용하기 어렵게 설정
• RefreshToken
• accessToken만료시, refreshToken으로 새로운 accessToken 재발급
• Header, payload,signature로 구성
• Header : 어떤토큰인지, 암호화알고리즘은 무엇인지 설정
• Payload: 암호화된 정보를 담음
• Signature : Hash처리 된 비밀키 존재

• 장단점
• 장점
• 서버가 클라이언트에 대한 정보저장하지 않는다.(무상태성)
• 토큰을 헤더에 추가하는 것만으로 인증완료 (확장성)
• 안정성 ( 암호화된 토큰 사용)
• 권한부여에 용이
• payload에 특정 정보에만 접근가능함을 정의할 수 있다.

예상 질문 & 답변

쿠키와 세션 (이전링크)

쿠키와 세션에 대해서 한 문장 소개해주세요.

💡

쿠키와 세션 모두 HTTP의 무상태성으로 인해, 인증 유지 문제를 해결하기 위해 등장한 데이터 저장 방법을 의미합니다.

• 쿠키는 클라이언트에 문자열을 통해 데이터를 저장하는 방법입니다.

• 세션은 서버에 데이터를 저장하는 방법으로, 클라이언트에서 이를 사용하기 위해서 쿠키에 세션Id를 통해 주고 받아 사용합니다

쿠키의 옵션 중에서 아는 것이 있다면 설명해주세요.

• httpOnly: document.cookie를 통한 접근을 막는 기능

• secure: Https일 때만 쿠키 전송 가능

• maxAge: 쿠키의 보존 기간 설정

• Domain , Path , SameSite 등 옵션도 존재

쿠키의 동작 과정에 대해서 간단하게 설명해주세요

1. 클라이언트에서 서버에 페이지 요청

2. 서버에서 쿠키를 생성하여, set-cookie로 넣어 응답

3. 이후 쿠키는 client에 보관되고, 다음 모든 요청 시 마다 쿠키를 함께 전송

쿠키의 장단점

장점

• 데이터 저장을 서버에서 하지 않으므로, 서버 부담 적음

단점

• 보안에 취약함 (탈취 가능성)

쿠키의 사용사례

• 장기간 보존해야 하는 정보의 저장에 적합
• 장바구니
• 로그인상태유지
• 개인테마 설정

 

세션 (준비중)

• ref
Web - 쿠키와 세션의 차이, 용도, 사용법(cookie,session)
→ HTTP 프로토콜의 특징이자 약점을 보완하기 위해서 사용한다. 비연결지향(Connectionless) HTTP는 클라이언트가 요청(Request)을 서버에 보내고, 서버는 클라이언트에게 적절한 응답(Response)을 주고 연결(Connection)을 끊는 특성이 있다.HTTP1.1 버전에서는 커넥션을 계속 유지하고 요청(Request)에 재활용하는 기능이 추가되었다. (HTTP Header에 keep-alive 옵션을 주어 커넥션을 재활용하게 한다. HTTP1.1 버전에서는 디폴트(default)옵션이다.

https://jeong-pro.tistory.com/80

쿠키와 세션 개념
노션 페이지(아래 내용과 동일) 쿠키와 세션은 개발자 말고도 인터넷 사용자라면 누구나 많이 들어본 단어입니다. 하지만 개념에 대해서는 많은 사람들이 헷갈려 하기에 쉽고 간단하게 정리해보려고 합니다. 일단 쿠키를 발급받고 사용하는 과정에 대해서 그림으로 보여드리고, 쿠키와 세션에 대한 설명을 하도록 하겠습니다. 1. HTTP의 특징과 쿠키와 세션을 사용하는 이유 2. 쿠키 ( Cookie ) 3.

https://interconnection.tistory.com/74

• 세션이란
• 사용자의 인증 여부를 서버에 저장하고, 이 정보(세션Id)를 쿠키에 담아 클라이언트에 공유
• 세션id는 보안을 위해 암호화과정을 거쳐야한다.

• 동작과정
• 1) 클라이언트 페이지요청
• 2) 서버는 쿠키의 세션Id를 확인
• 없다면 인증확인 후 세션Id 생성하여 쿠키에 보냄
• 3) 클라이언트는 세션Id 담긴 쿠키로 이후 요청을 진행

• 장점/단점
장점
• 중요정보 서버에 보관하여 쿠키보다 보안성이 좋음
단점
• 서버에 부담
• 여전히 쿠키를 사용하기 때문에 보안의 문제

localStorage

localStorage란 무엇인지 한 문장 소개

• key-value 기반으로 브라우저에 데이터를 저장하기 위한 방법입니다.

• 같은 origin은 동일한 웹스토리지 객체를 공유하며, 별도로 삭제를 지정하지 않을 경우 영구적으로 보관됩니다.

• 서버와 관계없으며 오직 클라이언트에서 접근 및 수정이 가능한 저장소

localStorage의 장단점

장점

• 쿠키의 저장용량이 4KB인 것에 비해 최소 2MB의 큰 저장용량

• 사라지지 않고 반영구적

단점

• 만료기한이 없다는 점

예상질문 및 답변

• 쿠키와 세션의 차이점을 중심으로 설명해주세요.
• 공통점 언급(상태 저장을 위해)
• 주요 차이점 → 저장/관리 위치
• 추가) 쿠키 보안적으로 취약한 부분을 세션으로 어느정도 커버
• 꼬리 쿠키로 가능한데도 세션을 사용하는 이유는 뭘까요?
• 보안이 가장 큰 이유
• 쿠키의 저장용량 이슈(4kb, key-value개수 제한)
• 꼬리 XSS 공격 → 무엇이고, 어떻게 대비할 수 있는지
• 꼬리 쿠키의 주요 옵션들은 무엇이고 언제 사용하는지
• secure : https만 사용가능
• http-only : 스크립트를 통한 쿠키 접근 차단
• same-site : CORS 세팅관련
• http-only → 단점
• 세션 서버 부하가 올 수 있음
• 동작 원리상 차이점이 있는지?

• 웹스토리지 종류와 차이점
• 로컬스토리지
• 영구적으로 보존
• 세션스토리지
• 브라우저 창 닫게 되면 사라진다
• 꼬리 프로젝트 사용한 경험있는지? 어떻게 왜 사용하셨나요?
• 어떤 정보를 저장했고 → 왜 사용했는지 말하면 좋겠다. (면접관은 우리 프로젝트를 잘 모르니까)
• 꼬리 임의로 수정하면 어떻게 됩니까?

From gitHub

쿠키가 무엇인가요?

쿠키는 왜 생겨났나요?

쿠키의 특징은 무엇인가요?

쿠키 속성에 대해서 설명해주세요.

1. 필수 속성으로 key-value값을 가지고 있습니다.

2. Expires 와 Max-age 라는 속성으로 쿠키의 만료기간을 설정할 수 있습니다. 하지만 쿠키의 버전과 브라우저에 따라 조금 다릅니다. RFC6265이전 버전의 쿠키인 RFC2965 레거시 쿠키는 Expires속성을 허용하고 있지 않아서 HTTP/1.1 스펙으로 계산한 Max-age옵션만을 허용합니다. 하지만 인터넷 익스플로러6, 7과 같은 구형브라우저는 또 Max-age를 지원하지 않기 때문에 서버에서 쿠키를 발행할 때는 이런 상황을 대비해야 합니다.

3. Secure 옵션을 사용하면 HTTPS 프로토콜 상에서 암호화 요청일 경우 전송됩니다. 그렇다고 중요한 정보를 쿠키에 저장하면 안됩니다. 또 이 옵션은 브라우저마다 지원을 할 수도 있고 안할 수도 있습니다.

4. HttpOnly옵션의 쿠키는 자바스크립트 cookie API에 접근할 수 없습니다. 따라서 자바스크립트 코드로 쿠키를 조작하는 XSS(크로스 사이트 스크립팅) 공격을 예방할 수 있습니다.

5. 쿠키는 기본적으로 모든 쿠키를 헤더에 담아 보냅니다. 하지만 브라우저 제조사들은 보안상 쿠키가 생성된 서버로만 전송되도록 합니다. 따라서 쿠키는 쿠키를 발행한 서버에만 보내집니다. 하지만 사용하고 있는 서버가 여러 개인 경우 쿠키를 공유해서 사용해야 할 때가 있는데, 쿠키의 domain, path 속성을 사용해서 쿠키의 범위를 한정지을 수 있습니다.

쿠키의 종류에 대해서 설명할 수 있나요?

쿠키 동작 방식에 대해서 알고 있나요?

1. 클라이언트가 서버에 페이지를 최초 요청(request)합니다.

2. 서버에서 쿠키를 생성합니다.

3. 서버는 헤더에 쿠키를 담아 클라이언트에 응답(reponse)합니다.

4. 쿠키 만료기간에 따라 쿠키가 브라우저에 저장됩니다.

5. 이 후 다시 클라이언트가 서버에 동일한 페이지를 요청합니다. 이 때 쿠키가 헤더에 담겨 서버에 보내집니다.

6. 서버는 쿠키를 읽고 클라이언트의 상태가 변경되었는지 확인합니다. 변경사항이 있다면 쿠키를 재발행하여 클라이언트에 응답합니다.

쿠키의 문제점은 무엇일까요?

1. 트래픽. 쿠키는 요청 시 자동으로 헤더에 담겨 전송됩니다. 쿠키에 전송될 데이터가 많다면 요청과 응답속도가 느려질 수 있습니다.

2. 쿠키 조작 및 탈취 가능성. 쿠키는 브라우저에 저장되는 데이터입니다. 그래서 사용자가 직접 쿠키를 조작할 수도 있고 다른 누군가가 조작할 수도 있습니다. 그래서 민감한 정보를 쿠키에 저장하는 것은 좋지 않습니다. 클라이언트에서 직접 자바스크립트로 쿠키값을 변경할 수 있습니다(XSS). 이럴 경우에 대비하여 쿠키에 HttpOnly옵션을 적용시켜 자바스크립트의 접근을 막을 수 있습니다.

3. 사이트가 클라이언트를 신뢰한다는 점을 악용하여 CSRF공격을 받을 수 있습니다. 이 경우 쿠키에 SameSite 속성을 포함하여 동일한 사이트 요청에만 쿠키를 전송할 수 있습니다.

세션에 대해서 설명해주세요.

세션의 동작 방식에 대해 설명해주세요.

1. 클라이언트가 서버에 접속 시 세션ID를 발급받습니다.

2. 클라이언트는 발급받은 세션ID를 쿠키로 저장합니다.

3. 이 후 클라이언트는 서버에 요청 시 세션ID가 있는 쿠키를 보냅니다.

4. 서버는 세션ID를 받아 클라이언트의 상태를 알아내서 다시 응답을 내립니다.

5. 브라우저가 서버에서 종료되면 사라집니다.

세션을 쿠키와 비교해서 설명해주세요.

1. 저장되는 위치. 쿠키는 클라이언트, 세션은 서버에 저장됩니다.

2. 보안. 쿠키는 클라이언트 자체에서 상태를 가지고 있지만, 세션을 사용한다면 클라이언트는 세션ID만 가지고 있고 실제 상태 데이터는 서버에 저장되기 때문에 보안면에서 세션이 더 우수합니다.

3. 라이프사이클. 쿠키는 만료기간을 설정하여 클라이언트 상태가 기준입니다. 세션은 서버 메모리 상에서 사라질 때 까지입니다.

4. 속도. 쿠키는 클라이언트에 저장되고 헤더에 담아 보내지기 때문에 서버의 데이터베이스에서 세션ID를 통해 데이터를 찾는 것보다 비교적 속도가 더 빠릅니다.

웹 스토리지에 대해서 설명해주세요.

1. 5MB의 저장용량

2. 요청 시 Headers에 전송하지 않음 (CSRF 공격에 안전)

3. 문자열만 저장하지만 직렬화/역직렬화로 객체 형태로도 저장가능

4. 로컬스토리지와 세션스토리지가 있음.

로컬스토리지와 세션스토리지를 비교해주세요.

1. 기간
• 로컬스토리지는 사용자가 직접 삭제하거나 자바스크립트를 이용해서 삭제하기 전까지는 영구적으로 남아있습니다.
• 세션스토리지는 브라우저를 닫으면 삭제됩니다.

2. 범위
• 세션스토리지는 브라우저의 탭 마다 따로 저장됩니다. 로컬스토리지는 도메인과 브라우저가 동일하다면 유지됩니다.

웹 스토리지의 단점에 대해 설명해주세요.

1. 자바스크립트로 접근 가능하기 때문에 XSS 공격에 취약합니다.

2. 브라우저 간 공유가 되지 않습니다.

3. 세션 스토리지 일 경우 탭 간 공유가 되지 않습니다.

4. 로컬 스토리지 일 경우 만료기간을 설정할 수 없습니다.

5. 로컬 스토리지에 많은 데이터를 저장할 경우 파싱이 느립니다. 그리고 이것은 동기적으로 실행되기 때문에 메인 스레드 블로킹이 될 수 있습니다.

자바스크립트에서 웹 스토리지 api를 다룰 때 주의해야할 점이 있을까요?

• 웹 스토리지를 지원하지 않는 브라우저를 고려합니다.

• 사파리 브라우저에서는 시크릿 모드를 사용하면 웹 스토리지를 사용하면 에러가 납니다. 이 부분을 고려합니다.

• 없는 key에 접근할 때를 고려합니다.

어떤 경우에 쿠키, 세션, 웹 스토리지를 사용하면 좋을까요?