Response 프로미스 객체에 Set-Cookie 헤더가 포함되어 전달될 경우 브라우저에서 어떤 일이 발생하나요?

HTTP 쿠키(HTTP Cookies)

HTTP 쿠키는 서버에서 유저의 브라우저에 저장하는 작은 데이터 조각입니다. 쿠키는 주로 세션 관리(로그인 상태, 장바구니), 사용자 개인화(테마, 환경 설정), 트래킹(분석, 광고) 등에 사용됩니다.

Set-Cookie

Set-Cookie는 HTTP 응답 헤더 중 하나로, 쿠키를 서버에서 클라이언트(브라우저)로 전송하는 데 사용됩니다. 이 헤더가 포함된 응답을 받으면, 브라우저는 이를 해석하고 해당 쿠키를 저장합니다. 여러 개의 쿠키를 보내려면 동일한 응답에 여러 개의 Set-Cookie 헤더를 포함해야 합니다.

브라우저에서 Set-Cookie 처리

서버에서 Set-Cookie 헤더를 받게 되면 브라우저는 다음과 같이 동작합니다.

• 쿠키 저장: 브라우저는 Set-Cookie 헤더에 지정된 쿠키와 해당 설정을 저장합니다. 만약 같은 이름의 쿠키가 이미 존재하면, 그 쿠키는 새 값과 설정으로 덮어씌워집니다.
• 쿠키 사용: 지정된 옵션에 따라 브라우저는 동일한 도메인의 서버에 요청을 보낼 때 자동으로 쿠키를 포함합니다. 보통 이는 동일 출처 요청에만 해당되며, 쿠키에 Secure나 SameSite 같은 플래그가 있을 경우에는 다르게 동작할 수 있습니다.
• 쿠키 만료: 쿠키에 Max-Age나 Expires 설정이 있는 경우, 그 시간이 지나면 쿠키는 자동으로 삭제됩니다.

동일 출처 정책 (Same-origin policy)

동일 출처 정책(Same-origin policy)은 웹 보안을 위해 적용되는 중요한 메커니즘으로, 한 출처(origin)에서 로드된 문서나 스크립트가 다른 출처의 리소스와 상호 작용하는 것을 제한합니다.

이 정책은 잠재적으로 악성인 문서가 사용자의 데이터에 악용되는 것을 방지하기 위해 존재합니다. 예를 들어, 악성 웹사이트에서 실행되는 자바스크립트가 사용자가 로그인한 웹메일 서비스나 회사 인트라넷과 같은 다른 출처의 데이터에 접근하여 해당 데이터를 악용하는 상황을 방지할 수 있습니다.

동일 출처 정책은 출처를 구성하는 프로토콜, 호스트, 포트 번호가 모두 동일한 경우 두 URL이 동일한 출처를 가지고 있다고 판단합니다. 이를 "scheme/host/port tuple" 또는 "튜플"이라고도 합니다.

쿠키에 대한 동일 출처 정책의 적용으로 인해 쿠키는 해당 출처와 관련된 페이지에서만 사용할 수 있습니다. 즉, 한 출처에서 설정한 쿠키는 다른 출처의 페이지에서는 접근할 수 없습니다.

동일 출처 정책은 웹 브라우저에 저장된 데이터에도 적용됩니다. 웹 스토리지(Web Storage)나 인덱스된 데이터베이스(IndexedDB)와 같은 데이터 저장소는 오리진별로 분리되어 있어 한 출처의 자바스크립트는 다른 출처의 저장소에 접근할 수 없습니다.

동일 출처 정책은 웹 보안을 강화하고, 악의적인 요청이나 데이터 접근을 방지하여 사용자의 개인정보와 안전을 보호합니다.

forbidden response header name

Set-Cookie는 forbidden response header name 중 하나입니다. 이는 클라이언트 측 JavaScript 코드가 이 헤더에 액세스하는 것을 브라우저가 차단한다는 의미입니다.

fetch API와 같은 비동기 요청은 Set-Cookie를 포함한 응답 헤더를 프론트엔드 코드에서 필터링해야 하는 forbidden response header name으로 정의합니다.

