使用 CSS 追蹤使用者

楓上霧棋發表於2019-02-28
CSS

原文地址：Crooked Style Sheets

作者：jbtronics

除了使用 JS 追蹤使用者，現在有人提出了還可以使用 CSS 進行網頁追蹤和分析，譯者認為，這種方式更為 優雅，更為 簡潔，且 不好遮蔽，值得嘗試一波，瞭解更多，可檢視 倉庫地址 和 demo

我們可以用它來做什麼

我們可以收集關於使用者的一些基本資訊，例如 螢幕解析度（當瀏覽器最大化時）以及使用者使用的什麼瀏覽器（引擎）

此外，我們可以監測使用者是否點選某個連結或滑鼠懸停在某個元素上，用來 追蹤使用者懸停的連結，甚至可以 追蹤使用者如何移動滑鼠（在頁面使用不可見的欄位），然而，使用目前我的方法只能追蹤使用者的第一次點選或懸停，我相信，修改我的方法最終可以實現追蹤使用者的每次點選

最後，我們還可以監測使用者是否安裝了某個特殊的字型，基於這個資訊，我們可以追蹤使用者使用的 作業系統，因為不同作業系統使用的字型也稍有不同，例如 Windows 的 Calibri

這又是如何實現的

普通的做法

用 CSS 你可以使用 url("foo.bar") 屬性引用外部資源新增影像，有趣的是，這個資源只在需要的時候被載入（例如，當連結被點選時）

所以，我們可以用 CSS 建立一個選擇器，當使用者點選某個連結時呼叫某個特定的 UPL

#link2:active::after {
    content: url(`track.php?action=link2_clicked`);
}
複製程式碼

服務端，php 指令碼會在呼叫 URL 時儲存時間戳

瀏覽器監測

瀏覽器監 測是基於 @supports Media-Query 的，我們可以監測瀏覽器的一些特殊的屬性
，例如 -webkit-appearance

@supports (-webkit-appearance: none) {
    #chrome_detect::after {
        content: url(`track.php?action=browser_chrome`);
    }
}
複製程式碼

字型監測

對於 字型監測，需要定義一個新的字型，如果一個字型存在，文字會嘗試使用該字型進行樣式設定，然而，當使用者在系統上找不到該字型時，定義的字型會作為備用，在這種情況下，瀏覽器會嘗試去載入定義的字型並在伺服器上呼叫追蹤指令碼

/** Font detection **/
@font-face {
    font-family: Font1;
    src: url(`track.php?action=font1`);
}

#font_detection1 {
    font-family: Calibri, Font1;
}
複製程式碼

懸停監測

對於 懸停監測（基於 jeyroik 的想法），我們需定義一個關鍵幀，每次使用這個關鍵幀都要去請求一個 URL

@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`);
    }
}
複製程式碼

然後，我們使用定義的關鍵幀建立動畫，我們可以定義動畫持續的時間，這也是我們測量的最大時間

#duration:hover::after {
    -moz-animation: pulsate 5s infinite;
    -webkit-animation: pulsate 5s infinite;
    /*animation: pulsate 5s infinite;*/
    animation-name: pulsate;
    animation-duration: 10s;
    content: url(`track.php?duration=-1`);
}
複製程式碼

我們可以通過補充關鍵幀的設定，來優化解析度的監測

輸入監測

監測使用者選中了某個核取方塊，我們可以使用 CSS 提供的 :selected 選擇器

#checkbox:checked {
    content: url(`track.php?action=checkbox`);
}
複製程式碼

為了監測字串，我們結合了 HTML pattern 屬性，它可以幫助我們解決一些基本的輸入驗證，再結合 :valid 選擇器，瀏覽器當輸入匹配成功時會去請求我們的追蹤站點

<input type="text" id="text_input" pattern="^test$" required>
複製程式碼
#text_input:valid {
    background: green;
    background-image: url(`track.php?action=text_input`);
}
複製程式碼

Demo

點選 這裡 你可以檢視該倉庫的一個 demo。index.html 實踐了的上述的方法，訪問 results.php 可以檢視結果

如果屬性後面沒有任何 content 或有 php 警告 出現，這就意味著這個屬性的值為 false 或使用者還沒訪問頁面或連結（這個，確實很煩，但你可以知道這些方法的原理）

此外，解析度監測還不是特別的準確，因為目前只能監測最常用的螢幕寬度。最後還想說的是，監測使用者實際螢幕的寬度並沒有想象中的那麼簡單，因為 CSS 監測的高度為瀏覽器視窗的高度，而通常由於系統皮膚 / 工作列的原因，使得瀏覽器視窗要小於顯示器

有什麼辦法可以防止使用上面的方法進行追蹤

目前我知道的唯一辦法就是 完全禁用 CSS（你可以使用像 uMatrix 的外掛來實現），但它的代價也是十分巨大的，沒有 CSS，網頁就沒有之前那麼賞心悅目了，甚至導致無法正常使用，所以，禁用 CSS 算不上一個真正的選擇，除非，你實在擔心你的隱私（例如，當你在使用 Tor 瀏覽器，也許你應該禁用 CSS）

一個更好的解決方案是，在網頁載入時，瀏覽器不會去載入需要的外部資源，這樣，就不可能監測到使用者的個人行為，這種對內容載入的修改可以通過瀏覽器來實現，也可以通過外掛來實現（類似 NoScript 或 uMatrix）

上述方法也存在一個明顯的問題，那就是 對效能會造成一定的影響，因為瀏覽器會在初始化頁面時載入大量的內容（有些內容是頁面根本不需要的）

相關文章