Webフォーム：ブラウザからサーバにデータを送るためのしくみ　～その2～

連載 :

2015年4月1日(水)

はじめに

これから始めるPHP入門コラムでは、PHPを学ぶ人が、PHPで簡単なプログラムを書けるようになるまでに必要な知識とポイントをTips的に書いていきます。今後PHPのスキルを身につけて仕事に役立てたい、という方のために「PHP技術者認定初級試験」の出題範囲を意識しながら進めていきますので、ぜひ最後までお付き合いください。

今回のあらすじ

リクエストとレスポンス
データを取得する
データを表示する
セキュリティ上の問題を修正する

このトピックはお伝えしたいことが多くて、前回はテキストが多くなってしまい、編集部に前後編にされてしまいました（笑）。ぜひ合わせてお読みください。

受け取ったデータを表示する

（4）適切でないデータがある場合

利用者が入力したデータが不適切だった場合（年齢が1200歳など）、エラーメッセージと再入力用のWebフォームを表示する必要があります。

前回までのチェック処理により、不適切なデータが存在した場合は、配列の$errorMsgにエラーメッセージが格納されています。エラーメッセージが存在するかどうかをチェックして、処理を分岐させましょう。Webフォームを表示する処理は関数に分けて再利用するようにします。

001<?php
002// エラーメッセージ保存用配列
003$errorMsg = array();
004 
005// 選択肢
006$sexes = array("male" => "男", "female" => "女");
007$hobbies = array(
008    "cooking"  => "料理",
009    "swimming" => "水泳",
010    "running" => "ランニング"
011);
012$addresses = array(
013    "north" => "北日本",
014    "east"  => "東日本",
015    "west"  => "西日本",
016    "south" => "南日本"
017);
018 
019// 初期値
020$form = array();
021$form["name"] = "John";
022$form["age"] = 25;
023$form["sex"] = "male";
024$form["hobbies"] = array("cooking", "swimming");
025$form["address"] = "east";
026$form["comment"] = "Hello";
027 
028/*------------------------------------------------------------
029    2回目以降のアクセス
030------------------------------------------------------------*/
031if (array_key_exists("not_the_first_time", $_POST)) {
032 
033    /*------------------------------------------------------------
034        名前の入力チェック
035    ------------------------------------------------------------*/
036    $form["name"] = $_POST["name"];
037 
038    // $_POST["name"] が存在しない場合
039    if (! array_key_exists("name", $_POST)) {
040        $errorMsg[] = "名前を入力してください。";
041    }
042    // $_POST["name"] が存在する場合
043    else {
044        // 前後の空白を除去する（空白文字のみの場合は空になる）
045        $form["name"] = trim($form["name"]);
046 
047        // 中身が空（""）である場合
048        if ($form["name"] === "") {
049            $errorMsg[] = "名前を入力してください。";
050        }
051        // 中身が空（""）でない場合
052        else {
053            $length = strlen($form["name"]);
054            if ($length < 3 || $length > 20) {
055                $errorMsg[] = "名前は3文字以上20文字以内で入力してください。";
056            }
057        }
058    }
059 
060    /*------------------------------------------------------------
061        年齢の入力チェック
062    ------------------------------------------------------------*/
063    // $_POST["age"] が存在する場合
064    if (array_key_exists("name", $_POST)) {
065 
066        $form["age"] = $_POST["age"];
067 
068        // 中身が空（""）でない場合
069        if ($form["age"] !== "") {
070 
071            // 整数でない場合
072            if (strval(intval($form["age"])) !== $form["age"]) {
073                $errorMsg[] = "年齢は整数で入力してください。";
074            }
075            // 正の整数でない場合
076            else if ($form["age"] < 0) {
077                $errorMsg[] = "年齢は0歳以上で入力してください。";
078            }
079        }
080    }
081 
082    /*------------------------------------------------------------
083        性別の入力チェック
084    ------------------------------------------------------------*/
085    // $_POST["sex"] が存在しない場合
086    if (! array_key_exists("sex", $_POST)) {
087        $errorMsg[] = "性別を選択してください。"; // ラジオボタンなので「入力」ではなく「選択」で。
088    }
089    // $_POST["sex"] が存在する場合
090    else {
091        $form["sex"] = $_POST["sex"];
092 
093        // 選択肢にないものの場合
094        if (! array_key_exists($form["sex"], $sex)) {
095            $errorMsg[] = "性別を正しく選択してください。";
096        }
097    }
098 
099    /*------------------------------------------------------------
100        趣味の入力チェック
101    ------------------------------------------------------------*/
102    $form["hobbies"] = $_POST["hobbies"]; // hobbiesは配列で取得される
103 
104    // $_POST["hobbies"] が存在する場合
105    if (array_key_exists("hobbies", $_POST)) {
106 
107        // 選択肢にないものの場合
108        foreach($form["hobbies"] as $value) {
109            if (! array_key_exists($value, $hobbies)) {
110                $errorMsg[] = "趣味を正しく選択してください。";
111            }
112        }
113    }
114 
115    /*------------------------------------------------------------
116        住所の入力チェック
117    ------------------------------------------------------------*/
118    $form["address"] = $_POST["address"];
119 
120    // $_POST["address"] が存在する場合
121    if (array_key_exists("address", $_POST)) {
122        // 選択肢にないものの場合
123        if (! array_key_exists($form["address"], $addresses)) {
124            $errorMsg[] = "住所を正しく選択してください。";
125        }
126    }
127 
128    /*------------------------------------------------------------
129        コメントの入力チェック
130    ------------------------------------------------------------*/
131    $form["comment"] = $_POST["comment"];
132 
133    // $_POST["comment"] が存在する場合
134    if (array_key_exists("name", $_POST)) {
135        if (strlen($form["comment"]) > 100) {
136            $errorMsg[] = "コメントは100文字以内で入力してください。";
137        }
138    }
139 
140    /*------------------------------------------------------------
141        適切でないデータがある場合
142    ------------------------------------------------------------*/
143    if (count($errorMsg) > 0) {
144 
145        // エラーメッセージを表示する
146        foreach($errorMsg as $message) {
147            echo $message . '<br>';
148        }
149 
150        // Webフォームを表示する
151        showForm();
152    }
153 
154    /*------------------------------------------------------------
155        すべてのデータが適切である場合
156    ------------------------------------------------------------*/
157    else {
158 
159    }
160}
161 
162/*------------------------------------------------------------
163    1回目のアクセス
164------------------------------------------------------------*/
165else {
166    // Webフォームを表示する
167    showForm();
168}
169 
170// Webフォームを表示する関数
171function showForm() {
172global $sexes, $hobbies, $addresses, $form;
173    echo '
174        <form method="POST" action="profile.php">
175            名前: <input type="text" name="name" value="' . $form["name"] . '"><br>
176            年齢: <input type="text" name="age" value="' . $form["age"] . '"><br>
177    ';
178    echo '性別: ';
179    foreach($sexes as $value => $label) {
180        $checked = '';
181        // 初期値の場合、「checked」をつける
182        if ($value === $form["sex"]) {
183            $checked = ' checked';
184        }
185        echo '<label><input type="radio" name="sex" value="' . $value . '"' . $checked . '>' . $label . '</label>';
186    }
187    echo '<br>';
188    echo '趣味: ';
189    foreach($hobbies as $value => $label) {
190        $checked = '';
191        // 初期値の場合、「checked」をつける
192        if (in_array($value, $form["hobbies"])) {
193            $checked = ' checked';
194        }
195        echo '<label><input type="checkbox" name="hobbies[]" value="' . $value . '"' . $checked . '>' . $label . '</label>';
196    }
197    echo '<br>';
198    echo '住所: <select name="address">';
199    foreach($addresses as $value => $label) {
200        $selected = '';
201        // 初期値の場合、「selected」をつける
202        if ($value === $form["address"]) {
203            $selected = ' selected';
204        }
205        echo '<option value="' . $value . '"' . $selected . '>' . $label . '</option>';
206    }
207    echo '</select><br>';
208    echo '
209            コメント: <textarea type="text" name="name">' . $form["comment"] . '</textarea><br>
210            <br>
211            <input type="hidden" name="not_the_first_time" value="yes">
212            <input type="submit" value="送信">
213        </form>
214    ';
215}
216?>

