玄幻小说排行榜,盗墓笔记小说txt下载,已完结小说排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

漲知識，原來可以這樣用CSS來追蹤用戶

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

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

我們可以用它來做什么

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

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

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

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

普通的做法

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

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

 
 
  
  #link2:active::after {   
     
    content: url('track.php?action=link2_clicked');   
     
  }

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

瀏覽器監(jiān)測

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

 
 
  
  @supports (-webkit-appearance: none) {   
     
    #chrome_detect::after {   
     
      content: url('track.php?action=browser_chrome');   
     
    }   
     
  }

字體監(jiān)測

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

 
 
  
  /** Font detection **/   
     
  @font-face {   
     
    font-family: Font1;   
     
    src: url('track.php?action=font1');   
     
  }     
     
  #font_detection1 {   
     
    font-family: Calibri, Font1;   
     
  }

懸停監(jiān)測

對于懸停監(jiān)測（基于 jeyroik 的想法），我們需定義一個關(guān)鍵幀，每次使用這個關(guān)鍵幀都要去請求一個 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');   
     
    }   
     
  }

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

 
 
  
  #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');   
     
  }

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

輸入監(jiān)測

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

 
 
  
  #checkbox:checked {   
     
    content: url('track.php?action=checkbox');   
     
  }

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

 
 
  
     
     
  #text_input:valid {   
     
    background: green;   
     
    background-image: url('track.php?action=text_input');   
     
  }

Demo

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

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

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

有什么辦法可以防止使用上面的方法進行追蹤

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

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

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

新聞名稱：漲知識，原來可以這樣用CSS來追蹤用戶
轉(zhuǎn)載來源：http://fisionsoft.com.cn/article/dheggco.html

新聞中心

其他資訊