다음 데모에서는 사용 방식에 따라 브라우저가 쿠키를 처리하는 방법을 보여줍니다.
- 퍼스트 파티 쿠키: 방문하는 사이트에 의해 설정됩니다.
- 서드 파티 쿠키: 다른 사이트에서 설정합니다.
퍼스트 파티 쿠키 데모
데모: 1pc.glitch.me
데모 페이지에는 최상위 페이지와 동일한 사이트의 이미지와 iframe이 포함되어 있습니다.
Set-Cookie 헤더는 이미지와 iframe 요청에 대한 응답에 모두 포함되지만 Set-Cookie 헤더의 Path 및 Max-Age 값은 서로 다릅니다.
서드 파티 쿠키 데모
데모: 3pc.glitch.me
데모 페이지의 이미지와 iframe은 3p-site.glitch.me라는 다른 사이트에서 가져온 것입니다.
Set-Cookie 헤더는 이미지와 iframe 모두에 대한 요청의 응답에 포함됩니다. 하지만 이미지와 iframe의 Set-Cookie 응답 헤더에는 각각 다른 SameSite 값이 있으며, 이는 브라우저에서 처리되는 방식에 영향을 미칩니다.
이 데모에서는 브라우저 제한, 사용자 설정, 개발자 플래그 또는 기업 정책에 의해 서드 파티 쿠키가 차단될 수 있는 방법을 보여줍니다.
자세히 알아보기:
JavaScript 쿠키 데모
데모: javascript-cookie.glitch.me
데모 페이지에 포함된 JavaScript는 쿠키를 설정합니다.
document.cookie = 'cat=tabby';
설정되면 쿠키가 javascript-cookie.glitch.me의 리소스에 대한 요청에 포함됩니다. 방문 중인 사이트에서 설정하므로 퍼스트 파티 쿠키로 간주됩니다. 동일한 JavaScript가 교차 사이트 iframe에서 호출된 경우 브라우저에서 서드 파티 쿠키로 처리합니다.
SameSite 쿠키 데모
이 데모는 각각 다른 사이트에 있는 두 개의 웹페이지로 구성됩니다.
각 페이지에는 다음이 포함됩니다.
- 다른 사이트의 이미지입니다.
- 다른 사이트 링크
두 사이트 모두 요청에 대한 응답으로 쿠키를 설정하며 기본 SameSite 값 Lax를 사용합니다.
SameSite=Lax을 사용하면 크로스 사이트 탐색 요청 (링크 따라가기)에 대한 응답으로 쿠키를 설정할 수 있지만 다른 크로스 사이트 요청 (예: 이미지 로드)에는 설정할 수 없습니다.
데모 페이지를 방문하여 링크를 따를 때와 이미지를 로드할 때 브라우저에서 SameSite=Lax 쿠키를 다르게 처리하는 방법을 확인하세요.
크로스 사이트 쿠키 추적 데모
이 데모는 두 사이트로 구성됩니다.
example-a.glitch.me 및 example-b.glitch.me의 홈페이지에는 모두 tracker-site.glitch.me의 iframe이 포함되어 있습니다. 이 iframe은 쿠키를 사용하여 iframe이 삽입된 페이지의 탐색 활동을 추적합니다.
example-a.glitch.me와 example-b.glitch.me 사이를 탐색하면 트래커 iframe의 콘텐츠가 업데이트되어 tracker-site.glitch.me가 이 두 사이트에서 내 활동을 추적하고 있음을 보여줍니다. (다른 사이트에 삽입되어 있지 않습니다.)
이 데모에서는 추적기가 쿠키를 사용하여 여러 사이트에서 사용자의 활동을 기록하는 방법을 보여줍니다.
추적 픽셀 데모
이 데모는 두 사이트로 구성됩니다.
두 경우 모두 tracking-pixel-server.glitch.me의 단일 픽셀 이미지가 포함되어 있어 쿠키를 사용하여 이미지가 포함된 사이트에서의 활동을 추적할 수 있습니다.
두 페이지에는 추적 픽셀을 포함하는 페이지에 대해 기록된 페이지 방문을 보여주는 tracking-pixel-server.glitch.me의 iframe도 포함되어 있습니다.
이 데모에서는 쿠키와 함께 추적 픽셀을 사용하여 여러 사이트에서 내 활동을 기록하는 방법을 보여줍니다.
쿠키 데모 가져오기
이 페이지에 포함된 JavaScript는 3p-site.glitch.me/fetch에 크로스 사이트 fetch() 호출을 실행하며, 이는 응답에서 fetch=true 쿠키를 설정합니다.
