一部のウェブサイトでは、ユーザーがパスワードを貼り付けることを許可するとセキュリティが低下すると主張しています。ただし、パスワードを貼り付けると、パスワード マネージャーを使用できるため、セキュリティが向上します。
通常、パスワード マネージャーはユーザーに強力なパスワードを生成して安全に保存し、ユーザーがログインする必要があるたびにパスワード フィールドに自動的に貼り付けます。通常、このアプローチは、覚えやすい短いパスワードをユーザーに入力させるよりも安全です。
通常、ユーザーが <input> 要素に貼り付けできないようにすることはできません。
この Lighthouse 監査が不合格となる仕組み
Lighthouse は、ユーザーが読み取り専用以外の入力フィールドに貼り付けられないようにするコードを報告します。
Lighthouse は、読み取り専用以外のすべての <input> 要素を収集し、各要素にテキストを貼り付け、paste イベントがカスタム イベント ハンドラによってブロックされていないことを確認します。
paste イベント リスナーの外部での貼り付けを禁止することもできます。Lighthouse ではそのようなシナリオは検出されません。
パスワード欄への貼り付けを有効にする方法
貼り付けを妨げているコードを見つける
貼り付けを妨げているコードをすばやく見つけ、検査するには:
- [イベント リスナー ブレークポイント] ペインを展開します。
- [クリップボード] リストを開きます。
- [
paste] チェックボックスをオンにします。 - ページのパスワード欄にテキストを貼り付けます。
- DevTools は、関連する
pasteイベント リスナーの最初のコード行で一時停止します。
貼り付けを妨げているコードを削除する
多くの場合、問題の原因は、パスワード入力要素に関連付けられている paste イベント リスナー内での preventDefault() の呼び出しです。
let input = document.querySelector('input');
input.addEventListener('paste', (e) => {
e.preventDefault(); // This is what prevents pasting.
});
貼り付けイベントのみをリッスンしてプリエンプトする場合は、イベント リスナー全体を削除します。