日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
漲知識，原來可以這樣用CSS來追蹤用戶

除了使用 JS 追蹤用戶，現(xiàn)在有人提出了還可以使用 CSS 進(jìn)行網(wǎng)頁追蹤和分析，譯者認(rèn)為，這種方式更為 優(yōu)雅，更為 簡潔，且 不好屏蔽，值得嘗試一波，了解更多，可查看 倉庫地址(https://github.com/jbtronics/CrookedStyleSheets) 和 demo(http://crookedss.bplaced.net/)

創(chuàng)新互聯(lián)建站專注骨干網(wǎng)絡(luò)服務(wù)器租用十余年，服務(wù)更有保障！服務(wù)器租用，達(dá)州托管服務(wù)器 成都服務(wù)器租用，成都服務(wù)器托管，骨干網(wǎng)絡(luò)帶寬，享受低延遲，高速訪問。靈活、實(shí)現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專屬高性能服務(wù)器。

我們可以用它來做什么

我們可以收集關(guān)于用戶的一些基本信息，例如 屏幕分辨率（當(dāng)瀏覽器***化時(shí)）以及用戶使用的什么瀏覽器（引擎）

此外，我們可以監(jiān)測用戶是否點(diǎn)擊某個(gè)鏈接或鼠標(biāo)懸停在某個(gè)元素上，用來 追蹤用戶懸停的鏈接，甚至可以 追蹤用戶如何移動(dòng)鼠標(biāo)（在頁面使用不可見的字段），然而，使用目前我的方法只能追蹤用戶的***次點(diǎn)擊或懸停，我相信，修改我的方法最終可以實(shí)現(xiàn)追蹤用戶的每次點(diǎn)擊

***，我們還可以監(jiān)測用戶是否安裝了某個(gè)特殊的字體，基于這個(gè)信息，我們可以追蹤用戶使用的 操作系統(tǒng)，因?yàn)椴煌僮飨到y(tǒng)使用的字體也稍有不同，例如 Windows 的 Calibri

這又是如何實(shí)現(xiàn)的

普通的做法

用 CSS 你可以使用 url("foo.bar") 屬性引用外部資源添加圖像，有趣的是，這個(gè)資源只在需要的時(shí)候被加載（例如，當(dāng)鏈接被點(diǎn)擊時(shí)）

所以，我們可以用 CSS 創(chuàng)建一個(gè)選擇器，當(dāng)用戶點(diǎn)擊某個(gè)鏈接時(shí)調(diào)用某個(gè)特定的 UPL

 
 
    
  
  
  1. #link2:active::after { 
    2.   
  
  2.  
    3.   
  
  3.   content: url('track.php?action=link2_clicked'); 
    4.   
  
  4.  
    5.   
  
  5. } 
    6.

服務(wù)端，php 腳本會(huì)在調(diào)用 URL 時(shí)保存時(shí)間戳

瀏覽器監(jiān)測

瀏覽器監(jiān) 測是基于 @supports Media-Query 的，我們可以監(jiān)測瀏覽器的一些特殊的屬性，例如 -webkit-appearance

 
 
    
  
  
  1. @supports (-webkit-appearance: none) { 
    2.   
  
  2.  
    3.   
  
  3.   #chrome_detect::after { 
    4.   
  
  4.  
    5.   
  
  5.     content: url('track.php?action=browser_chrome'); 
    6.   
  
  6.  
    7.   
  
  7.   } 
    8.   
  
  8.  
    9.   
  
  9. } 
    10.

字體監(jiān)測

對于 字體監(jiān)測，需要定義一個(gè)新的字體，如果一個(gè)字體存在，文本會(huì)嘗試使用該字體進(jìn)行樣式設(shè)置，然而，當(dāng)用戶在系統(tǒng)上找不到該字體時(shí)，定義的字體會(huì)作為備用，在這種情況下，瀏覽器會(huì)嘗試去加載定義的字體并在服務(wù)器上調(diào)用追蹤腳本

 
 
    
  
  
  1. /** Font detection **/ 
    2.   
  
  2.  
    3.   
  
  3. @font-face { 
    4.   
  
  4.  
    5.   
  
  5.   font-family: Font1; 
    6.   
  
  6.  
    7.   
  
  7.   src: url('track.php?action=font1'); 
    8.   
  
  8.  
    9.   
  
  9. }   
    10.   
  
  10.  
    11.   
  
  11. #font_detection1 { 
    12.   
  
  12.  
    13.   
  
  13.   font-family: Calibri, Font1; 
    14.   
  
  14.  
    15.   
  
  15. } 
    16.

懸停監(jiān)測