서버 측에서 Set-Cookie 헤더를 설정하고 사용자의 브라우저는 그것을 자동으로 처리합니다. 하지만 만약 클라이언트 측에서 쿠키를 사용해야 하는 경우에는, JavaScript의 Document.cookie API를 사용할 수 있습니다. 이 API는 Set-Cookie 헤더와 달리 클라이언트 측에서 직접 액세스하고 수정할 수 있습니다. HttpOnly 속성이 있는 쿠키는 Document.cookie API로 접근할 수 없습니다.

Set-Cookie의 attributes

Domain=<domain-value>

• 쿠키를 보낼 호스트를 정의합니다.
• 현재 도메인만 값으로 설정하거나 공개 접미사(public suffix)가 아닌 경우 상위 도메인을 설정할 수 있습니다. 도메인을 설정하면 해당 도메인은 물론 모든 하위 도메인에서 쿠키를 사용할 수 있습니다.
• 이 속성을 생략하면 기본적으로 이 속성은 하위 도메인을 포함하지 않고 현재 문서 URL의 호스트로 설정됩니다.
• 이전 사양과 달리 도메인 이름(.example.com)의 선행 점은 무시됩니다.
• 여러 호스트/도메인 값은 허용되지 않지만 도메인이 지정된 경우에는 항상 하위 도메인이 포함됩니다.

Expires=<date>

• 쿠키의 최대 수명을 HTTP 날짜 타임스탬프로 표시합니다.
• 지정하지 않으면 쿠키는 세션 쿠키가 됩니다. 클라이언트가 종료되면 세션이 종료되고 그 후 세션 쿠키가 제거됩니다.
• 대부분의 웹 브라우저에는 모든 탭을 저장하고 다음에 브라우저를 사용할 때 복원하는 세션 복원 기능이 있습니다. 브라우저를 닫지 않은 것처럼 세션 쿠키도 복원됩니다.
• 만료 날짜가 설정된 경우, 기한은 서버가 아닌 쿠키가 설정된 클라이언트에 상대적입니다.

Max-Age=<number>

• 쿠키가 만료될 때까지의 시간(초)을 나타냅니다. 0 또는 음수는 쿠키가 즉시 만료됩니다. Expires와 Max-Age가 모두 설정되어 있으면 Max-Age가 우선합니다.

Partitioned

• 쿠키가 분할 저장소를 사용하여 저장되어야 함을 나타냅니다.

Path=<path-value>

• 브라우저가 쿠키 헤더를 전송하기 위해 요청된 URL에 존재해야 하는 경로를 나타냅니다.
• 슬래시(/) 문자는 디렉토리 구분 기호로 해석되며 하위 디렉토리도 일치합니다. 예를 들어 Path=/docs,
  • 의 경우 요청 경로 /docs, /docs/, /docs/Web/, /docs/Web/HTTP가 모두 일치합니다.
  • 요청 경로 /, /docsets, /fr/docs는 일치하지 않습니다.

HttpOnly

• JavaScript가 Document.cookie 등을 통해 쿠키에 액세스하는 것을 금지합니다. 즉, 서버와 클라이언트 사이의 HTTP(S) 요청에서만 사용될 수 있습니다.
• HttpOnly로 생성된 쿠키는 XMLHttpRequest.send() 또는 fetch()를 호출할 때와 같이 자바스크립트로 시작된 요청과 함께 전송됩니다.
• 주로 XSS(Cross-Site Scripting) 공격을 방지하는 데 사용됩니다. XSS 공격자는 브라우저에서 실행되는 악성 스크립트를 통해 쿠키에 접근하려고 시도할 수 있는데, HttpOnly 플래그는 이를 방지합니다.

Secure

• 이 속성이 설정된 쿠키는 HTTPS를 통해서만 전송될 수 있습니다. HTTP를 통해 전송되려 할 때는 브라우저가 전송을 차단합니다.
• 중간자 공격(man-in-the-middle attack)으로부터 보호하는 데 중요한 역할을 합니다. 중간자 공격자는 데이터를 탈취하거나 변조할 수 있으므로, Secure 플래그를 사용하면 쿠키 정보가 암호화된 연결을 통해서만 전송되도록 보장할 수 있습니다.

SameSite

