쿠키는 브라우저에 저장된 데이터 덩어리로, 웹사이트에서 기능을 실행하는 데 필요한 상태 및 기타 정보를 유지하는 데 사용됩니다.
쿠키는 웹사이트에서 사용자의 컴퓨터에 저장하는 작은 파일로, 저장된 정보가 브라우저와 웹사이트 사이를 오갑니다.
각 쿠키는 쿠키가 사용되는 시기와 위치를 제어하는 여러 속성과 함께 키-값 쌍입니다. 이러한 속성은 만료일 등을 설정하거나 HTTPS를 통해서만 쿠키를 전송해야 함을 나타내는 데 사용됩니다. HTTP 헤더 또는 JavaScript 인터페이스를 통해 쿠키를 설정할 수 있습니다.
쿠키는 웹사이트에 지속적인 상태를 추가하는 데 사용할 수 있는 방법 중 하나입니다. 지난 수년간 이들의 역량은 성장하고 발전했지만, 플랫폼에는 몇 가지 문제가 있는 레거시 문제가 있었습니다. 이 문제를 해결하기 위해 Chrome, Firefox, Edge 등의 브라우저는 개인 정보를 더 안전하게 보호하는 기본값을 적용하기 위해 동작을 변경하고 있습니다.
쿠키 작동 방식
'새로운 소식'을 표시하고자 하는 블로그가 있다고 가정해 보겠습니다. 프로모션 코드를 있습니다. 사용자가 프로모션을 닫으면 당분간 다시 표시되지 않습니다. 환경설정을 쿠키에 저장하여 한 달 후 만료되도록 설정할 수 있습니다 HTTPS를 통해서만 전송합니다. 이 헤더는 다음과 같습니다.
Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
</ph>
<ph type="x-smartling-placeholder">Set-Cookie 헤더를 사용하여 쿠키를 설정합니다.
독자가 이러한 요구사항을 충족하는 페이지를 보면 쿠키가 생성된 지 1개월이 지나지 않았고 브라우저 요청에서 다음 헤더를 보냅니다.
Cookie: promo_shown=1
</ph>
<ph type="x-smartling-placeholder">Cookie 헤더로 쿠키를 다시 전송합니다.
또한
document.cookie document.cookie님에게 할당하면
해당 키로 쿠키를 재정의할 수 있습니다. 예를 들어
다음 단계를 따르세요.
→ 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"
</ph>
<ph type="x-smartling-placeholder">document.cookie를 사용하여 쿠키에 액세스할 수 있습니다.
일부 인기 사이트에서 이를 시도해 보면 대부분
세 개의 쿠키보다 훨씬 더 많은 수의 쿠키를 설정했습니다. 대부분의 경우
쿠키는 해당 도메인에 대한 모든 단일 요청에서 전송되며, 이 도메인에는
영향을 미칠 수 있습니다 일반적으로 업로드 대역폭은
모든 아웃바운드 요청의 오버헤드로 인해 시간이 지연되므로
첫 번째 바이트까지 복사됩니다. 설정하는 쿠키의 수와 크기를 신중하게 선택하세요. 제조업체
Max-Age 속성을 사용하여 쿠키가 유지되지 않도록 합니다.
더 오래 걸릴 수 있다는
사실을 알고 있을 겁니다
퍼스트 파티 쿠키와 서드 파티 쿠키란 무엇인가요?
이전에 봤던 동일한 사이트로 돌아가면 다양한 도메인에 대한 쿠키가 있지만 현재 방문 중이던 장소만 볼 수 있습니다. 사이트의 도메인과 일치하는 현재 사이트, 즉 브라우저의 주소 표시줄에 표시되는 내용이 퍼스트 파티 쿠키로 전환할 수 있습니다. 마찬가지로, 현재 사이트를 서드 파티 쿠키라고 합니다. 절대적인 것은 아닙니다 사용자의 컨텍스트에 상대적입니다. 같은 쿠키가 사용자가 이용 중인 사이트에 따라 퍼스트 파티 또는 서드 파티로 전환할 수 있습니다.
<ph type="x-smartling-placeholder">
위의 예를 계속하여, 블로그 게시물 중 하나에
아주 멋진 고양이 사진이 들어 있습니다.
/blog/img/amazing-cat.png 이건 정말 멋진 이미지이기 때문에, 다른 사람은
직접 사용합니다. 블로그 방문자가
promo_shown 쿠키에서 amazing-cat.png을(를) 볼 때
사용자의 사이트에서 이미지 요청에 쿠키가 전송됩니다. 이
promo_shown가 어떤 용도로도 사용되지 않으므로 누구에게도 유용하지 않음
요청에 오버헤드가 추가되는 것뿐입니다.
의도하지 않은 결과라면 왜 이렇게 해야 할까요? 이게 바로 애플리케이션이 사용 중일 때 사이트가 상태를 유지할 수 있도록 하는 서드 파티 맥락에 따라 다릅니다. 예를 들어 YouTube 동영상을 사이트에 삽입했다면 '나중에 볼 동영상'이 표시됩니다 지정할 수 있습니다. 방문자가 이미 YouTube에 로그인되어 있는 경우 삽입된 플레이어에 동영상 재생 중에 '나중에 볼 동영상'을 버튼을 누르면 로그인하라는 메시지를 묻지 않고 동영상을 한 번에 저장하기만 하면 됩니다. 페이지에서 YouTube로 다시 이동할 수 있습니다.
<ph type="x-smartling-placeholder">
웹의 문화적 특성 중 하나는 사람들이 온라인에 접속했을 때
기본값입니다. 이렇게 많은 사람들이 동영상을 만들 수 있게 된
앱과 앱을 공유할 수 있습니다. 그러나 이로 인해
보안 및 개인 정보 보호 문제를 해결할 수 있습니다. 크로스 사이트 요청 위조 (CSRF) 공격은
사용자 요청에 관계없이 쿠키가 특정 출처에 대한 요청에 첨부된다는 사실을
요청을 시작할 수 있습니다. 예를 들어 evil.example를 방문하면
your-blog.example로 요청을 트리거하면 브라우저에서
정보를 수집합니다. 블로그에서 저작권의 신분을 확인하는 방법에 주의를 기울이지 않는다면
요청은 evil.example에서 게시물 삭제 또는 추가
자체 콘텐츠를 제작합니다.
사용자들은 또한 쿠키를 사용하여
사용자 행동을 측정할 수 있습니다. 하지만 지금까지는
쿠키로 인텐트를 명시적으로 명시해야 합니다. promo_shown 쿠키는 다음과 같은 조건을 충족해야 합니다.
퍼스트 파티 맥락에서만 전송되지만 위젯의 세션 쿠키는
의도적으로 다른 사이트에 퍼가려는 경우
로그인 상태로 전환할 수 있습니다
적절한 SameSite 속성을 설정하여 인텐트를 쿠키를 사용하여 명시적으로 명시할 수 있습니다.
퍼스트 파티 쿠키를 식별하고 적절한 속성을 설정하려면 퍼스트 파티 쿠키 레시피를 참고하세요.