HTTP 쿠키는 주로 사용자 세션을 관리하고, 사용자 맞춤설정 환경설정을 저장하며, 사용자 행동을 추적하는 데 사용됩니다. 또한 웹 전반에서 볼 수 있는 성가신 '이 페이지에서 쿠키를 사용'하는 동의 양식의 원인이기도 합니다. 이 가이드에서는 Chrome DevTools를 사용하여 페이지의 쿠키를 보고, 추가하고, 수정하고, 삭제하는 방법을 설명합니다.
Cookies(쿠키) 창 열기
- Chrome DevTools를 엽니다.
- 애플리케이션 > 저장소 > 쿠키를 열고 출처를 선택합니다.
입력란
Cookies(쿠키) 테이블에는 다음 필드가 포함됩니다.
- 이름. 쿠키의 이름입니다.
- 값. 쿠키의 값입니다.
- 도메인. 쿠키를 수신하도록 허용된 호스트입니다.
- Path를 지정합니다.
Cookie헤더를 전송하기 위해 요청된 URL에 있어야 하는 URL입니다. - Expires / Max-Age. 쿠키의 만료일 또는 최대 기간입니다.
세션 쿠키의 경우 이 값은 항상
Session입니다. - Size(크기). 바이트 단위의 쿠키 크기입니다.
- HttpOnly true인 경우 이 필드는 쿠키를 HTTP를 통해서만 사용해야 하며 자바스크립트 수정이 허용되지 않음을 나타냅니다.
- 보안. true인 경우 이 필드는 쿠키가 안전한 HTTPS 연결을 통해서만 서버로 전송될 수 있음을 나타냅니다.
- SameSite 코드 지원: 쿠키가 실험용
SameSite속성을 사용하는 경우Strict또는Lax가 포함됩니다. - 파티션 키. 독립적인 파티션 상태가 있는 쿠키의 경우 파티션 키는 쿠키를 설정하는 엔드포인트에 대한 요청을 시작할 때 브라우저가 방문 중이던 최상위 URL의 사이트입니다.
- 우선순위. 지원 중단된 쿠키 우선순위 속성을 사용하는 경우
Low,Medium(기본값) 또는High가 포함됩니다.
쿠키의 값을 보려면 표에서 선택합니다. 퍼센트 인코딩 없이 값을 보려면 URL 디코딩된 표시를 선택합니다.
쿠키 필터링
필터 상자를 사용하여 이름 또는 값을 기준으로 쿠키를 필터링합니다.
다른 필드로 필터링하는 기능은 지원되지 않습니다. 필터는 대소문자를 구분하지 않습니다.
쿠키 추가
임의의 쿠키를 추가하려면 다음 단계를 따르세요.
- 표에서 빈 행을 더블클릭합니다.
- 이름 및 값을 입력하고 Enter 키를 누릅니다.
DevTools는 다른 필수 필드를 자동으로 채웁니다. 다음에 설명된 대로 수정할 수 있습니다.
쿠키 수정
자동으로 업데이트되는 크기를 제외한 모든 필드를 수정할 수 있습니다.
수정할 입력란을 더블클릭합니다.
DevTools에서 잘못된 필드 값이 있는 쿠키를 빨간색으로 강조표시합니다.
유효한 쿠키를 필터링하려면 상단 작업 모음에서 문제가 있는 쿠키만 표시를 선택합니다.
쿠키 삭제
쿠키를 삭제하려면 쿠키를 선택하고 상단의 작업 표시줄에서 선택한 항목 삭제를 클릭합니다.
모두 지우기를 클릭하여 쿠키를 모두 삭제합니다.
서드 파티 쿠키 식별 및 검사
서드 파티 쿠키는 현재의 최상위 페이지와 다른 사이트에 의해 설정되는 쿠키입니다. 서드 파티 쿠키에는 SameSite=None 속성이 있습니다.
DevTools는 애플리케이션 > 저장소 > 쿠키에 이러한 쿠키를 나열하고 그 옆에 경고 경고 아이콘을 표시합니다. 아이콘 위로 마우스를 가져가서 도움말을 확인하고 클릭하면 Issues 패널로 이동하여 자세한 정보를 확인할 수 있습니다.
네트워크 > 요청 > 쿠키에서도 서드 파티 쿠키를 찾을 수 있습니다.
네트워크 패널에 문제가 있는 쿠키가 강조표시되고 서드 파티 쿠키 단계적 중단으로 인해 영향을 받은 쿠키 옆에 경고 경고 아이콘이 표시됩니다.