有些網站聲稱允許使用者貼上密碼會降低安全性。不過,貼上密碼其實有助於提升安全性,因為這樣做可使用密碼管理工具。
密碼管理工具通常會為使用者產生高強度密碼,並安全地儲存這些密碼,然後在使用者需要登入時,自動將密碼貼入密碼欄位。相較於強制使用者輸入可輕鬆記住的簡短密碼,這種做法通常更安全。
一般來說,使用者不應被禁止將內容貼到 <input>
元素中。
這項 Lighthouse 稽核失敗的原因
Lighthouse 會標記禁止使用者將內容貼到非唯讀輸入欄位的程式碼:
Lighthouse 會收集所有非唯讀 <input>
元素,在每個元素中貼上一些文字,然後驗證 paste
事件並未遭自訂事件處理常式阻止。
您也可以防止在 paste
事件監聽器以外貼上內容。Lighthouse 不會偵測這種情況。
如何啟用貼到密碼欄位的功能
找出導致無法貼上的程式碼
如要快速找出並檢查導致無法貼上的程式碼,請按照下列步驟操作:
- 展開「事件監聽器中斷點」窗格。
- 展開「剪貼簿」清單。
- 勾選
paste
核取方塊。 - 將文字貼到網頁上的密碼欄位。
- 開發人員工具應在相關
paste
事件監聽器的第一行程式碼處暫停。
移除導致無法貼上的程式碼
問題的來源通常是呼叫 preventDefault()
的 paste
事件監聽器,該事件監聽器與密碼輸入元素相關聯:
let input = document.querySelector('input');
input.addEventListener('paste', (e) => {
e.preventDefault(); // This is what prevents pasting.
});
如果您只想接聽貼上事件以便預先處理,請移除整個事件監聽器。