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


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

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

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

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

その1

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

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

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

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

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

その2

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

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

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

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

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

HTMLのvalue値は、Web開発者ツールで簡単に変更できるという話


うちの会社の話です。ある会員用ウェブサイトにおいて、ログイン後のページではその会員のIDをinputタグをhiddenにして保持するという方法をとり、全ページPOSTで送信するようにして、それぞれのページで会員の情報を得るという手法をとっていたのですが、これだとログイン後、inputタグのhidden内のIDだけを書き換えると、簡単に他の会員の情報が見えてしまうということが発覚しました。

他にも、3種類の選択肢が用意されているセレクトボックスがあったのですが、それぞれのoptionタグのvalue値は、『2』『3』『4』というようなものでした(実際は少し違うのですが、こんな感じです)。気になる人は気になると思いますが、なぜ『1』がなく、2からなのかと。そこで、optionタグのvalue値、例えば現在『2』となっているvalue値を『1』と書き換え、その箇所を選択すると・・・。なんと、その会員には見せてはいけない情報がズラリ。

上記は上司や先輩社員に報告することにより解決に至ったのですが、その時の上司や先輩社員の反応は、「えっ? そんなことできるの?」という感じをうけました。「GET渡しからPOST渡しに変更したうえに、リファラチェックしてるんだよ?」という感じで(注:あくまで自分の勝手なイメージです)。
結論からいうと、簡単にできます。ブラウザに付属のWeb開発者ツールをつかえば。Web開発者ツールとは、IE(8以上)では『F12 開発者ツール』、Chromeでは『Developer Tools』、Firefoxでは『開発ツール』と呼ばれてるものです(Firefoxはむしろ、『Firebug』のほうが有名ですが、Firebugはアドオンをインストール必要があり、『開発ツール』は標準で付属しているという違いがあります。機能面でいえば『Firebug』のほうが多いので、ウェブ制作に関わってる人なら『Firebug』をインストールしたほうがいいと思われます)。

では、その方法を簡単に説明します。
今回は、サンプルとして前回のHTMLのテキストボックスを、できるかぎり半角数値のキー入力のみにするで作成した半角数値しか入力できないようにしたテキストボックスから数値以外のテキストを入力し、送信する方法を三種類ご紹介。
 
下記ページが今回利用するページです。
テキスト入力項目の制限
HTMLとJavaScriptとPHPは下記のようになっています。

HTML

JavaScript

PHP

HTMLとJavaScript側では、数値以外の値が入力できないようなテキストボックスを用意しています。formタグ内のテキストボックス内でエンターキーを押すと、フォームを送信するという仕様を利用して、エンターキーを押すと同じページに送信するようにしています。
PHP側では、POSTで渡されたOnlyNumの値をみて、数値かどうか判定しています(7行目)。特別今回の記事に必要なわけではありませんが、5行目でリファラと自身のページの情報をチェックし、同じかどうかを判定しています。

まずは開発者ツールの表示方法を説明。ChromeかIEかFirebugならF12キーを、Firefoxの開発者ツールならCtrl+Shift+Iキーを押してみてください。すると、ブラウザの下にHTMLのDOMツリーが書かれたツールが表示されると思います。これが開発者ツールです。以下、画像はChromeのDeveloper Toolsです。
Chrome Developer Tools
このDOMツリーはソースコード(Ctrl+U で表示したソース)と全く同じというわけではなく、JavaScriptで変更したものが反映された結果となっています(その他にも、DOMツリーの仕様にしたがって変更されていることがあります)。
以下、このWeb開発者ツールを使って数値のみの入力制限をしているテキストボックスに数値以外を入れる方法を、三種類説明します。

その1

1つ目の方法は、入力制限を取り除く方法です。
まず、Chromeだと左下の虫眼鏡のようなアイコン、IEやFirefoxだと左上の矢印のアイコンをクリックし、その後にテキストボックスをクリックしてみてください。そうすると、開発者ツールの中のDOMツリーが、テキストボックスの箇所を選択した状態となります。
Chrome Developer Tools

つづいて、テキストボックス中の、onkeydown属性の中、『return OnlyNumber(event)』をダブルクリックするとその箇所が編集できるようになるので、onkeydown属性の中身を削除してください。
Chrome Developer Tools
これで、テキストボックスの中に数値以外の値が入力できるようになりました。試しに、『aiueo』と入力してエンターキーを押した結果は以下のようになります(style属性の中を削除するとIEとFirefoxで全角を入力できるようになり、oncontextmenu属性の中を削除すると右クリックしてメニューを表示させることができるようになります)。
数値以外を入力した場合の結果

その2

2つ目の方法は、ツール内で直接、値を入力する方法です。
テキストボックスの要素を選択してそのコード上で右クリックします。すると、メニューが表示されるので、Chromeでは『Add Attribute』、IEでは『属性の追加』、Firebugでは『新規属性』をクリックしてください。
Chrome Developer Tools

すると、入力ボックスがでてくると思うので、そこに『value=”aiueo”』などとして、value属性を追加し、その中に文字を入力してみてください。(Firefoxの開発者ツールでは属性を追加するという項目はないよう。仕方がないので、適当にどこか(例えば、『autocomplete=”off”』上)でダブルクリックし、そのテキスト入力項目内の最後に『value=”aiueo”』と追加してみてください)。
Chrome Developer Tools

