我們可以用它來做什麼
我們可以收集關於用戶的一些基本信息，例如螢幕解析度（當瀏覽器最大化時）以及用戶使用的什麼瀏覽器（引擎）
此外，我們可以監測使用者是否點擊某個連結或滑鼠懸停在某個元素上，用來追蹤使用者懸停的鏈接，甚至可以追蹤使用者如何移動滑鼠（在頁面使用不可見的欄位） ，然而，使用目前我的方法只能追踪用戶的第一次點擊或懸停，我相信，修改我的方法最終可以實現追踪用戶的每次點擊
#最後，我們還可以監測用戶是否安裝了某個特殊的字體，基於這個訊息，我們可以追蹤使用者使用的作業系統，因為不同作業系統使用的字體也稍有不同，例如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');
}登入後複製
如果屬性後面沒有任何content 或有php 警告出現，這表示這個屬性的值為false 或使用者還沒造訪頁面或連結（這個，確實很煩，但你可以知道這些方法的原理）
此外，解析度監測還不是特別的準確，因為目前只能監測最常用的螢幕寬度。最後還想說的是，監測使用者實際螢幕的寬度並沒有想像中的那麼簡單，因為CSS 監測的高度為瀏覽器視窗的高度，而通常由於系統面板/ 工作列的原因，使得瀏覽器視窗要小於顯示器
有什麼辦法可以防止使用上面的方法進行追蹤
目前我知道的唯一辦法就是完全停用CSS（你可以使用像uMatrix 的插件來實現），但它的代價也是十分巨大的，沒有CSS，網頁就沒有之前那麼賞心悅目了，甚至導致無法正常使用，所以，禁用CSS 算不上一個真正的選擇，除非，你實在擔心你的隱私（例如，當你在使用Tor瀏覽器，也許你應該禁用CSS）
一個更好的解決方案是，在網頁加載時，瀏覽器不會去加載需要的外部資源，這樣，就不可能監測到用戶的個人行為，這種對內容載入的修改可以透過瀏覽器來實現，也可以透過外掛程式來實現（類似NoScript 或uMatrix）
上述方法也存在一個明顯的問題，那就是對效能會造成一定的影響，因為瀏覽器會在初始化頁面時載入大量的內容（有些內容是頁面根本不需要的）
以上是教你如何用CSS追蹤用戶的詳細內容。更多資訊請關注PHP中文網其他相關文章！
