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