資訊專欄INFORMATION COLUMN
摘要：實踐了的上述的方法，訪問可以查看結果如果屬性后面沒有任何或有警告出現，這就意味著這個屬性的值為或用戶還沒訪問頁面或鏈接這個，確實很煩，但你可以知道這些方法的原理此外，分辨率監測還不是特別的準確，因為目前只能監測最常用的屏幕寬度。
原文地址：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 選擇器，瀏覽器當輸入匹配成功時會去請求我們的追蹤站點
#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）
上述方法也存在一個明顯的問題，那就是 對性能會造成一定的影響，因為瀏覽器會在初始化頁面時加載大量的內容（有些內容是頁面根本不需要的）
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51733.html
摘要：實踐了的上述的方法，訪問可以查看結果如果屬性后面沒有任何或有警告出現，這就意味著這個屬性的值為或用戶還沒訪問頁面或鏈接這個，確實很煩，但你可以知道這些方法的原理此外，分辨率監測還不是特別的準確，因為目前只能監測最常用的屏幕寬度。 原文地址：Crooked Style Sheets作者：jbtronics showImg(https://segmentfault.com/img/bV2i...
摘要：發布是由團隊開源的，操作接口庫，已成為事實上的瀏覽器操作標準。本周正式發布，為我們帶來了，，支持自定義頭部與腳部，支持增強，兼容原生協議等特性變化。新特性介紹日前發布了大版本更新，引入了一系列的新特性與提升，本文即是對這些變化進行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...
摘要：好久不見，可曾想念前端監控系統增加了用戶行為追蹤和資源加載詳情，那什么是用戶行為追蹤呢什么又是資源加載詳情有了這些我們能做什么呢我們下面就來聊一聊。 ?所謂web,即使你我素未謀面，便知志趣相投；足不出戶，亦知世界之大。 好久不見，可曾想念？前端監控系統增加了用戶行為追蹤和資源加載詳情，那什么是用戶行為追蹤呢？什么又是資源加載詳情？有了這些我們能做什么呢？我們下面就來聊一聊。 用戶行為...
摘要：判斷為白名單，則直接調用，返回格式圖片反之，則顯示原圖。處理處理，是美團云為美團主站提供的處理方式。目前，可用替換路徑的方式來處理。處理實際上效果也是不錯的，美團頁面里以上的圖片都是懶加載的，基本上都可以滿足需求。 本人是一名前端開發者，在公司負責目前負責信息流服務，為五大手機廠商和各大App提供服務，每天的請求就是以億計算，加上我們又做了SSP和DSP，就是類似于百度廣告聯盟，騰訊廣...
閱讀 1682·2019-08-30 15:54
閱讀 3332·2019-08-26 17:15
閱讀 3522·2019-08-26 13:49
閱讀 2582·2019-08-26 13:38
閱讀 2291·2019-08-26 12:08
閱讀 3035·2019-08-26 10:41
閱讀 1369·2019-08-26 10:24
閱讀 3376·2019-08-23 18:35
