브라우저저장소.md

🔗 참고자료

위키피디아 / 사이트간 요청 위조 / https://en.wikipedia.org/wiki/Cross-site_request_forgery

NHN Cloud Meetup! / 브라우저 싸움에 등 터지는 개발자들을 위한 HTTP쿠키와 톰캣 쿠키 프로세서 이야기 / https://meetup.toast.com/posts/209

쿠키와 세션 개념 / https://interconnection.tistory.com/74

예상질문 및 답변

쿠키가 무엇인가요?

쿠키는 클라이언트(브라우저)에 저장되는 키-값 쌍의 문자열 데이터입니다.

최대 4KB로 용량이 매우 작습니다.

만료기간이 있습니다.

자바스크립트 cookie API를 통해 클라이언트에서 쿠키를 만들 수도 있지만, 쿠키는 보통 특정 목적을 위해 사용하기 때문에 서버에서 쿠키를 발행해서 클라이언트에 넘겨줍니다. 이 때 응답 headers에 set-Cookie속성을 사용하여 넘겨줍니다. 쿠키를 클라이언트에서 서버로 보낼 때는, 브라우저가 자동으로 header에 쿠키를 넣어서 요청을 합니다.

쿠키는 왜 생겨났나요?

루 몬툴리가 유닉스 프로그래머들이 사용하는 '매직쿠키'라는 용어에서 영감을 얻어 이름지었습니다. 1994년 당시, 루 몬툴리는 넷스케이프에서 근무하고 있었는데, 전자상거래 앱을 개발하고 있었습니다. 넷스케이프는 방문했던 사용자인지 아닌지를 구분하기 위해 각 사용자의 상태를 저장할 수 있는 방법이 무엇인지 고민하였는데, 쿠키는 이 문제를 해결할 수 있었습니다.

왜 사용자의 상태를 저장할 수 없었나요? → HTTP 프로토콜의 매 연결(요청과 응답)은 일회성이고 독립적으로 처리됩니다. 만약 어떤 정보를 HTTP 프로토콜로 계속 요청과 응답을 주고받아야 한다면 매우 번거롭고 웹 로딩을 느리게 만들 수 있습니다. 그래서 그런 번거로움을 쿠키와 세션으로 해결할 수 있습니다.

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

1. 모든 브라우저에서 지원합니다.

2. 만료기간이 있습니다.

3. key-value값은 필수입니다. 하지만 많은 선택 속성이 있습니다.

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

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. 만료기간에 따라서

세션쿠키와 지속(영구)쿠키로 나눌 수 있습니다. 세션쿠키는 만료기간설정이 되지않은 임시쿠키이고 브라우저를 닫으면 삭제됩니다. 지속쿠키는 브라우저를 닫거나 컴퓨터를 재시작해도 남아있습니다. 보통 사용자가 주기적으로 방문하는 웹사이트에 대한 설정 정보나 로그인 이름을 유지하려고 사용합니다. Expires 나 Max-age라는 속성으로 만료기간을 정할 수 있습니다.

2. 버전에 따라서

현재 크게 레거시 쿠키와 RFC6265쿠키 2가지로 나눌 수 있습니다.

→ 이 부분은 꼬리 질문으로 탈탈 털릴 수 있을 것 같습니다... 버전에 대해서는 아예 생략 하시거나, 참고 포스팅 <NHN Cloud Meetup! / "브라우저 싸움에 등 터지는 개발자들을 위한 HTTP쿠키와 톰캣 쿠키 프로세서 이야기"> 를 읽어보시면 잘 대응하실 수 있을 것 같습니다.

3. 발행한 도메인에 따라서

