通過CSS追蹤用戶

2018年初，一個物理專業的學生Jan Böhmer創建了一個網站，用來跟蹤和記錄用戶的點擊、鼠標移動、瀏覽器類型和操作系統等數據。雖然用戶跟蹤並不新鮮，但他的方法不需要JavaScript、插件或外部庫。實際上，它只使用了普通HTML文本和一點CSS。

它是如何工作的

Böhmer的概念利用了CSS的兩個特性:將內容注入HTML元素的能力，以及在用戶執行操作後更改樣式的能力。網站的工作方式是在執行操作時使用content屬性設置URL。此URL調用一個腳本，該腳本記錄有關操作的詳細信息，這些操作作為URL參數進行傳遞。使用::before和::after CSS選擇器設置這個URL可以確保只在執行操作時調用URL，而不是在頁面首次加載時調用URL。

例如，下面的CSS在每次單擊#link元素時調用一次URL:

跟蹤腳本包含記錄事件和操作執行次數的代碼。它還可以用於提取用戶的IP地址、用戶代理和其他標識信息。

下面是這樣一個腳本在PHP中的示例：

檢測瀏覽器類型

用戶可以欺騙瀏覽器的用戶代理，但是 Böhmer繞過了這個問題，他使用@supports at-rule(at-rule 是CSS樣式聲明，以@開頭，緊跟著是標識符（charset），最後以分號（;）結尾。)測試瀏覽器特定的CSS屬性。例如，下面的操作通過檢測--webkit-appearance是可用的，而-ms-ime-align是不可用的來檢測Chrome瀏覽器:

檢測操作系統

Böhmer甚至使用字體檢測來識別用戶的操作系統。例如，通過檢測瀏覽器是否支持Calibri字體家族，我們可以假定瀏覽器運行在Windows中:

Böhmer關於此概念的驗證可以識別其他數據點，包括瀏覽器窗口的大小和方向、用戶是否單擊了鏈接以及用戶在一個元素上停留的時間。

這種攻擊在瀏覽器中非常難以預防。完全防止它的唯一方法就是禁用CSS，這會使網站無法使用。然而，通過使用內容安全策略(CSP)，可以減少攻擊者利用此漏洞的機會。

使用內容安全策略減少CSS洩漏

CSP是一組規則，它決定瀏覽器可以執行哪些操作，不能執行哪些操作。CSP通常用於防止跨站腳本攻擊(XSS)和由瀏覽器加載不信任腳本導致的其他攻擊。雖然CSP通常用於JavaScript文件，但它也可以應用於CSS樣式和樣式表。

考慮一個使用第三方提供商託管的樣式表的網站。攻擊者破壞樣式表並將用戶跟蹤代碼添加到頁面上的鏈接:

當用戶點擊該鏈接時，他們的瀏覽器調用evil.com上託管的跟蹤腳本。由於這完全是通過瀏覽器完成的，網站所有者完全不知道這個漏洞。

Content-Security-Policy通過設置允許哪些樣式以及樣式來源等規則來防止這種情況。

禁用內聯樣式

禁用內聯樣式是CSP提供的最大安全好處之一。內聯樣式是直接在HTML文檔中聲明的樣式(或使用JavaScript設置的樣式)，而不是從樣式表加載的樣式。內聯樣式——尤其是動態生成的樣式或用戶創建的樣式——非常難以保護。這就是為什麼CSP通常會鎖定所有內聯腳本和樣式，並將那些已被特別批准的內聯腳本和樣式列入白名單。

以下規則將阻止所有內聯樣式以及外部託管的樣式表:

使用Hash和Nonce驗證樣式

如果阻塞內聯樣式是不可行的，你仍然可以使用hash和nonce來確保CSS的完整性。

Hash是由一個文件或字符串的內容生成的單向字符串。在樣式表或內聯樣式上執行哈希函數時，除非樣式發生改變，否則它總是返回相同的結果。這對於將某些內聯樣式和樣式表加入白名單是很有用的，只需要同時驗證樣式沒有被修改或篡改。

Nonce的功能與hash類似。使用nonce，將為每個請求生成一個新的隨機數，這使得攻擊者更難猜測它的值。這避免了hash的一個關鍵缺點，即多個輸入可能生成相同的hash值(稱為衝突)。

驗證外部託管的樣式表

樣式表通常託管在第三方服務器上，如內容交付網絡(content delivery networks, CDNs)，但這帶來了新的攻擊方向。如果CDN受到威脅，如何阻止攻擊者用自己修改過的版本替換樣式表?子資源完整性，也叫SRI,試圖解決這個問題。

SRI使用hash值來驗證腳本和樣式表的內容。計算每個文件的hash值，並將其附加到HTML元素的integrity屬性中。當瀏覽器下載腳本或樣式表時，計算其hash值並將其與存儲在屬性中的值進行比較。如果匹配，瀏覽器將加載腳本或樣式。

這是在假設web頁面是從受信任的源(如源服務器)提交的情況下運行的，而當資源是從不受信任的源(如第三方)提交的時候，就無法正常運行。如果web頁面和資源都由第三方託管，攻擊者只需要簡單地修改web頁面來匹配其CSS替換文件的hash值即可。

結論

雖然通過CSS跟蹤用戶的能力並不新鮮，但它確實要求我們以不同的方式考慮網頁上的隱私和安全性。CSS是現代網頁的基本語言之一，禁用網站的CSS將使網頁的大部分內容無法使用。內容安全策略是阻止XSS攻擊和CSS洩漏的最佳方法。Templarbit創建了一個“靈活的內容-安全-策略工作流”，以便於維護CSP頭文件。如果你的團隊正在努力為你的應用程序推出CSP，請立即註冊一個免費試用版，並學習更多關於Templarbit如何解決CSS洩露的方法.

你可以在GitHub上找到Böhmer的概念驗證的源代碼。

相關連接：

網站——http://crookedss.bplaced.net/

最大的安全好處——https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#Unsafe_inline_styles

通常鎖定所有內聯腳本——https://developers.google.com/web/fundamentals/security/csp/

加入白名單——https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src

並不新鮮——https://www.smashingmagazine.com/2014/10/css-only-solution-for-ui-tracking/

現在就註冊獲取免費版——https://www.templarbit.com/signup

GitHub——https://github.com/jbtronics/CrookedStyleSheets

相關知識：

SRI，Subresource Integrity 的縮寫，中文：子資源完整性，由 Web 應用安全工作組（Web Application Security Working Group）發佈。

閱讀更多 Python部落 的文章

關鍵字: WebKit Windows Chrome