ユーザーは入力フィールドに貼り付けることができません

一部のウェブサイトでは、ユーザーがパスワードを貼り付けられるとセキュリティが低下すると主張しています。 ただし、パスワードの貼り付けによりパスワード マネージャーを使用できるようになるため、実際にはセキュリティが向上します。

パスワード マネージャーは通常、ユーザー用の安全なパスワードを生成し、安全に保存します。そのパスワードは、ユーザーがログインする必要があるたびにパスワード フィールドに自動的に貼り付けられます。このアプローチは一般的に、ユーザーに覚えやすいパスワードの入力を強制するよりも安全です。

一般に、ユーザーが <input> 要素に貼り付けられることを防ぐことはできません。

Lighthouse の監査の失敗

Lighthouse では、読み取り専用以外の入力フィールドにユーザーが貼り付けられないコードを報告します。

Lighthouse の監査で、ユーザーがパスワード フィールドに貼り付けられなくなる問題が表示される

Lighthouse では、読み取り専用ではない <input> 要素がすべて収集され、各要素にテキストの一部が貼り付けられ、paste イベントがカスタム イベント ハンドラによって妨げられていないことを確認します。

paste イベント リスナーの外部への貼り付けを防止することもできます。Lighthouse では、このシナリオは検出されません。

パスワード欄への貼り付けを有効にする方法

貼り付けを妨げているコードを見つける

貼り付けを妨げているコードをすばやく見つけて検査するには、次の手順を行います。

  1. [Event Listener Breakpoints] ペインを開きます。
  2. [クリップボード] リストを開きます。
  3. paste チェックボックスをオンにします。
  4. ページのパスワード欄にテキストを貼り付けます。
  5. DevTools は、関連する paste イベント リスナーのコードの最初の行で一時停止します。

貼り付けを妨げているコードを削除してください

多くの場合、問題の原因はパスワード入力要素に関連付けられている paste イベント リスナー内の preventDefault() の呼び出しです。

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

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

イベントを貼り付けてプリエンプトするだけの場合は、イベント リスナー全体を削除します。

関連情報

ユーザーが入力フィールドに貼り付けることができない」監査のソースコード