ペーストが禁止されているHTMLフォームに無理やりペーストするワンライナー

会員登録フォームなどで、たまにクリップボードからのペースト(貼り付け)が禁止されているサイトがあります。

貼り付けを実行しても何もおきない

これは不便なので、強引にペーストしてしまおうという内容です。

注意点

本記事で紹介している手法は、開発者ツールやJavaScriptの実行を伴うものです。
一般論として、「開発者ツールでこう操作すると良いよ」「このJavaScriptを貼り付けると良いよ」という記事を理解せずに鵜呑みにすることは、高いセキュリティリスクを伴います。利用の判断は慎重にお願いします。

なぜ困るのか

パスワードは通常パスワードマネージャや適当なジェネレータで生成すると思います。

英数記号を含む20文字以上の文字列を、1文字ずつ Il1 を間違えないように気をつけながら心を込めて打ち込むのも趣がありますが、忙しいときにはそんなことはしたくありません。パスワードマネージャのauto type機能を使えれば良いですが、

  • 僕が常用している KeePass はそのあたりの使い勝手や柔軟性がそこまで良くない。
  • ログインフォームならともかく、会員登録フォームはパスワード確認欄などもあり、全自動で良い感じに入力してくれないケースのほうが多い。一度きりのために設定を書くのも無駄。
  • 現在フォーカスしているフォームにパスワードだけ単品で入力する機能を使えば良いが、ショートカットキーを間違えてEnterまで入力してしまうほうが実行されると(うっかりフォーカス間違えていたらどうしよう)怖い。

などの理由で、ログイン時はブラウザアドオンの自動入力を使い、それが使えないケースではクリップボードを利用しています。

クリップボードからのペーストが禁止されると、1文字ずつ手入力を強いられることになり、疲れる上に入力ミスでログインできない事故も多発します。

なぜ禁止されているのか

メールアドレスの確認欄については、「入力欄からコピペできることで、間違ったメールアドレスをコピペして登録してしまう人が多くなる。禁止すべきだ。」という意見が通っていた時代もあると思います。現代では、間違える人は何しても間違えるので、間違えたら再登録すれば良いし確認欄いらなくねというのが主流だと思います。

パスワードのペーストを禁止するサイトがある理由は、すみませんよくわかりません。なんとなくペーストはけしからんみたいなセキュリティチェックリストでもあるのでしょうか。

禁止されている仕組み

いくつかの方法があると思いますが、一般的に利用されているのはJavaScriptで paste イベントを preventDefault() する方法だと思います。「JavaScript 貼り付け 禁止」などでググれば似たようなものがたくさんヒットします。

document.querySelector('input').addEventListener('paste', function(ev) {
    ev.preventDefault();
});

これは「貼り付け」イベントが起きたら「標準の挙動(フォームに文字列を貼り付ける)を停止する」という処理です。

解除方法(手動)

ChromeではdevtoolsからEvent Listenerを削除できます。

貼り付けたいフォーム上で右クリック→「検証」ボタンを押すとdevtoolsが起動するので、Event Listenersから paste を探します。サイトによってはフォームそのものではなく親要素などに設定されていることもあります。

見つけたら、マウスオーバーすると出てくるRemoveボタンをクリックするだけです。

該当のEvent ListenerをRemoveボタンで削除する

もう少し省力化してみる

毎度GUIで操作するのは手間です。そこで、ブックマークレットにしてみましょう。

Chromeでは、以下の文字列をアドレスバーに貼り付けたり、ブックマークに登録しておいて呼び出すことで、同じような効果が得られます。

javascript:document.addEventListener('paste', e => e.stopPropagation(), true)

Firefoxではアドレスバーへの貼り付けが動作しないようなので、開発者ツールのコンソール上で以下を実行するなどします。

document.addEventListener('paste', e => e.stopPropagation(), true)

数多くのサイトで試したわけではないので、動かないケースも多々あると思います。その時は適宜調整が必要です。

おたより発掘

デザインも頼めるシステム開発会社をお探しならBPS株式会社までどうぞ 開発エンジニア積極採用中です! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

baba

ゆとりプログラマー。 高校時代から趣味でプログラミングを初め、そのままコードを書き続けて現在に至る。慶應義塾大学環境情報学部(SFC)卒業。BPS設立初期に在学中から参加している最古参メンバーの一人。Ruby on Rails、PHP、Androidアプリ、Windows/Macアプリ、超縦書の開発などを気まぐれにやる。軽度の資格マニアで、情報処理技術者試験(16区分17回 + 情報処理安全確保支援士試験)、技術士(情報工学部門)、Ruby Programmer Gold、AWSソリューションアーキテクト(アソシエイト)、日商簿記2級、漢検準1級などを保有。

babaの書いた記事

BPSアドベントカレンダー

週刊Railsウォッチ