퍼스트파티 쿠키와 서드파티 쿠키로 나눌 수 있습니다. 퍼스트파티 쿠키란 웹사이트 소유자가 발행한 쿠키입니다. 서브 도메인이 발행한 쿠키도 포함입니다. (서브 도메인이란 같은 도메인에서 파생된 하위 도메인입니다. https://m.naver.com/ 같은 것들)

서드파티 쿠키란 웹사이트 소유자가 아닌 제 3자가 활용하는 쿠키입니다. 이러한 서드 파티 쿠키를 사용해서 사용자들의 행동을 파악하고 관심사를 추적하여 데이터를 수집할 수 있는데, 개인 정보 보호 로 인해 대중적인 브라우저는 서드 파티 쿠키를 제한하고 있습니다. 이미 사파리와 파이어폭스는 서드 파티 쿠키를 제한했고, 크롬도 고려하고 있습니다.

세컨드 파티 쿠키는 없나요? → 예전에는 어떤 회사의 자회사 정도 되는 위치의 회사들이 발행한 쿠키를 세컨드 쿠키라고 했다고 알고 있습니다. 요즘은 의미가 많이 퇴색되어 서드파티로 통합해서 부른다는 정도로만 알고 있습니다.

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

1. 클라이언트가 서버에 페이지를 최초 요청(request)합니다.
2. 서버에서 쿠키를 생성합니다.
3. 서버는 헤더에 쿠키를 담아 클라이언트에 응답(reponse)합니다.
4. 쿠키 만료기간에 따라 쿠키가 브라우저에 저장됩니다.
5. 이 후 다시 클라이언트가 서버에 동일한 페이지를 요청합니다. 이 때 쿠키가 헤더에 담겨 서버에 보내집니다.
6. 서버는 쿠키를 읽고 클라이언트의 상태가 변경되었는지 확인합니다. 변경사항이 있다면 쿠키를 재발행하여 클라이언트에 응답합니다.

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

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

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

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

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

서버 측에서 관리되는 클라이언트의 상태데이터를 세션이라고 합니다. 클라이언트가 서버에 페이지를 요청하면 서버는 클라이언트의 id를 생성하고 클라이언트의 상태를 유지합니다. 서버에서 관리되기 때문에 보안상 이점이 있지만, 트래픽이 커지면 서버의 용량에 과부하가 걸려 로딩이 느려질 수 있습니다.

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

1. 클라이언트가 서버에 접속 시 세션ID를 발급받습니다.
2. 클라이언트는 발급받은 세션ID를 쿠키로 저장합니다.
3. 이 후 클라이언트는 서버에 요청 시 세션ID가 있는 쿠키를 보냅니다.
4. 서버는 세션ID를 받아 클라이언트의 상태를 알아내서 다시 응답을 내립니다.
5. 브라우저가 서버에서 종료되면 사라집니다.

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

1. 저장되는 위치. 쿠키는 클라이언트, 세션은 서버에 저장됩니다.
2. 보안. 쿠키는 클라이언트 자체에서 상태를 가지고 있지만, 세션을 사용한다면 클라이언트는 세션ID만 가지고 있고 실제 상태 데이터는 서버에 저장되기 때문에 보안면에서 세션이 더 우수합니다.
3. 라이프사이클. 쿠키는 만료기간을 설정하여 클라이언트 상태가 기준입니다. 세션은 서버 메모리 상에서 사라질 때 까지입니다.
4. 속도. 쿠키는 클라이언트에 저장되고 헤더에 담아 보내지기 때문에 서버의 데이터베이스에서 세션ID를 통해 데이터를 찾는 것보다 비교적 속도가 더 빠릅니다.

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

HTML5 에 추가된 스펙으로 브라우저에서 key-value 값 쌍을 쿠키보다 더 직관적으로 저장할 수 있습니다. MDN은 쿠키보다 웹 스토리지를 사용할 것을 권장하고 있습니다.

1. 5MB의 저장용량
2. 요청 시 Headers에 전송하지 않음 (CSRF 공격에 안전)
3. 문자열만 저장하지만 직렬화/역직렬화로 객체 형태로도 저장가능
4. 로컬스토리지와 세션스토리지가 있음.

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

1. 기간
   • 로컬스토리지는 사용자가 직접 삭제하거나 자바스크립트를 이용해서 삭제하기 전까지는 영구적으로 남아있습니다.
   • 세션스토리지는 브라우저를 닫으면 삭제됩니다.
2. 범위
   • 세션스토리지는 브라우저의 탭 마다 따로 저장됩니다. 로컬스토리지는 도메인과 브라우저가 동일하다면 유지됩니다.

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

1. 자바스크립트로 접근 가능하기 때문에 XSS 공격에 취약합니다.
2. 브라우저 간 공유가 되지 않습니다.
3. 세션 스토리지 일 경우 탭 간 공유가 되지 않습니다.
4. 로컬 스토리지 일 경우 만료기간을 설정할 수 없습니다.
5. 로컬 스토리지에 많은 데이터를 저장할 경우 파싱이 느립니다. 그리고 이것은 동기적으로 실행되기 때문에 메인 스레드 블로킹이 될 수 있습니다.

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

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

등등... 에러 핸들링을 해야하는 부분을 말하면 좋을 것 같습니다.

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

상황에 따라 적절한 선택을 해야합니다.

쿠키: 아이디 자동완성, n일 동안 보지 않기, 로그인하지 않은 상태의 장바구니 등 조작되거나 가로채여도 큰 일은 일어나지 않을 정보들이면 좋을 것 같습니다.

세션스토리지: 이전페이지 저장, 이전 스크롤 위치 저장 등

로컬스토리지: 사용자 설정 저장, 글 임시 저장 등

세션: 브라우저에 저장되면 안될 민감한 정보들