使用 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)
上述方法也存在一個明顯的問題,那就是 對性能會造成一定的影響,因為瀏覽器會在初始化頁面時加載大量的內容(有些內容是頁面根本不需要的)
原文地址:https://segmentfault.com/a/1190000012901505
使用 CSS 追蹤用戶