Crooked Style Sheets：純粋なCSSとJavaScriptゼロでクリック、ブラウザ、フォントを追跡した

2018年当時、ウェブサイト訪問者の追跡はJavaScriptの問題のように見えた。スクリプトがページ読み込み時またはクリック時にビーコンを送信し、スクリプトがブロック、無効化、フィルタリングされれば、そのチャネル全体が暗転する。開発者jbtronicsによる概念実証Crooked Style Sheetsは、ブラウザ自身のCSSエンジンだけを使い、JavaScriptを一切使わずにページを追跡できることを示した。

明白なアプローチはすべてスクリプトかピクセルに依存していた。外部に通信する追跡スニペット、画像タグ、サードパーティの分析SDK。いずれもスクリプトブロッカーや広告フィルターが捕捉するために作られた可視のリクエスト種別であり、スクリプトが一切実行されないページではどれも発火しない。

鍵は、ブラウザがCSSのurl()リソースをいつ取得するかにあった。セレクターが一致したときだけ取得するのである。リンクの:activeスタイルにcontent: url(track.php?action=link2_clicked)を指定すれば、ブラウザはリンクがクリックされたまさにそのときにそのURLをリクエストする。同じ原理で、ホバー、チェック済みボックス、:validによるパターン一致テキスト、@supportsによるブラウザ検出、Calibriが存在しないときに読み込まれる@font-faceフォールバックによるインストール済みフォント検出までカバーされた。すべてのリクエストはPHPページに到達し、そこがタイムスタンプとURLにエンコードされたアクションを記録した。

リクエストは通常のCSS駆動のアセット読み込みであるため、ブロッカーが識別すべきスクリプト呼び出しを含まず、JavaScriptがオフでもスタイルシートは適用される。2018年1月のHacker News投稿は532ポイントと175コメントを集め、リポジトリは2026年までに約3.3kスターと132フォークに成長した。これに対抗して生まれた防御にはCSS Exfil Protection拡張機能があり、作者は堅牢な修正はブラウザがCSS参照の外部コンテンツをオンデマンドではなくページ読み込み時に取得することだと主張し、その変更にはパフォーマンス上のコストがかかると認めていた。

ブラウザの遅延CSSリソース取得をイベントビーコンとして扱う。クリック、ホバー、またはフォント欠如のときだけ一致するセレクターが、サーバーが記録できるリクエストを発火させる

ブラウザがCSSのurl()コンテンツを取得するタイミングを決めるため、一致するセレクターは広告ブロッカーが標的にできるJavaScript呼び出しなしでネットワークリクエストを生成する。

リクエストは通常の画像やフォントの読み込みに見え、ログやほとんどのブロッキングツールでは正当なアセットと区別できない。

状態依存のセレクターはURL自体に意味をエンコードする。リソースパスがイベントを名付け、サーバーは到着タイムスタンプだけを記録する。

CSSはスクリプトが無効なページでも適用され、JavaScriptなしをプライバシーに見せていたギャップを埋める。

宣言的フォーマットは依然として条件付きの処理を行う。状態依存のリソース読み込みは観測可能なシグナルであるため、防御側はCSS由来のリクエストを制限する価値のある挙動として扱わなければならない

リポジトリは2018年1月16日にHacker Newsに到達し、532ポイントと175コメントを集めた。2026年のクロール時点では約3.3kスターと132フォークを示していた。このデモンストレーションは少なくとも1つの防御、自身のREADMEからリンクされたCSS Exfil Protection拡張機能を生み、作者の記事は耐久性のある修正はブラウザがCSS参照の外部コンテンツをセレクター一致時ではなくページ読み込み時に読み込むことだと主張し、その変更にはパフォーマンス上のコストがかかると述べていた。元のデモサイトは後にオフラインになり、リポジトリのコードサンプルがこの手法の動作する記録として残った。