쿠키는 브라우저에 저장된 데이터 청크로, 웹사이트에서 기능을 실행하는 데 필요한 상태와 기타 정보를 유지하는 데 사용됩니다.
쿠키는 웹사이트에서 사용자의 컴퓨터에 저장하는 작은 파일로, 저장된 정보는 브라우저와 웹사이트 사이를 오가며 이동합니다.
각 쿠키는 해당 쿠키가 사용되는 시점과 위치를 제어하는 여러 속성과 함께 키-값 쌍입니다. 이러한 속성은 만료일을 설정하거나 쿠키가 HTTPS를 통해서만 전송되어야 함을 나타내는 데 사용됩니다. HTTP 헤더 또는 자바스크립트 인터페이스를 통해 쿠키를 설정할 수 있습니다.
쿠키는 웹사이트에 지속적인 상태를 추가하는 데 사용할 수 있는 방법 중 하나입니다. 지난 몇 년 동안 이들의 역량은 성장과 발전을 거듭했지만 플랫폼에는 문제가 되는 기존 문제가 남아 있었습니다. 이 문제를 해결하기 위해 브라우저 (Chrome, Firefox, Edge 포함)에서는 개인 정보 보호 기본값을 강화하도록 동작을 변경하고 있습니다.
쿠키 실행
사용자에게 '새로운 기능' 프로모션을 표시하려는 블로그가 있다고 가정해 보겠습니다. 사용자는 프로모션을 닫을 수 있으며 이후 한동안 다시 표시되지 않습니다. 이 환경설정을 쿠키에 저장하고 1개월(2,600,000초) 후에 만료되도록 설정하고 HTTPS를 통해서만 전송할 수 있습니다. 헤더는 다음과 같습니다.
Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
Set-Cookie 헤더를 사용하여 쿠키를 설정합니다.
독자가 이러한 요구사항을 충족하는 페이지를 볼 때(보안 연결 상태이고 쿠키가 1개월이 지나지 않은 경우) 브라우저에서 요청에 다음 헤더를 전송합니다.
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 속성을 설정하여 쿠키로 인텐트를 명시적으로 지정할 수 있습니다.
퍼스트 파티 쿠키를 식별하고 적절한 속성을 설정하려면 퍼스트 파티 쿠키 레시피를 참고하세요.