上記の作業をすることにより、ブラウザ上のテキストボックスにもvalue属性にいれた文字が入るはずです。その状態でテキストボックスにフォーカスをあてたあと、エンターキーを押すことによって数値でない値が送信されます。
数値以外を入力した場合の結果

その3

3つ目の方法は、コンソールを使う方法。ちょっとだけ難しくなりますが、JavaScriptが分かるのであれば難しくありません。
まず、開発者ツールの上部にある『Console』もしくは『コンソール』タブをクリックしてみてください。すると、開発者ツール内がコンソールモードに切り替わります。
そしてそのコンソール内に、『document.querySelector(‘input’).value=”aiueo”』と入力して、エンターキーを押してみてください(querySelectorについては、右記を参考:document.querySelector – Web API リファレンス | MDN)。
Chrome Developer Tools

すると、テキストボックス内に『aiueo』と入力された状態になるので、先ほどと同じく、テキストボックスにフォーカスをあてて、エンターキーを押します。すると、数値でない『aiueo』という値が送信されます。
数値以外を入力した場合の結果
ところで、ChromeとFirefoxのWeb開発者ツールにはコマンドラインAPIというものが用意されており、その1やその2でしたように、テキストボックスの要素を選択状態にした後、コンソール画面にいって『$0.value=”aiueo”』としても同じ動作をします。この$0というのがコマンドラインAPIで、$0は直前で選択した要素を返すAPIとなっています。コマンドラインAPIについてはそのうち書くかもしれません。

以上、inputタグ内のvalue値を変更する方法を3つ紹介しました。これ以外にもあるかもしれませんが、思いつくかぎり3つです。
もちろん、上記で紹介した方法はinputタグ内のvalue値を変更する方法以外にも利用できます。例えば、style属性を追加してレイアウトを変更することもできますし、onclick属性を追加して新たにクリックした時に発生するイベントを追加することも簡単にできます。
いろいろ気になった箇所を変更してみると、新たに脆弱性が発見できるかもしれませんね。mixiでは脆弱性報告制度なんてものができたので、これでお小遣いを増やすこともできるかも? (参考:脆弱性報告制度 << mixi Developer Center (ミクシィ デベロッパーセンター))
まあ、さすがにmixiぐらいの規模のサイトが、こんな簡単に変更できるような脆弱性を持ち合わせているとは思いませんが(あえて、『思いたくありませんが』とは書いてません・・・)。

以下、応用問題。
今回のサンプルで、送信前にJavaScriptで半角数値かどうかのチェックをいれたら、半角数値以外の値を送ることはできないんじゃないか? なんて思われた方もいるかと思いますが、そんなことはありません。
それ用のサンプルページも作ってみました:テキスト入力項目のチェック
今回はjQeuryを外部JavaScriptとして呼び出すようにし、JavaScriptのコードは以下のように変更しています。

簡単に説明すると、フォーム送信時にテキストボックス内が半角数値かどうかチェックして、半角数値でなければアラートを出して注意を促し、送信しないという動作になっています(実は言うとこのコードでは何も入力しないと送信してしまうのですが、あくまで半角数値以外の値を入力することを考えてみてください)。

上記のページでどうやって数値以外の値を送信するかは次回説明しようと思います。

HTMLのテキストボックスを、できるかぎり半角数値のキー入力のみにする


HTMLのフォームのテキストボックスに、数値のみのキー入力してほしくないということもあると思いますが、そういう時のための実装を考えてみたので紹介。

HTML

JavaScript

続きを読む

サイドから通知を表示するjQueryプラグインを作ってみた


amano225/sidetool
GitHubに登録してみたこともあって、そこそこ役立つかもしれないものを適当に作ってみた。

使い方:

特定のdivタグ内に、”toolMain”というクラスがついたコンテナを入れることにより、ブラウザの端っこに隠れて表示されるようになる。
他に、”toolBtn”というクラスがついたコンテナを入れると、それがボタンの働きをして、toolMainを開閉する。

オプションの種類:

side
‘right’,’left’,’top’,’bottom’のどれかを入れる。入れた側にコンテナが配置される(初期値は’right’)。
firstView
falseかtrueのどちらか。trueにすると最初からtoolMainが表示されるようになる(初期値はfalse)
AfterOpenFunc
toolMainが開いた時に実行する関数
AfterCloseFunc
toolMainが閉じた時に実行する関数

その他:

指定されたコンテナに対して、ツールを開閉用にonNotifyというカスタムイベントをいれているので、trigger関数でツールの開閉ができる。

ダサダサなサンプルページ:

http://amyu.minibird.jp/sidetool/sidetool.html

多分、IEは7以上で動く。
あくまで自分用とGitHubの勉強用とjQueryプラグインの作成の勉強用に作っただけなので、それほどこってるわけではないです。多分、使い勝手はよくない。
もうちょっとこのプラグインとサンプルページを拡張していって、説明用の『README.md』というファイルも作成していこうかな。マークダウン記法はまだ全く分かってないけど。

GitHubに登録してみた


https://github.com/amano225/
前から登録しようかずっと迷っていたのだけれども、思い切って登録してみた。
とりあえず、適当にjQueryプラグインを作りながら試行錯誤中(sidetoolというの。動いてはいるようなのだけれども、もう少し手直しとサンプルページが作れたら、このブログで詳しく紹介しようと思う)。

だいたい、英語は分からなしい、バージョン管理システムの用語(リボジトリだとかブランチだとか)もよく分かってないので、はたして使い方としてあってるのかどうか・・・。