客戶做網(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