使用 CSS 追蹤使用者

2022-07-11 16:36:10 字數 2104 閱讀 5767

除了使用 js 追蹤使用者,現在有人提出了還可以使用 css 進行網頁追蹤和分析,譯者認為,這種方式更為 優雅,更為 簡潔,且 不好遮蔽,值得嘗試一波

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

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

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

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

所以,我們可以用 css 建立乙個選擇器,當使用者點選某個鏈結時呼叫某個特定的 upl

#link2:active::after 

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

#chrome_detect::after

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

/** font detection **/

@font-face

#font_detection1

對於 懸停監測(基於 jeyroik 的想法),我們需定義乙個關鍵幀,每次使用這個關鍵幀都要去請求乙個 url

@keyframes pulsate 

20%

40%

60%

80%

100%

}

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

#duration:hover::after 

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

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

#checkbox:checked 

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

"text" id="text_input" pattern="^test$" required>

#text_input:valid

廣州品牌設計公司

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

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

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

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

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

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

使用 CSS 追蹤使用者

我們可以收集關於使用者的一些基本資訊,例如 螢幕解析度 當瀏覽器最大化時 以及使用者使用的什麼瀏覽器 引擎 此外,我們可以監測使用者是否點選某個鏈結或滑鼠懸停在某個元素上,用來 追蹤使用者懸停的鏈結,甚至可以 追蹤使用者如何移動滑鼠 在頁面使用不可見的字段 然而,使用目前我的方法只能追蹤使用者的第一...

使用sql追蹤

在會話層面使用sql追蹤 1 檢視sql追蹤預設檔案位置 2 設定trace檔名 alter session set tracefile identifier ymtrace001 trace完成後可以在user dump dest引數值處檢視吃trace檔案 orcl ora mytrace001...

使用 Css 獲取使用者密碼

不一樣的 css 說到 css,大多數人的第一印象基本上就是用來配置介面樣式的,甚至於連語言都稱不上,但隨著 web 技術的不停發展,其所具有的能力也與日俱新,不再是當初那個僅僅滿足最基本布局需求的層疊樣式表了,至於新的屬性新的功能點筆者也了解不全,在這裡也不便展開了。話題回到不一樣的 css 上,...