（5）すべてのデータが適切である場合

すべてのデータが適切であるかどうかは、先ほど$errorMsgでチェックしたので、データを画面に表示する処理を考えましょう。

選択肢の配列を用意してあるものについては、その配列を使います。入力されてくるのは性別であれば「male」などなので、それを「男」という表示にするためです。

コメントでは改行が入力されるので、textareaでの改行部分に
タグを挿入するnl2br関数を使います。

01<?php
02$nodata = "(未回答)";
03 
04echo '<h2>名前</h2>';
05if (strlen($form["name"]) > 0) {
06    echo $form["name"];
07}
08else {
09    echo $nodata;
10}
11echo '<h2>年齢</h2>';
12if (strlen($form["age"]) > 0) {
13    echo $form["age"] . '歳';
14}
15else {
16    echo $nodata;
17}
18echo '<h2>性別</h2>';
19if (strlen($form["sex"]) > 0) {
20    echo $sexes[$form["sex"]];
21}
22else {
23    echo $nodata;
24}
25echo '<h2>趣味</h2>';
26$count = count($form["hobbies"]);
27if ($count > 0) {
28    for($i = 0; $i < $count; $i++) {
29        echo $hobbies[$form["hobbies"][$i]];
30        if ($i + 1 < $count) {
31            echo ', ';
32        }
33    }
34}
35else {
36    echo $nodata;
37}
38echo '<h2>住所</h2>';
39if (strlen($form["address"]) > 0) {
40    echo $addresses[$form["address"]];
41}
42else {
43    echo $nodata;
44}
45echo '<h2>コメント</h2>';
46if (strlen($form["comment"]) > 0) {
47    echo nl2br($form["comment"]);
48}
49else {
50    echo $nodata;
51}
52?>

