使用 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）

上述方法也存在一個明顯的問題，那就是 對性能會形成必定的影響，由於瀏覽器會在初始化頁面時加載大量的內容（有些內容是頁面根本不須要的）