Impedisce agli utenti di incollare dati nei campi di immissione

Alcuni siti web sostengono che consentire agli utenti di incollare le password riduce la sicurezza. Tuttavia, in realtà, incollare le password migliora la sicurezza perché consente l'utilizzo di gestori delle password.

In genere, i gestori delle password generano password efficaci per gli utenti, le archiviano in modo sicuro e poi le incollano automaticamente nei campi delle password ogni volta che gli utenti devono accedere. In genere, questo approccio è più sicuro rispetto a costringere gli utenti a digitare password abbastanza brevi da ricordare.

In genere, non è necessario impedire agli utenti di incollare dati negli elementi <input>.

Come non va a buon fine questo controllo Lighthouse

Lighthouse segnala il codice che impedisce agli utenti di incollare dati nei campi di immissione non di sola lettura:

Il controllo Lighthouse mostra che la pagina impedisce agli utenti di incollare contenuti in un campo della password

Lighthouse raccoglie tutti gli elementi <input> non di sola lettura, incolla del testo in ogni elemento e poi verifica che l'evento paste non sia stato impedito da un gestore eventi personalizzato.

È anche possibile impedire il copia e incolla al di fuori di un listener di eventi paste. Lighthouse non rileva questo scenario.

Come attivare l'inserimento nei campi delle password

Trovare il codice che impedisce il copia e incolla

Per trovare e ispezionare rapidamente il codice che impedisce il copia e incolla:

  1. Espandi il riquadro Punti di interruzione listener di eventi.
  2. Espandi l'elenco Appunti.
  3. Seleziona la casella di controllo paste.
  4. Incolla del testo in un campo della password nella pagina.
  5. DevTools dovrebbe mettere in pausa nella prima riga di codice nel listener di eventi paste pertinente.

Rimuovi il codice che impedisce il copia e incolla

La causa del problema è spesso una chiamata a preventDefault() all'interno dell'ascoltatore di eventi paste associato all'elemento di immissione della password:

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

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

Se ascolti gli eventi di inserimento solo per anticiparli,rimuovi l'intero listener di eventi.

Risorse

Codice sorgente per il controllo Impedisce agli utenti di incollare dati nei campi di immissione