JavaScriptのみの入力文字チェックはダメ。という話

前回(HTMLのvalue値は、Web開発者ツールで簡単に変更できるという話 | while(isプログラマ))の続き。

テキスト入力項目の制限
前回予告したとおり、今回は上記のページから、半角数値以外の文字を送信するという話です。
JavaScriptでの入力項目チェックのスクリプトは以下のようになっています。ソースコードに書いてある内容と同じなので、ユーザーでも簡単に分かります。

$(function(){
	$('form').bind('submit',function(){
		var onlyNumText = $(this).find('input[name="OnlyNum"]').val();
		if( onlyNumText.match(/[^0-9]+/) ){
			alert("半角数値を入力してね!");
			return false;
		}
	});
});

簡単に説明すると、二行目でフォームが送信されるときに設定する関数を設定しています。
4行目で半角数値のみの文字かチェックし、そうでなければアラートをだして送信を取りやめています。

今回は上記のフォームから、半角数値以外の文字が入った文字列を送信する方法を二つ紹介。

その1

POST渡しというものは、フォーム自体のnameはみていません。それを利用して、もう一つフォームを作成してそのフォームから送信するという方法が考えられます。
Web開発者ツールを開いてコンソールモードにした後、コンソール画面に下記のように入力して、エンターキーを押します。

$('<form>').attr('method', 'post').append('<input value="aiueo" name="OnlyNum">').trigger('submit')

はい。これで『aiueo』という文字を送信できましたね。リファラチェックにも引っかかりません。

何をやっているかというと、新しいフォームのjQueryオブジェクトを作成し、その中にnameがOnlyNumのinputタグをいれ、トリガー関数でサブミットしているというものです。
これだけじゃあ何をやっているのか分からない人もいると思うので、試しに『trigger(‘submit’)』の箇所を変更して、下記のようにしてみてください。

$('<form>').attr('method', 'post').append('<input value="aiueo" name="OnlyNum">').insertAfter('form')

insertAfterは、対象要素をinsertAfter関数内で指定した要素の後に追加する関数です。すなわち今回の場合だと、現在あるformタグの後に、新しく作成したformがDOM上に追加されることになります。
なので、上記を実行すると、下記の画像のように、今あるテキストボックスの下にテキストボックスが追加されたはずです。
テキストボックスを追加
そして追加されたテキストボックスをフォーカスし、エンターキーを押すと、半角数値以外の文字が送信されてしまうというわけです。

なお、今回はサブミットする時に値をチェックする関数をbindで指定していますが、liveでやるとうまくいきません(キリッ)。と書こうとおもったんですが、どうやらlive関数は、submitでイベントハンドラが登録できないようです(参考:jQueryのlive関数が超便利な件について | さくらたんどっとびーず)。まあ、live関数の仕組みを考えたら、そりゃそうか(liveは、$(document)に対してイベント設定し、バブリングを見て実行するかどうか決めているそうなので)。

その2

その2は、フォーム送信時の値チェックのイベント自体をキャンセルする方法です。
bindで設定したイベントはunbind関数で削除できてしまうので、Web開発者ツールのコンソールで下記のように記入して実行するとイベントが起きなくなってしまいます。

$('form').unbind('submit')

こちらのほうが直感的ですし簡単ですね。ただ、自分がunbind関数を今まで使ったことがなかったので最初、思いつきませんでした。

で、思いつかないといえばもうひとつ。ある意味自分にとって当たり前になっていたので気づかなかったのですが、ふと思ったことがあります。
先日の入力制限も、今回の入力チェックも、
JavaScriptをオフにしてたら半角数値以外でも送信しちゃうんじゃね?・・・と。

では、早速試してみましょう。ChromeからJavaScriptを簡単にオフにするアドオンを以下からインストールします。
Chrome ウェブストア – jsoff
インストールしたらブラウザの右上にサイのマークがついたボタンが追加されていると思うので、それをクリック。『Zzz』となったら、JavaScriptがオフになっているという意味です。
つづいて先日の入力制限用フォームのページと、今回の入力チェックのテキスト入力項目の制限のページへ。
 
結論:どちらも普通に半角数値以外の文字を入力して送信できた。

たまには、JavaScriptがオフになっている状況も考えたほうがいいかもしれませんね。

コメント

タイトルとURLをコピーしました