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

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

密碼管理工具通常會為使用者產生高強度密碼,並安全地儲存這些密碼,然後在使用者需要登入時,自動將密碼貼入密碼欄位。相較於強制使用者輸入可輕鬆記住的簡短密碼,這種做法通常更安全。

一般來說,使用者不應被禁止將內容貼到 <input> 元素中。

這項 Lighthouse 稽核失敗的原因

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

Lighthouse 稽核顯示網頁會阻止使用者將內容貼到密碼欄位

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

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

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

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

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

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

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

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

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

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

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

資源

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