在 Hacker News 上看到的 PoC,程式碼就放在 GitHub 的 jbtronics/CrookedStyleSheets 上。能追蹤的細節當然比較少,不過透過 CSS 還是有不少資訊可以蒐集。
像是連結被觸發時:
#link2:active::after { content: url("track.php?action=link2_clicked"); }
瀏覽器的資訊:
@supports (-webkit-appearance:none) { #chrome_detect::after { content: url("track.php?action=browser_chrome"); } }
字型的 fingerprint:
/** Font detection **/ @font-face { font-family: Font1; src: url("track.php?action=font1"); } #font_detection1 { font-family: Calibri, Font1; }
捲頁行為:
@keyframes pulsate { 0% {background-image: url("track.php?duration=00")} 20% {background-image: url("track.php?duration=20")} 40% {background-image: url("track.php?duration=40")} 60% {background-image: url("track.php?duration=60")} 80% {background-image: url("track.php?duration=80")} 100% {background-image: url("track.php?duration=100")} }
算是提供了不少除了 <noscript></noscript> 外的手段,不過一般網站要引入這些技巧需要改不少東西就是了... (或是需要透過 server side plugin 的修改進行追蹤)