ブラウザ上での表示

セキュリティ上の問題を修正する

ここまでで、とりあえず動くレベルのものができましたが、実際に運用するにはまだバグとセキュリティ上の問題があります。

Webフォームを出力するこの部分を見てください。

1<?php
2echo '名前: <input type="text" name="name" value="' . $form["name"] . '">';
3?>

$form["name"]には「trim($ _POST["name"])」が入っているので、もし名前に「山田"太郎"花子」と入力された場合、以下のようにHTMLの構文エラーになってしまいます。

`1`	`名前: <input type="text" name="name" value="山田"太郎"花子">`

それではstr_replace関数を使い「"」を「"」に変換すればそれでよいでしょうか。しかしHTMLには、他にも「 (>)」「& (&)」など、エスケープしなければならない文字がいくつかあります。これらを一手に引き受けてくれるのが、htmlentities関数です。

1<?php
2echo '名前: <input type="text" name="name" value="' . htmlentities($form["name"], ENT_QUOTES, "UTF-8") . '">';
3?>

この例のようにHTMLが崩れてしまうだけならちょっとしたバグで済みますが、入力されたデータをそのまま出力していると、もっと悪質な他人に害を及ぼすようなコードを埋め込まれてしまうことがあります。データ出力部分である、次のコードを見てください。

1<?php
2echo '<h2>名前</h2>';
3if (strlen($form["name"]) > 0) {
4    echo $form["name"];
5}
6?>

もし名前の入力欄に、悪質なWebサイトへ勝手に画面遷移してしまうようなJavaScriptが入力されてしまったらどうなるでしょう。

`1`	`<h2>名前</h2><script>location.href='http://悪質なサイト.jp';</script>`

