EFOとしても重要な機能である、「送信ボタン制御」という処理があります。
これは、入力フォームが正常に入力されていない時に送信ボタンを押せないようにする処理ですが、
通常の入力フォームでは、入力した文字列を送信して初めてサーバー側でバリデーションチェックされて、真っ赤な文字で「その文字は使用できません」などのエラーメッセージが画面に表示されて、利用ユーザーは衝撃をうけて離脱してしまうという流れになり、誰も得をしないシステムの流れになります。
これを回避するには、入力が正常でない場合は送信ボタンが押せない状態にして、どこの箇所の入力に問題があるのかをわかりやすくその場で表示して上げることが重要です。
通常のサイトであれば、この施策をするだけで、送信完了率が格段にアップするというEFO施策がセオリーですが、リスト型攻撃の対策は、単に送信できないようにすることで、処理は成功になります。
簡単なテストフォームの作成
今回のテストフォームの為に簡単なソースを作っておきます。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form-submit-pause</title>
</head>
<body>
<form name="login" action="action.php">
name : <input type="text" name="id" value="" autocomplete="off"><br>
pass : <input type="password" name="pass" value="" autocomplete="new-password"><br>
<input type="submit" value="login">
</form>
</body>
</html>
<?php
echo $_REQUEST["id"]."/".$_REQUEST["pass"];
exit();
IDとパスワードを入力してsubmitするという、リスト型攻撃をするのに格好のサイトを簡易に実現しました。
onsubmit処理を制御する
送信ボタン(type="submit")を押した時に、formタグに対して、submitイベントが実行されます。
その処理を一旦停止するには、以下のように処理します。
document.forms.login.onsubmit=function(){return false}
このコードを実行すると、submitイベントによるフォームのデータ送信は行えなくなります。
ちなみに、もとに戻すには、下記を実行します。
document.forms.login.onsubmit=function(){return true}
ただし、この方法は、onsubmitイベントがhtmlのデフォルト状態の場合にのみ有効で、セキュリティを気にしているサイトの場合に、onsubmitにイベント処理を書き込んでいるサイトがあります。
こうした場合は、一旦onsubmitイベントを別引数に格納しておいて、trueに戻すのではなく、その引数を再度アタッチしてあげると正常動作に戻ることもできますが、リスナー処理などを複雑に行なわれているサイトの場合は、コケる可能性もありますので、その点を注意する必要があります。
あと、以下のようにしてsubmitを行うこともできてしまうので、bot対応するには、submitイベント事態も防止しなければいけませんね。
document.forms.login.submit();
送信ボタンを制御する
送信ボタンを押した時に反応させないようにするには、type属性を"submit"から"button"に切り替えると押しただけでは、反応しなくなります。
document.querySelector("input[type='submit']").type = "button";
もちろん、この状態でも、javascriptでsubmit()を実行すると、送信されてしまうのですが、button.click()などの対策にはなりそうです。
また、submit処理に関しては、もともとtype="button"のonclickに対して、submitを実行するようなスクリプトを書いているサイトも比較的多く、そうしたサイトは、クリックした時に、クッキーに埋め込んだセキュリティコードなどを、hidden項目に自動挿入して、不正アクセスを防止するような施策をしているようですが、個人的には、こうした処理は全く意味が無く、単に送信処理を複雑にしているだけに思えます。
w3cの基準って準拠されないデメリットが無い為に、こうした独自処理が横行してしまうんですね。
submit処理を制御する
onsubmitは、送信ボタンを押した時のイベントですが、submitイベントは、実際に送信する処理事態のイベントです。
これもonsubmitと同じ様に、以下のようにすることで、submit処理事態を無効化することができます。
document.forms.login.submit = function(){return false};
こうしておくと、javascriptでformに対してsubmit()を実行しても、データが送信されなくなります。
しかし、このままでは、正常に送信することができなくなるので、元通り送信するようにするためには、一旦submitイベントを、変数に格納して、正常送信する場合にもとに戻せるようにします。
var submit = document.forms.login.submit;
// 正常にもどす
document.forms.login.submit = submit;
上記プログラムで、無事にsubmitに戻せることが確認できます。
submit変数は、事前に行っておいて、正常状態になった場合のみ、戻す操作をするのがいいかと思います。
とりあえず、送信制御をする方法が分かったので、次回は、リスト型攻撃防止の為の、ロボットと人の操作を見極める方法を検証してみます。
