쿠키는 브라우저에 저장되는 데이터 청크로, 웹사이트가 기능을 실행하는 데 필요한 상태 및 기타 정보를 유지하는 데 사용됩니다.
쿠키는 웹사이트가 사용자 머신에 저장하는 작은 파일로, 저장된 정보는 브라우저와 웹사이트 간에 주고받습니다.
각 쿠키는 키-값 쌍과 함께 쿠키가 사용되는 시점과 위치를 제어하는 여러 속성으로 구성됩니다. 이러한 속성은 만료일과 같은 항목을 설정하거나 쿠키가 HTTPS를 통해서만 전송되어야 함을 나타내는 데 사용됩니다. HTTP 헤더 또는 JavaScript 인터페이스를 통해 쿠키를 설정할 수 있습니다.
쿠키는 웹사이트에 영구 상태를 추가하는 데 사용할 수 있는 방법 중 하나입니다. 수년에 걸쳐 기능이 확장되고 발전했지만 플랫폼에 몇 가지 문제가 있는 기존 문제가 남았습니다. 이를 해결하기 위해 브라우저 (Chrome, Firefox, Edge 포함)는 개인 정보 보호를 강화하는 기본값을 적용하도록 동작을 변경하고 있습니다.
작동 중인 쿠키
사용자에게 '새로운 소식' 프로모션을 표시하려는 블로그가 있다고 가정해 보겠습니다. 사용자는 프로모션을 닫을 수 있으며, 그러면 한동안 다시 표시되지 않습니다. 이 환경설정을 쿠키에 저장하고, 한 달(2,600,000초) 후에 만료되도록 설정하고, HTTPS를 통해서만 전송할 수 있습니다. 이 헤더는 다음과 같이 표시됩니다.
Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
Set-Cookie 헤더를 사용하여 쿠키를 설정합니다.
독자가 이러한 요구사항을 충족하는 페이지를 보는 경우(보안 연결을 사용하고 쿠키가 한 달 미만인 경우) 브라우저는 요청에 이 헤더를 전송합니다.
Cookie: promo_shown=1
Cookie 헤더에서 쿠키를 다시 전송합니다.
document.cookie를 사용하여 JavaScript에서 해당 사이트에 사용할 수 있는 쿠키를 추가하고 읽을 수도 있습니다. document.cookie에 할당하면 해당 키가 있는 쿠키가 생성되거나 재정의됩니다. 예를 들어 브라우저의 JavaScript 콘솔에서 다음을 시도해 볼 수 있습니다.
→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
← "promo_shown=1; Max-Age=2600000; Secure"
document.cookie를 읽으면 현재 컨텍스트에서 액세스할 수 있는 모든 쿠키가 출력되며, 각 쿠키는 세미콜론으로 구분됩니다.
→ document.cookie;
← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
document.cookie를 사용하여 쿠키에 액세스할 수 있습니다.
일부 인기 사이트에서 이 작업을 시도하면 대부분의 사이트에서 3개 이상의 쿠키를 설정하는 것을 확인할 수 있습니다. 대부분의 경우 이러한 쿠키는 해당 도메인에 대한 모든 요청에서 전송되며, 이는 여러 가지 영향을 미칩니다. 업로드 대역폭은 사용자에게 다운로드보다 더 제한되는 경우가 많으므로 모든 아웃바운드 요청에 대한 오버헤드가 첫 번째 바이트까지의 시간에 지연을 추가합니다. 설정하는 쿠키의 수와 크기를 보수적으로 설정하세요. Max-Age 속성을 사용하여 쿠키가 필요 이상으로 오래 유지되지 않도록 하세요.
퍼스트 파티 쿠키와 서드 파티 쿠키란 무엇인가요?
이전에 살펴본 동일한 사이트 선택으로 돌아가면 현재 방문 중인 사이트뿐만 아니라 다양한 도메인에 쿠키가 있는 것을 확인할 수 있습니다. 현재 사이트의 도메인과 일치하는 쿠키, 즉 브라우저의 주소 표시줄에 표시되는 쿠키를 퍼스트 파티 쿠키라고 합니다. 마찬가지로 현재 사이트 이외의 도메인에서 가져온 쿠키를 서드 파티 쿠키라고 합니다. 이는 절대적인 라벨이 아니라 사용자 컨텍스트와 관련이 있습니다. 동일한 쿠키는 사용자가 현재 방문 중인 사이트에 따라 퍼스트 파티 또는 서드 파티 쿠키가 될 수 있습니다.
이전 예시를 계속해서 살펴보겠습니다. 블로그 게시물 중 하나에 특히 멋진 고양이 사진이 있고 /blog/img/amazing-cat.png에 호스팅되어 있다고 가정해 보겠습니다. 이 이미지가 너무 멋지기 때문에 다른 사람이 자신의 사이트에서 직접 사용합니다. 방문자가 블로그를 방문하여 promo_shown 쿠키가 있는 경우 다른 사람의 사이트에서 amazing-cat.png를 볼 때 해당 쿠키가 이미지 요청에서 전송됩니다. promo_shown은 다른 사람의 사이트에서 아무것도 사용되지 않으므로 누구에게도 유용하지 않으며 요청에 오버헤드만 추가합니다.
의도하지 않은 효과라면 왜 이렇게 해야 할까요? 이 메커니즘을 통해 사이트는 서드 파티 컨텍스트에서 사용될 때 상태를 유지할 수 있습니다. 예를 들어 사이트에 YouTube 동영상을 삽입하면 방문자에게 플레이어에 '나중에 볼 동영상' 옵션이 표시됩니다. 방문자가 이미 YouTube에 로그인한 경우 서드 파티 쿠키를 통해 삽입된 플레이어에서 세션을 사용할 수 있습니다. 즉, '나중에 볼 동영상' 버튼을 사용하면 로그인하라는 메시지가 표시되거나 페이지에서 YouTube로 이동하지 않고도 동영상을 한 번에 저장할 수 있습니다.
웹의 문화적 속성 중 하나는 기본적으로 열려 있는 경향이 있다는 것입니다. 이는 많은 사용자가 자체 콘텐츠와 앱을 만들 수 있도록 한 요인 중 하나입니다. 하지만 이로 인해 여러 가지 보안 및 개인 정보 보호 문제가 발생했습니다. 크로스 사이트 요청 위조 (CSRF) 공격은 요청을 시작한 사용자와 관계없이 쿠키가 지정된 출처에 대한 모든 요청에 연결된다는 사실에 의존합니다. 예를 들어 evil.example을 방문하면 your-blog.example에 대한 요청이 트리거될 수 있으며 브라우저는 연결된 쿠키를 기꺼이 연결합니다. 블로그에서 이러한 요청을 검증하는 방법을 주의하지 않으면 evil.example이 게시물 삭제 또는 자체 콘텐츠 추가와 같은 작업을 트리거할 수 있습니다.
사용자는 여러 사이트에서 활동을 추적하는 데 쿠키가 어떻게 사용될 수 있는지에 관해서도 더 잘 알고 있습니다. 하지만 지금까지는 쿠키의 의도를 명시적으로 밝힐 방법이 없었습니다. promo_shown 쿠키는 퍼스트 파티 맥락에서만 전송되어야 하는 반면, 다른 사이트에 삽입할 위젯의 세션 쿠키는 서드 파티 컨텍스트에서 로그인 상태를 제공하기 위해 의도적으로 존재합니다.
적절한 SameSite 속성을 설정하여 쿠키의 의도를 명시적으로 밝힐 수 있습니다.
퍼스트 파티 쿠키를 식별하고 적절한 속성을 설정하려면 퍼스트 파티 쿠키 레시피를 확인하세요.