今のところ、この画面を見るのはデータを入力した本人だけですが、今後プロフィールデータをデータベースに登録する処理を追加し、ある人のプロフィール画面に他の人もアクセスできるようになったとしたら、その画面を見た人が被害を受けてしまいます。このようにHTMLの中に悪意のあるスクリプトを埋め込んでしまうことを「クロスサイトスクリプティング」といいます。

クロスサイトスクリプティングも先ほどのhtmlentities関数で防ぐことができます。

1echo '<h2>名前</h2>';
2if (strlen($form["name"]) > 0) {
3    echo htmlentities($form["name"], ENT_QUOTES, "UTF-8");
4}
5 
6<h2>名前</h2><script>location.href='http://悪質なサイト.jp';</script>

以上で、プログラムが完成しました。

001<?php
002// エラーメッセージ保存用配列
003$errorMsg = array();
004 
005// 選択肢
006$sexes = array("male" => "男", "female" => "女");
007$hobbies = array(
008    "cooking"  => "料理",
009    "swimming" => "水泳",
010    "runnning" => "ランニング"
011);
012$addresses = array(
013    "north" => "北日本",
014    "east"  => "東日本",
015    "west"  => "西日本",
016    "south" => "南日本"
017);
018 
019// 初期値
020$form = array();
021$form["name"] = "John";
022$form["age"] = 25;
023$form["sex"] = "male";
024$form["hobbies"] = array("cooking", "swimming");
025$form["address"] = "east";
026$form["comment"] = "Hello";
027 
028/*------------------------------------------------------------
029    2回目以降のアクセス
030------------------------------------------------------------*/
031if (array_key_exists("not_the_first_time", $_POST)) {
032 
033    /*------------------------------------------------------------
034        名前の入力チェック
035    ------------------------------------------------------------*/
036    $form["name"] = $_POST["name"];
037 
038    // $_POST["name"] が存在しない場合
039    if (! array_key_exists("name", $_POST)) {
040        $errorMsg[] = "名前を入力してください。";
041    }
042    // $_POST["name"] が存在する場合
043    else {
044        // 前後の空白を除去する（空白文字のみの場合は空になる）
045        $form["name"] = trim($form["name"]);
046 
047        // 中身が空（""）である場合
048        if ($form["name"] === "") {
049            $errorMsg[] = "名前を入力してください。";
050        }
051        // 中身が空（""）でない場合
052        else {
053            $length = strlen($form["name"]);
054            if ($length < 3 || $length > 20) {
055                $errorMsg[] = "名前は3文字以上20文字以内で入力してください。";
056            }
057        }
058    }
059 
060    /*------------------------------------------------------------
061        年齢の入力チェック
062    ------------------------------------------------------------*/
063    // $_POST["age"] が存在する場合
064    if (array_key_exists("name", $_POST)) {
065 
066        $form["age"] = $_POST["age"];
067 
068        // 中身が空（""）でない場合
069        if ($form["age"] !== "") {
070 
071            // 整数でない場合
072            if (strval(intval($form["age"])) !== $form["age"]) {
073                $errorMsg[] = "年齢は整数で入力してください。";
074            }
075            // 正の整数でない場合
076            else if ($form["age"] < 0) {
077                $errorMsg[] = "年齢は0歳以上で入力してください。";
078            }
079        }
080    }
081 
082    /*------------------------------------------------------------
083        性別の入力チェック
084    ------------------------------------------------------------*/
085    // $_POST["sex"] が存在しない場合
086    if (! array_key_exists("sex", $_POST)) {
087        $errorMsg[] = "性別を選択してください。"; // ラジオボタンなので「入力」ではなく「選択」で。
088    }
089    // $_POST["sex"] が存在する場合
090    else {
091        $form["sex"] = $_POST["sex"];
092 
093        // 選択肢にないものの場合
094        if (! array_key_exists($form["sex"], $sex)) {
095            $errorMsg[] = "性別を正しく選択してください。";
096        }
097    }
098 
099    /*------------------------------------------------------------
100        趣味の入力チェック
101    ------------------------------------------------------------*/
102    $form["hobbies"] = $_POST["hobbies"]; // hobbiesは配列で取得される
103 
104    // $_POST["hobbies"] が存在する場合
105    if (array_key_exists("hobbies", $_POST)) {
106 
107        // 選択肢にないものの場合
108        foreach($form["hobbies"] as $value) {
109            if (! array_key_exists($value, $hobbies)) {
110                $errorMsg[] = "趣味を正しく選択してください。";
111            }
112        }
113    }
114 
115    /*------------------------------------------------------------
116        住所の入力チェック
117    ------------------------------------------------------------*/
118    $form["address"] = $_POST["address"];
119 
120    // $_POST["address"] が存在する場合
121    if (array_key_exists("address", $_POST)) {
122        // 選択肢にないものの場合
123        if (! array_key_exists($form["address"], $addresses)) {
124            $errorMsg[] = "住所を正しく選択してください。";
125        }
126    }
127 
128    /*------------------------------------------------------------
129        コメントの入力チェック
130    ------------------------------------------------------------*/
131    $form["comment"] = $_POST["comment"];
132 
133    // $_POST["comment"] が存在する場合
134    if (array_key_exists("name", $_POST)) {
135        if (strlen($form["comment"]) > 100) {
136            $errorMsg[] = "コメントは100文字以内で入力してください。";
137        }
138    }
139 
140    /*------------------------------------------------------------
141        適切でないデータがある場合
142    ------------------------------------------------------------*/
143    if (count($errorMsg) > 0) {
144 
145        // エラーメッセージを表示する
146        foreach($errorMsg as $message) {
147            echo $message . '<br>';
148        }
149 
150        // Webフォームを表示する
151        showForm();
152    }
153 
154    /*------------------------------------------------------------
155        すべてのデータが適切である場合
156    ------------------------------------------------------------*/
157    else {
158        $nodata = htmlentities("(未回答)", ENT_QUOTES, "UTF-8");
159 
160        echo '<h2>名前</h2>';
161        if (strlen($form["name"]) > 0) {
162            echo htmlentities($form["name"], ENT_QUOTES, "UTF-8");
163        }
164        else {
165            echo $nodata;
166        }
167        echo '<h2>年齢</h2>';
168        if (strlen($form["age"]) > 0) {
169            echo htmlentities($form["age"], ENT_QUOTES, "UTF-8") . '歳';
170        }
171        else {
172            echo $nodata;
173        }
174        echo '<h2>性別</h2>';
175        if (strlen($form["sex"]) > 0) {
176            echo htmlentities($sexes[$form["sex"]], ENT_QUOTES, "UTF-8");
177        }
178        else {
179            echo $nodata;
180        }
181        echo '<h2>趣味</h2>';
182        $count = count($form["hobbies"]);
183        if ($count > 0) {
184            for($i = 0; $i < $count; $i++) {
185                echo htmlentities($hobbies[$form["hobbies"][$i]], ENT_QUOTES, "UTF-8");
186                if ($i + 1 < $count) {
187                    echo ', ';
188                }
189            }
190        }
191        else {
192            echo $nodata;
193        }
194        echo '<h2>住所</h2>';
195        if (strlen($form["address"]) > 0) {
196            echo htmlentities($addresses[$form["address"]], ENT_QUOTES, "UTF-8");
197        }
198        else {
199            echo $nodata;
200        }
201        echo '<h2>コメント</h2>';
202        if (strlen($form["comment"]) > 0) {
203            echo nl2br(htmlentities($form["comment"], ENT_QUOTES, "UTF-8")); // nl2brは最後にする
204        }
205        else {
206            echo $nodata;
207        }
208    }
209}
210 
211/*------------------------------------------------------------
212    1回目のアクセス
213------------------------------------------------------------*/
214else {
215    // Webフォームを表示する
216    showForm();
217}
218 
219// Webフォームを表示する関数
220function showForm() {
221global $sexes, $hobbies, $addresses, $form;
222    echo '
223        <form method="POST" action="profile.php">
224            名前: <input type="text" name="name" value="' . htmlentities($form["name"], ENT_QUOTES, "UTF-8") . '"><br>
225            年齢: <input type="text" name="age" value="' . htmlentities($form["age"], ENT_QUOTES, "UTF-8") . '"><br>
226    ';
227    echo '性別: ';
228    foreach($sexes as $value => $label) {
229        $checked = '';
230        // 初期値の場合、「checked」をつける
231        if ($value === $form["sex"]) {
232            $checked = ' checked';
233        }
234        echo '<label><input type="radio" name="sex" value="' . htmlentities($value, ENT_QUOTES, "UTF-8") . '"' . $checked . '>' . htmlentities($label, ENT_QUOTES, "UTF-8") . '</label>';
235    }
236    echo '<br>';
237    echo '趣味: ';
238    foreach($hobbies as $value => $label) {
239        $checked = '';
240        // 初期値の場合、「checked」をつける
241        if (in_array($value, $form["hobbies"])) {
242            $checked = ' checked';
243        }
244        echo '<label><input type="checkbox" name="hobbies[]" value="' . htmlentities($value, ENT_QUOTES, "UTF-8") . '"' . $checked . '>' . htmlentities($label, ENT_QUOTES, "UTF-8") . '</label>';
245    }
246    echo '<br>';
247    echo '住所: <select name="address">';
248    foreach($addresses as $value => $label) {
249        $selected = '';
250        // 初期値の場合、「selected」をつける
251        if ($value === $form["address"]) {
252            $selected = ' selected';
253        }
254        echo '<option value="' . htmlentities($value, ENT_QUOTES, "UTF-8") . '"' . $selected . '>' . htmlentities($label, ENT_QUOTES, "UTF-8") . '</option>';
255    }
256    echo '</select><br>';
257    echo '
258            コメント: <textarea type="text" name="name">' . htmlentities($form["comment"], ENT_QUOTES, "UTF-8") . '</textarea><br>
259            <br>
260            <input type="hidden" name="not_the_first_time" value="yes">
261            <input type="submit" value="送信">
262        </form>
263    ';
264}
265?>