• 브라우저가 사이트 간 요청과 함께 쿠키를 보내는 방식을 제어합니다. 이 속성은 CSRF(Cross-Site Request Forgery) 공격을 방지하는 데 효과적입니다.
• Strict: 브라우저가 현재의 사이트와 다른 사이트로의 요청과 함께 쿠키를 전송하지 않게 합니다. 이는 사용자가 직접 URL을 입력하여 사이트에 접속하거나, 사이트 내의 링크를 클릭하여 다른 페이지로 이동하는 경우에도 해당됩니다. 이 옵션은 보안성을 높여주지만, UX에는 약간의 불편함을 줄 수 있습니다.
• Lax : Strict보다 덜 제한적입니다. 브라우저는 top-level navigation에 대한 GET 요청(사용자가 URL을 입력하거나, 사이트 외부에서 링크를 클릭하는 등)과 함께 쿠키를 전송하지만, 다른 모든 cross-site 요청에 대해서는 쿠키를 전송하지 않습니다.
• None: 브라우저가 모든 요청에 대해 쿠키를 전송하도록 합니다. 즉, 사이트 간 요청에 대해 제한을 두지 않습니다. 이렇게 하려면 쿠키는 반드시 Secure 속성도 가지고 있어야 합니다. 이는 사용자의 정보를 HTTPS를 통해 안전하게 보호하기 위함입니다.

Cookie가 저장되는 장소

쿠키는 클라이언트(브라우저)의 로컬 저장소에 저장됩니다. 이 저장소는 브라우저에 의해 관리됩니다. 쿠키는 브라우저의 쿠키 저장소에 저장되는 작은 텍스트 파일입니다. 쿠키의 내용은 키(key)와 값(value)의 쌍으로 구성되어 있습니다.

쿠키 저장소는 브라우저에 종속적이며, 주로 다음과 같은 위치에 저장됩니다:

• 파일 시스템: 일부 브라우저는 쿠키를 로컬 파일 시스템에 저장합니다. 파일 시스템 내의 특정 디렉토리 또는 파일로 저장되며, 브라우저 설정 또는 프로파일에 따라 다를 수 있습니다.
• 메모리: 일부 브라우저는 쿠키를 메모리에 저장합니다. 이는 브라우저 세션 동안만 유지되며, 브라우저를 종료하면 쿠키가 삭제됩니다.

쿠키 저장소의 정확한 위치 및 내부 구현은 브라우저 제조사에 따라 다를 수 있습니다. 일반적으로 개발자는 직접 쿠키 저장소에 접근하거나 조작할 수 있는 방법을 제공하지 않으며, 대신 브라우저가 이를 자동으로 처리합니다.

Chrome devtool Application/cookies

크롬 개발자 도구의 Application/cookies는 웹 페이지와 관련된 쿠키 정보를 확인하고 조작할 수 있는 도구입니다. 이 도구를 사용하면 현재 페이지에서 설정된 쿠키를 보거나 쿠키를 추가, 수정 또는 삭제할 수 있습니다.

쿠키 정보의 열에는 쿠키의 이름, 값, 도메인, 경로, 만료 날짜 및 보안 여부 등의 정보가 포함될 수 있습니다. 이를 통해 현재 페이지에서 사용되는 쿠키를 확인하고 쿠키의 세부 정보를 파악할 수 있습니다.

개발자 도구의 "Cookies" 섹션에서 쿠키를 추가, 수정 또는 삭제할 수도 있습니다. 쿠키를 추가하려면 쿠키의 이름, 값, 도메인, 경로 등을 지정하고 "Add" 버튼을 클릭하면 됩니다. 쿠키를 수정하려면 해당 쿠키를 클릭하여 수정할 수 있습니다. 쿠키를 삭제하려면 해당 쿠키를 선택하고 "Delete" 버튼을 클릭하면 됩니다.

크롬 개발자 도구의 Application/cookies 기능을 사용하면 웹 애플리케이션에서 사용되는 쿠키를 쉽게 확인하고 조작할 수 있습니다. 이를 통해 쿠키의 동작을 디버깅하거나 테스트하는 데 도움을 받을 수 있습니다.

Reference

• Set-Cookie - HTTP | MDN
• Fetch Standard
• Using HTTP cookies - HTTP | MDN
• Cookies - HTTP | MDN
• Same-origin policy - Web security | MDN