客戶做網(wǎng)站一定報(bào)價(jià)怎么辦網(wǎng)站推廣的方式有
目錄
- 1.要解決的問題
- 2.一技能:原生屬性,小試牛刀
- 3.二技能:傀儡input,瞞天過海
- 4.三技能:JavaScript出擊,直接開大
- 5.九九八十一難,永遠(yuǎn)還有最后一難
寫在前面: 如有轉(zhuǎn)載,務(wù)必注明出處,否則后果自負(fù)。
1.要解決的問題
最近工作上遇到一個客戶反饋的問題,說是網(wǎng)頁上的登錄界面會出現(xiàn)自動填充賬號和密碼,這會導(dǎo)致系統(tǒng)不安全,賬號泄露等風(fēng)險(xiǎn)。我尋思著ntm要是沒有在瀏覽器上點(diǎn)擊自動保存賬號和密碼它會自動填充嗎?真是無語。本以為不需要修改,讓他自己在瀏覽器上清除保存密碼的記錄即可,沒辦法,打工人作為牛馬有求必應(yīng)。
所以,我們要解決的就是,把瀏覽器對input的自動填充以及填充提示給Ban掉。如下圖的三個區(qū)域。
由于不同的瀏覽器對于自動填充有著不同的策略,所以我們需要使出各種招式組合在一起才能把它消滅,在這里我主要使用谷歌、火狐、Edge(原IE)三大瀏覽器來對比查看效果,一起來看看吧!
簡單寫了一個Demo,來模擬表單登錄:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>input禁止自動填充</title><link rel="stylesheet" href="./index.css">
</head><body><form action="/"><input id="userName" type="text" placeholder="請輸入賬號" ><input id="userPwd" type="password" placeholder="請輸入密碼" ><button type="submit">提交</button></form>
</body></html>
/* index.css */
* {margin: 0;padding: 0;box-sizing: border-box;
}form {width: 300px;height: 200px;margin: 100px auto;
}input {width: 100%;height: 40px;padding: 0 10px;margin-bottom: 20px;border: 1px solid #ccc;border-radius: 5px;outline: none;
}button {width: 100%;height: 40px;border: 1px solid #ccc;border-radius: 5px;background-color: aquamarine;
}
2.一技能:原生屬性,小試牛刀
給input 添加原生屬性autocomplete:
對于text框,添加 autocomplete=“off”;
對于password框,添加 autocomplete=“new-password”。
<input id="userName" type="text" placeholder="請輸入賬號" autocomplete="off">
<input id="userPwd" type="password" placeholder="請輸入密碼" autocomplete="new-password">
谷歌瀏覽器:僅對 type=‘text’ 的input有效,即不能自動填充,也不會顯示填充提示;而對于密碼框 type=‘password’,雖然不會自動填充,但密碼框聚焦后會出現(xiàn)填充提示,點(diǎn)擊填充提示的賬號密碼,可以實(shí)現(xiàn)自動填充。如圖所示:
火狐瀏覽器:輸入框和密碼框都不會出現(xiàn)自動填充,但二者聚焦后都會出現(xiàn)填充提示,并都能進(jìn)行點(diǎn)擊后填充。如圖所示:
Edge瀏覽器: autocomplete對該瀏覽器完全無效。初始化頁面即會自動填充賬號和密碼。
3.二技能:傀儡input,瞞天過海
給text框和password框前后各加一個假的input框,讓瀏覽器的自動填充對假的input框生效,然后用css把假的input框設(shè)置為不可見,從而瞞天過海。
<form action="/"><input id="fakerUserName1" type="text" placeholder="請輸入賬號" autocomplete="off"><input id="userName" type="text" placeholder="請輸入賬號" autocomplete="off"><input id="fakerUserName2" type="text" placeholder="請輸入賬號" autocomplete="off"><input id="fakerUserPwd1" type="password" placeholder="請輸入密碼" autocomplete="new-password"><input id="userPwd" type="password" placeholder="請輸入密碼" autocomplete="new-password"><input id="fakerUserPwd2" type="password" placeholder="請輸入密碼" autocomplete="new-password"><button type="submit">提交</button>
</form>
/* css將假的input設(shè)置為不可見 */
input#fakerUserName1,
input#fakerUserName2,
input#fakerUserPwd1,
input#fakerUserPwd2 {position: fixed;top: -100%;left: -100%;
}
谷歌瀏覽器: 該技能對谷歌的效果與屬性autocomplete的效果一樣,故與技能一相比無任何變化。即text框既不能填充也無填充提示,password框不能填充但聚焦后有填充提示,并且點(diǎn)擊后可自動填充。
火狐瀏覽器: 該技能對text框有效,既不能自動填充,也不會出現(xiàn)填充提示,對password無效,不能自動填充,但聚焦后有填充提示,點(diǎn)擊后可自動填充。如圖:
Edge瀏覽器: 解決了初始化頁面即自動填充的問題,對于text框既不能自動填充,也不會出現(xiàn)填充提示,對于password框,不能自動填充,但聚焦后有填充提示,點(diǎn)擊后可自動填充。如圖:
注意: 添加假的input框時要注意給input的id也要加上,否則可能不起作用,因?yàn)椴煌臑g覽器對此有不同的策略,有時,id的字符長短也會產(chǎn)生不同的效果,可自行嘗試。
4.三技能:JavaScript出擊,直接開大
通過前兩個技能,可以發(fā)現(xiàn),這些瀏覽器的策略是非常激進(jìn)的,尤其是對于password框。有時無論你添加多少個假的input框,可能對于瀏覽器而言,它并不在乎,因?yàn)橹灰?type=‘password’ 的input框,它就會在聚焦后出現(xiàn)填充提示,點(diǎn)擊這個填充提示,就又可以實(shí)現(xiàn)自動填充。對于某些用戶而言,可能由于不小心點(diǎn)擊了在瀏覽器上自動的保存密碼,但對于該功能,其賬號的安全性便大大降低了,尤其對于某些注重隱私的公司而言,這可能是不可接受的,因?yàn)?#xff0c;商戰(zhàn)是處處皆有可能的,于是乎,一口大黑鍋就甩到了開發(fā)人員的身上。
既然如此,開發(fā)狗該怎么辦呢?
既然技能一和技能二只對 type=‘text’ 的input框有效,那我就不要使用 type=‘password’ 了唄。
嗯!真是大聰明?!
如果這樣的話,輸入密碼的時候不就直接明文輸入了嗎?
對啊…
滾…
等等,你說什么?
滾…
上一句,輸入密碼的時候?輸入密碼的時候??輸入密碼 的時候 !!!
OK,JavaScript出擊!
于是乎,辦法出現(xiàn)了,我們可以將 type=‘password’ 改為 type=‘text’ ,然后使用JavaScript監(jiān)聽input事件,實(shí)現(xiàn)偷梁換柱,功德圓滿!哈哈哈哈哈…
<body><form action="/"><input id="fakerUserName1" type="text" placeholder="請輸入賬號" autocomplete="off"><input id="userName" type="text" placeholder="請輸入賬號" autocomplete="off"><input id="fakerUserName2" type="text" placeholder="請輸入賬號" autocomplete="off"><input id="fakerUserPwd1" type="text" placeholder="請輸入密碼" autocomplete="new-password"><input id="userPwd" type="text" placeholder="請輸入密碼" autocomplete="new-password"><input id="fakerUserPwd2" type="text" placeholder="請輸入密碼" autocomplete="new-password"><button type="submit">提交</button></form><script>document.querySelector('#userPwd').addEventListener('input', function () {this.type = 'password';})</script>
</body>
看看效果:
谷歌:
火狐:
Edge:
5.九九八十一難,永遠(yuǎn)還有最后一難
根據(jù)網(wǎng)友反饋,當(dāng)輸入密碼然后清空之后會出現(xiàn)自動填充的提示,我試了下,確實(shí)如此。而且谷歌和Edge出現(xiàn)這種情況之后還會影響type='text’的輸入框也出現(xiàn)自動填充。
只能說瀏覽器對于自動填充的策略確實(shí)很激進(jìn)啊,但凡出現(xiàn)password,它似乎就對這個input進(jìn)行了跟蹤,無論type再怎么變,它也會給你彈出自動填充。
這里的解決辦法是使用賬號脫敏的思想,堅(jiān)決不使用password密碼框,關(guān)于賬號脫敏可以看看我的下一篇文章,文章地址在本文末尾。
具體思路就是使用text框輸入密碼,輸入時用?代替明文顯示,然后用一個輔助input記錄真實(shí)密碼,傳遞數(shù)據(jù)時就使用這個輔助input的值進(jìn)行傳遞。
具體代碼:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 300px;padding: 50px 20px;margin: 100px auto;border-radius: 5px;background: #ccc;}input {width: 100%;height: 40px;padding: 0 10px;margin-bottom: 20px;outline: none;border: 1px solid #ccc;}input#realUserPwd {display: none;}button {width: 100%;height: 40px;cursor: pointer;outline: none;border: 1px solid #ccc;background-color: #fff;}</style>
</head><body><form class="container" action="/"><input type="text" id="userName" placeholder="請輸入賬號" autocomplete="off"><input type="text" id="userPwd" placeholder="請輸入密碼" autocomplete="off"><input type="text" id="realUserPwd" autocomplete="off"><button type="submit">提交</button></form><script>const inputField = document.querySelector('#userPwd');const realUserPwd = document.querySelector('#realUserPwd');inputField.addEventListener('input', function (e) {// 獲取輸入框中的值const inputValue = this.value.trim();// 拼接每一次輸入的當(dāng)前數(shù)字realUserPwd.value += inputValue.substring(inputValue.length - 1);// 防止用戶刪除上一個輸入值時出現(xiàn)錯誤// 并且// 防止用戶通過粘貼輸入值時只監(jiān)聽到最后一位數(shù)而出現(xiàn)的錯誤if (inputValue.length != realUserPwd.value.length) {realUserPwd.value = inputValue;}// 將明文替換成?顯示this.value = inputValue.substring(0, inputValue.length).replace(/./g, '?');console.log('res', this.value, this.value.length, realUserPwd.value, realUserPwd.value.length);})</script>
</body></html>
看看效果:
谷歌瀏覽器:
火狐瀏覽器:
Edge瀏覽器:
看起來已經(jīng)解決了這個bug,并且代碼也精簡了很多,如果還有其他問題,歡迎交流!
后記:
對于瀏覽器版本的不同可能有些許差異,但問題不大。對于我使用的瀏覽器的版本,見下圖:
SOS: 但與客戶的戰(zhàn)爭還未結(jié)束,還是與input有關(guān),也就是輸入賬號脫敏的問題,也就是實(shí)現(xiàn)下圖的效果,切莫大意,我剛開始確實(shí)低估了它,不過最終也是如愿解決。
欲知后事如何,且聽下回分解。
對input輸入框脫敏的實(shí)現(xiàn)(input輸入時可回刪、可粘貼)可查看文章:https://blog.csdn.net/qq_51667621/article/details/139988001