おまけ

Webシステムを作る際に、よく必要となりそうなデータ形式のチェック方法を2点ほど紹介します。

日付の入力値チェック方法

一週間後までの予約ができるシステムがあるとしましょう。予約日として入力された日付が、一週間以内であるかどうかをチェックするには以下のようにします。

1<?php
2$date = $_POST["date"]; // 例：2015/03/02
3// $dataのタイムスタンプと一週間後のタイムスタンプを比較する
4if (strtotime($date) > strtotime('+1 week')) {
5echo '予約日は一週間以内の日付を入力してください。';
6}
7?>

strtotimeは、文字列をタイムスタンプ（1970年1月1日からの経過秒数）に変換する関数です。数値であるタイムスタンプは、大小の比較に適しています。使用できる文字列の種類は多数ありますので、詳細はマニュアルをご覧ください。

メールアドレスの入力値チェック方法

「正規表現」という、文字列の規則を表す特殊な書き方があります。例えば「小文字のアルファベット1文字と数字１文字」は「[a-z][0-9]」と書きます。入力されたデータが規則に適合しているかどうかを調べる際には、preg_matchを利用できます。

メールアドレスも、ある程度までなら正規表現でチェックすることができます。「＠マークが入っていればOK」というくらい簡単でゆるいものにするか、正規表現で厳密にチェックするかどうかは、システムの性格にもよるでしょう。

おわりに

いかがでしたか。前回・今回にわたって、がっつりとコードを書いたので量が多かったかもしれませんが、ブラウザで入力したデータがPHPに送られ、画面に表示されるというインタラクティブな部分を楽しめたのではないでしょうか。次回はWebシステムになくてはならないデータベースについて取り上げます。それではまた。