Crooked Style Sheets, 순수 CSS와 자바스크립트 없이 클릭, 브라우저, 폰트를 추적하다

2018년에 웹사이트 방문자를 추적하는 일은 자바스크립트 문제처럼 보였다. 스크립트가 페이지 로드 시 또는 클릭 시 비콘을 발사하고, 스크립팅이 차단되거나 비활성화되거나 필터링되면 채널 전체가 어두워진다. 개발자 jbtronics의 개념 증명인 Crooked Style Sheets는 브라우저 자체의 CSS 엔진만 사용하여 자바스크립트 없이도 페이지를 추적할 수 있음을 보여주었다.

명백한 접근 방식은 모두 스크립트나 픽셀에 의존했다. 집으로 전화하는 추적 스니펫, 이미지 태그, 타사 분석 SDK 등이다. 이들 모두는 스크립트 차단기와 광고 필터가 잡도록 만들어진 가시적인 요청 클래스이며, 스크립팅이 전혀 실행되지 않는 페이지에서는 어느 것도 발사되지 않는다.

비결은 브라우저가 CSS url() 리소스를 가져오는 시점에 있었다. 선택자가 일치할 때만 가져온다. 따라서 링크의 :active 스타일에 content: url(track.php?action=link2_clicked)가 있으면, 브라우저는 링크가 클릭될 때 정확히 그 URL을 요청하게 된다. 같은 원리가 호버링, 체크된 박스, :valid를 통한 패턴 일치 텍스트, @supports를 통한 브라우저 감지, 그리고 Calibri가 없을 때 로드되는 @font-face 폴백을 통한 설치된 폰트 감지까지 포괄했다. 모든 요청은 타임스탬프와 URL에 인코딩된 액션을 기록하는 PHP 페이지에 도달했다.

요청이 일반적인 CSS 기반 자산 로드이기 때문에 차단기가 식별할 스크립트 호출이 없으며, 자바스크립트가 꺼져 있어도 스타일시트는 여전히 적용된다. 2018년 1월의 Hacker News 게시물은 532점과 175개의 댓글을 얻었고, 저장소는 2026년까지 약 3.3k개의 스타와 132개의 포크로 성장했다. 이에 대한 방어로 CSS Exfil Protection 확장이 등장했으며, 저자는 견고한 해결책은 브라우저가 CSS에서 참조된 외부 콘텐츠를 필요할 때가 아니라 페이지 로드 시 가져오도록 하는 것이라고 주장했는데, 그는 그러한 변경이 성능 비용을 초래할 것임을 인정했다.

브라우저의 지연된 CSS 리소스 가져오기를 이벤트 비콘으로 활용한다: 클릭, 호버 또는 누락된 폰트에서만 일치하는 선택자가 서버가 기록할 수 있는 요청을 발생시킨다

브라우저가 CSS url() 콘텐츠를 가져올 시점을 결정하므로, 일치하는 선택자는 광고 차단기가 대상으로 삼을 자바스크립트 호출 없이 네트워크 요청을 생성한다.

요청은 일반적인 이미지나 폰트 로드처럼 보이며, 로그와 대부분의 차단 도구에서 합법적인 자산과 구별되지 않는다.

상태 의존적 선택자는 URL 자체에 의미를 인코딩한다: 리소스 경로가 이벤트의 이름을 지정하고, 서버는 도착 타임스탬프만 기록한다.

CSS는 스크립팅이 비활성화된 페이지에서도 여전히 적용되므로, 자바스크립트 없음이 프라이버시처럼 보이게 만든 격차를 메운다.

선언적 형식도 조건부 작업을 수행한다: 상태 의존적 리소스 로드는 관찰 가능한 신호이므로, 방어 측은 CSS에서 발생한 요청을 제한할 가치가 있는 행동으로 취급해야 한다

저장소는 2018년 1월 16일 Hacker News에 도달하여 532점과 175개의 댓글을 얻었고, 2026년 크롤링 시점에는 약 3.3k개의 스타와 132개의 포크를 보였다. 이 시연은 최소한 하나의 방어책, 즉 자체 README에서 링크된 CSS Exfil Protection 확장의 씨앗이 되었으며, 저자의 글은 지속적인 해결책은 브라우저가 CSS에서 참조된 외부 콘텐츠를 선택자가 일치할 때가 아니라 페이지가 로드될 때 로드하도록 하는 것이라고 주장했는데, 그는 그러한 변경이 성능 비용을 초래할 것이라고 언급했다. 원래 데모 사이트는 나중에 오프라인이 되었고, 저장소의 코드 샘플이 이 기법의 작동 기록으로 남았다.