10_weeks_webdev_learninng_4th

↑10週間ウェブ開発講座

第四週 †

フォーム †

今週は入力フォームからデータを受け取る方法について扱います。
なお、今週は入力フォームから受け取ったデータの「正当な扱い方」については触れません*1。

今週の内容の理解のみでウェブアプリケーションを記述する場合、セキュリティ的な問題が発生する場合があります。

form/get について †

htmlで、入力フォームはformタグを使い次のように書きます。

<form action="post_to.html" method="get">
名前:<input type="text" name="name" /><br />
メールアドレス:<input type="text" name="mail" /><br />
お問い合わせ:<textarea name="inquiry"></textarea><br />
送信:<input type="submit" />
</form>

formタグ内のデータの送信先は、action属性の中で指定します。先ほどのformの例では、

<form action="post_to.html" method="get">
...
</form>

したがって、このformタグ内のデータはpost_to.htmlに送信されることになります。

formタグで重要となるのは、action属性と、method属性です。
先ほどの説明の通り、action属性ではデータの送信先を指定します。
一方のmethod属性では、データを送信する形式を指定することになります。

method属性が取りうる値は"post"か"get"です。
"post"と"get"は、送信データがurlに含まれるかどうかという点で異なります*2。

先ほどのformを実際に記述したページを用意しました。
開いてみてください。

http://y-mahata.s-tanno.com/sample/post_from.html

さて、ここでフォームに適当な文字列を入力して送信ボタンを押してください。

アドレスバーに、「http://y-mahata.s-tanno.com/sample/post_to.html」に続いて、
「?name=xxx」と「&mail=xxx」という文字列が含まれているはずです。
これは、 post_from.html から post_to.html にデータがきちんと渡っていることを意味しています*3。

これに対して、 post_to.html のbodyタグ内は次のようになっています。

<?php
var_dump($_GET);
?>

var_dump は、引数*4の内容をダンプします。
var_dump は「何が入っているかわからない変数」を出力することができるので、デバッグに非常に重宝します。
この例では、$_GETという配列で「?name=...」から先のデータを取得できることがわかります。

したがって、post_to.html を次のようにすることで、フォームから渡ったそれぞれの値を個別に取得することができます。

実際に上記のプログラムの出力を確かめてみてください。

form/post について †

<form action="post_to.html" method="post">
名前:<input type="text" name="name" /><br />
メールアドレス:<input type="text" name="mail" /><br />
お問い合わせ:<textarea name="inquiry"></textarea><br />
送信:<input type="submit" />
</form>

先ほどのmethod属性を"get"から"post"に変更すると、データが"post"で渡ることになります。

http://y-mahata.s-tanno.com/sample/post_from2.html

で、フォームに適当な文字列を入力して送信ボタンを押してください。
これに対して、 post_to2.html のbodyタグ内は次のようになっています。

<?php
var_dump($_POST);
?>

$_GET で送信されたデータを取得できていたのが、$_POST でデータを取得していることに注意してください。

XSS(クロスサイトスクリプティング)について †

ウェブサイトでよくある脆弱性の内、最もポピュラーなものの一つがXSSです。
XSS とは、「Cross Site Scripting」の略ですが、「CSS」は一般に「Cascading Style Sheet」のことなので、XSS と表現されます。

「Cross Site」であるというのは、サイトを跨ぐという意味です。
したがって、「Cross Site Scripting」というのは、サイトを跨いでスクリプトを実行するという意味です。

例として、先ほどのフォームに次の文字列を挿入して「送信」してください。

<script type="text/javascript">alert("XSS!");</script>

post_to.html で JavaScript? が実行されたことが確認できたでしょうか。
この例では、単純にalertを表示しただけですが、任意の JavaScript? を実行できるということは、例えばクッキーを抜くことなども可能であるということです。

この手の脆弱性を解消するための手段は次週で扱います。
とりあえずは、「現状の知識だけではセキュアなアプリケーションを作成できない」ということだけ把握しておけば問題ありません。

宿題 †

• その他のフォーム要素（ラジオボタン、ドロップダウンメニューなど）について調べ、データの受け渡しの仕方について調べてください。
• XSS を実行できるフォームを作成し、実際にXSSを行ってください。
• どうすれば XSS を解消できるか考えてみてください。