瀏覽器記住密碼的機制
首先理解瀏覽器保存密碼和自動填充是兩個機制，記住密碼機制需要遵循同源策略
1.測試瀏覽器（mac）
| 瀏覽器 | 版本 |
|---|---|
| 56.0.2924.87(64-bit) | |
| safari | 10.0(12602.1.50.0.10) |
| ie(win) | 7-8 |
2.首先要分析瀏覽器是如何記住這個表單的涨共，和唯一性？
經(jīng)過查資料實驗得到的幾個關(guān)鍵值
1. 為了遵循同源策略宠漩，需要域名：lichenglong.pw
2. 需要一個<form>標(biāo)簽
3. 需要id或name為username的用戶名<input>表單項
4. 需要id或name為password的密碼<input>表單項
5. 用戶名和密碼框必須是上下級的關(guān)系举反，中間不能有其他input框
例如：
<form id="register5">
<div class="form-group">
<label>user name</label>
<input type="text" name="username" class="form-control" placeholder="Enter text">
<div class="tipinfo"></div>
</div>
<div class="form-group">
<label>password</label>
<input type="password" name="password" class="form-control" placeholder="Enter text">
<div class="tipinfo"></div>
</div>
<button type="submit" class="btn btn-default">Submit Button</button>
</form>
各個瀏覽器提示保存密碼截圖
1.google
Paste_Image.png
2.firefox
Paste_Image.png
3.safari
Paste_Image.png
4.ie
Paste_Image.png
3.各瀏覽器的差異
- Safari瀏覽器
只有Safari默認(rèn)是關(guān)閉這個機制的。如果開啟后扒吁，效果和chrome一樣火鼻，非常好用！Safari不能自動填充表單 - Opera瀏覽器
Opera好像很安全瘦陈，記住密碼后凝危，瀏覽器并不會自動填充密碼，而是要用戶自己點擊地址欄左邊的鑰匙圖標(biāo)晨逝，才會開始填充并登錄蛾默。 - IE8/9瀏覽器
IE8/9及部分這個內(nèi)核的瀏覽器（比如遨游的IE模式）很聰明，將每個登錄表單綁定到所在的頁面上（下面簡稱這個頁面為綁定頁面）捉貌，由于綁定頁面地址是唯一的支鸡，同域內(nèi)其他頁面就無法通過生成一個一模一樣的表單來獲取密碼了。
如果就這樣還是不安全:P趁窃，因為XSS(獲取瀏覽器記住的明文密碼)可以動態(tài)iframe進這個綁定頁面牧挣，然后注入JS進行任意DOM操作，同樣非常容易獲取到密碼表單項的值醒陆，IE估計是考慮到了這個瀑构，通過iframe調(diào)用綁定頁面也無效。而且IE的機制還遠(yuǎn)沒這樣簡單刨摩，即使在綁定頁面內(nèi)我也沒成功得到密碼寺晌，因為IE默認(rèn)并不填充密碼，只有輸入正確用戶名后澡刹，并觸發(fā)類似onblur事件呻征，這個密碼表單項才會填充進對應(yīng)用戶名的密碼。這個過程我本想通過DOM來模擬進行的罢浇，但是沒有成功陆赋。感興趣的同學(xué)可以試試沐祷。 - 其他瀏覽器
其他瀏覽器（除了搜狗瀏覽器）都和Chrome差不多了，大多是因為webkit內(nèi)核攒岛。 - IE8/IE9無法自動完成表單及記住密碼的解決方法
ie瀏覽器比較特殊點赖临，有時候我們使用某些優(yōu)化軟件對系統(tǒng)進行優(yōu)化以后，可能會出IE瀏覽器即便開啟了自動完成功能也無法記住賬號和密碼的問題您也可以先檢查IE瀏覽器的 Internet 選項里面是否啟用了該功能阵子，依次打開Internet 選項 —— 切換至“內(nèi)容”選項卡 —— 自動完成設(shè)置思杯，看是否勾選了“表單上的用戶名和密碼”。 出現(xiàn)這種情況是因為IE瀏覽器的相應(yīng)配置被禁用了挠进，我們只要執(zhí)行下面操作即可恢復(fù)。
1誊册、按下 Win + R 鍵打開運行领突，在輸入框中輸入 gpedit.msc，單擊確認(rèn)打開本地組策略編輯器
Paste_Image.png
2案怯、依次展開用戶配置 → 管理模板 → Windows 組件 → Internet Explorer
Paste_Image.png
3君旦、在右側(cè)列表中找到“禁用表單的自動完成功能”選項，雙擊對該選項進行編輯嘲碱，設(shè)置為已禁用金砍，在單擊確認(rèn)
Paste_Image.png
Paste_Image.png
4、再找到“表單上的用戶名和密碼啟用自動完成”選項麦锯，雙擊對該選項進行編輯恕稠，設(shè)置為已啟用，在單擊確認(rèn)
Paste_Image.png
設(shè)置完成以后扶欣，可以關(guān)閉本地組策略編輯器鹅巍，然后再重啟IE即可。
4.input光標(biāo)問題：
IE：不管該行有沒有文字料祠，光標(biāo)高度與font-size一致骆捧。
FF：該行有文字時，光標(biāo)高度與font-size一致髓绽。該行無文字時敛苇，光標(biāo)高度與input的height一致。
Chrome：該行無文字時顺呕，光標(biāo)高度與line-height一致枫攀；該行有文字時，光標(biāo)高度從input頂部到文字底部(這兩種情況都是在有設(shè)定line-height的時候)塘匣，如果沒有l(wèi)ine-height脓豪，則是與font-size一致。
解決的方案：
給input的height設(shè)定一個較小的高度忌卤，然后用padding去填充扫夜，基本上可以解決所有瀏覽器的問題