對于 懸停監(jiān)測（基于 jeyroik 的想法），我們需定義一個(gè)關(guān)鍵幀，每次使用這個(gè)關(guān)鍵幀都要去請求一個(gè) URL

 
 
    
  
  
  1. @keyframes pulsate { 
    2.   
  
  2.  
    3.   
  
  3.   0% { 
    4.   
  
  4.  
    5.   
  
  5.     background-image: url('track.php?duration=00'); 
    6.   
  
  6.  
    7.   
  
  7.   } 
    8.   
  
  8.  
    9.   
  
  9.   20% { 
    10.   
  
  10.  
    11.   
  
  11.     background-image: url('track.php?duration=20'); 
    12.   
  
  12.  
    13.   
  
  13.   } 
    14.   
  
  14.  
    15.   
  
  15.   40% { 
    16.   
  
  16.  
    17.   
  
  17.     background-image: url('track.php?duration=40'); 
    18.   
  
  18.  
    19.   
  
  19.   } 
    20.   
  
  20.  
    21.   
  
  21.   60% { 
    22.   
  
  22.  
    23.   
  
  23.     background-image: url('track.php?duration=60'); 
    24.   
  
  24.  
    25.   
  
  25.   } 
    26.   
  
  26.  
    27.   
  
  27.   80% { 
    28.   
  
  28.  
    29.   
  
  29.     background-image: url('track.php?duration=80'); 
    30.   
  
  30.  
    31.   
  
  31.   } 
    32.   
  
  32.  
    33.   
  
  33.   100% { 
    34.   
  
  34.  
    35.   
  
  35.     background-image: url('track.php?duration=100'); 
    36.   
  
  36.  
    37.   
  
  37.   } 
    38.   
  
  38.  
    39.   
  
  39. } 
    40.

然后，我們使用定義的關(guān)鍵幀創(chuàng)建動(dòng)畫，我們可以定義動(dòng)畫持續(xù)的時(shí)間，這也是我們測量的***時(shí)間

 
 
    
  
  
  1. #duration:hover::after { 
    2.   
  
  2.  
    3.   
  
  3.   -moz-animation: pulsate 5s infinite; 
    4.   
  
  4.  
    5.   
  
  5.   -webkit-animation: pulsate 5s infinite; 
    6.   
  
  6.  
    7.   
  
  7.   /*animation: pulsate 5s infinite;*/ 
    8.   
  
  8.  
    9.   
  
  9.   animation-name: pulsate; 
    10.   
  
  10.  
    11.   
  
  11.   animation-duration: 10s; 
    12.   
  
  12.  
    13.   
  
  13.   content: url('track.php?duration=-1'); 
    14.   
  
  14.  
    15.   
  
  15. } 
    16.

我們可以通過補(bǔ)充關(guān)鍵幀的設(shè)置，來優(yōu)化分辨率的監(jiān)測

輸入監(jiān)測

監(jiān)測用戶選中了某個(gè)復(fù)選框，我們可以使用 CSS 提供的 :selected 選擇器

 
 
    
  
  
  1. #checkbox:checked { 
    2.   
  
  2.  
    3.   
  
  3.   content: url('track.php?action=checkbox'); 
    4.   
  
  4.  
    5.   
  
  5. } 
    6.

為了監(jiān)測字符串，我們結(jié)合了 HTML pattern 屬性，它可以幫助我們解決一些基本的輸入驗(yàn)證，再結(jié)合 :valid 選擇器，瀏覽器當(dāng)輸入匹配成功時(shí)會(huì)去請求我們的追蹤站點(diǎn)

 
 
    
  
  
  1.  
    2.   
  
  2.  
    3.   
  
  3. #text_input:valid { 
    4.   
  
  4.  
    5.   
  
  5.   background: green; 
    6.   
  
  6.  
    7.   
  
  7.   background-image: url('track.php?action=text_input'); 
    8.   
  
  8.  
    9.   
  
  9. } 
    10.

Demo

點(diǎn)擊 這里(http://crookedss.bplaced.net/) 你可以查看該倉庫的一個(gè) demo。index.html 實(shí)踐了的上述的方法，訪問 results.php 可以查看結(jié)果

如果屬性后面沒有任何 content 或有 php 警告 出現(xiàn)，這就意味著這個(gè)屬性的值為 false 或用戶還沒訪問頁面或鏈接（這個(gè)，確實(shí)很煩，但你可以知道這些方法的原理）

此外，分辨率監(jiān)測還不是特別的準(zhǔn)確，因?yàn)槟壳爸荒鼙O(jiān)測最常用的屏幕寬度。***還想說的是，監(jiān)測用戶實(shí)際屏幕的寬度并沒有想象中的那么簡單，因?yàn)?CSS 監(jiān)測的高度為瀏覽器窗口的高度，而通常由于系統(tǒng)面板 / 任務(wù)欄的原因，使得瀏覽器窗口要小于顯示器

有什么辦法可以防止使用上面的方法進(jìn)行追蹤

目前我知道的唯一辦法就是 完全禁用 CSS（你可以使用像 uMatrix 的插件來實(shí)現(xiàn)），但它的代價(jià)也是十分巨大的，沒有 CSS，網(wǎng)頁就沒有之前那么賞心悅目了，甚至導(dǎo)致無法正常使用，所以，禁用 CSS 算不上一個(gè)真正的選擇，除非，你實(shí)在擔(dān)心你的隱私（例如，當(dāng)你在使用 Tor 瀏覽器，也許你應(yīng)該禁用 CSS）

一個(gè)更好的解決方案是，在網(wǎng)頁加載時(shí)，瀏覽器不會(huì)去加載需要的外部資源，這樣，就不可能監(jiān)測到用戶的個(gè)人行為，這種對內(nèi)容加載的修改可以通過瀏覽器來實(shí)現(xiàn)，也可以通過插件來實(shí)現(xiàn)（類似 NoScript 或 uMatrix）

上述方法也存在一個(gè)明顯的問題，那就是 對性能會(huì)造成一定的影響，因?yàn)闉g覽器會(huì)在初始化頁面時(shí)加載大量的內(nèi)容（有些內(nèi)容是頁面根本不需要的）


本文題目：漲知識，原來可以這樣用CSS來追蹤用戶
當(dāng)前鏈接：http://www.dlmjj.cn/article/dheggco.html