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

有些網站宣稱允許使用者貼上密碼會降低安全性。 不過,貼上密碼實際上可以提高安全性,因為這樣可以使用密碼管理工具。

密碼管理工具通常會為使用者產生高強度密碼並安全儲存,然後在使用者需要登入時,自動將密碼貼到密碼欄位。通常比強迫使用者輸入長度夠長的密碼就能記住這個做法,更為安全。

在一般情況下,不應禁止使用者將內容貼到 <input> 元素中。

Lighthouse 稽核失敗原因

Lighthouse 旗標程式碼會防止使用者貼到非唯讀的輸入欄位:

Lighthouse 稽核顯示頁面禁止使用者將頁面貼到密碼欄位

Lighthouse 會收集所有非唯讀的 <input> 元素,並將部分文字貼到每個元素中,然後驗證自訂事件處理常式未阻止 paste 事件。

此外,您也可以避免將程式碼貼到 paste 事件監聽器之外。Lighthouse 未偵測到這個情境。

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

找出阻礙貼上的程式碼

如何快速找出並檢查妨礙貼上的程式碼:

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

移除阻礙貼上的程式碼

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

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

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

如果您只監聽要先佔這類事件,請移除整個事件監聽器。

資源

禁止使用者將內容貼到輸入欄位稽核中的原始碼