禁止使用者將內容貼到輸入欄位

某些網站聲稱允許使用者貼上密碼，會降低安全性。 不過，貼上密碼其實有助於提升安全性，因為這樣做可讓使用者使用密碼管理工具。

密碼管理工具通常會為使用者產生高強度密碼 然後自動貼上 自動擷取。這種方法通常 比起強迫使用者輸入夠短的密碼，安全性更高 以便記住

在一般情況下，請勿禁止使用者將內容貼到 <input> 元素中。

這項 Lighthouse 稽核失敗的原因

Lighthouse 會標記禁止使用者將內容貼到非唯讀輸入欄位的程式碼：

Lighthouse 會收集所有非唯讀 <input> 元素，在每個元素中貼上一些文字，然後驗證 paste 事件並未遭自訂事件處理常式阻止。

您也可以防止在 paste 事件監聽器之外貼上內容。Lighthouse 不會偵測這種情況。

如何啟用貼到密碼欄位的功能

找出導致無法貼上的程式碼

如要快速找出並檢查導致無法貼上的程式碼，請按照下列步驟操作：

1. 展開「事件監聽器中斷點」窗格。
2. 展開「Clipboard」清單。
3. 勾選 paste 核取方塊。
4. 將一些文字貼到您網頁的密碼欄位中。
5. 開發人員工具應在相關 paste 事件監聽器的第一行程式碼處暫停。

移除導致無法貼上的程式碼

問題的來源通常是呼叫 preventDefault() 的 paste 事件監聽器，該事件監聽器與密碼輸入元素相關聯：

let input = document.querySelector('input');

input.addEventListener('paste', (e) => {
  e.preventDefault(); // This is what prevents pasting.
});

如果您只想接聽貼上事件以便預先處理，請移除整個事件監聽器。

資源

「禁止使用者將內容貼到輸入欄位」稽核的來源程式碼