Chapter03 データの送受信

概要と目標 データの受け取り方法を理解し、
データの送受信をやってみる。

フォームから送信されたデータの受取方法や、安全な出力方法を習得し、
消費税計算機を作れるようになろう。

今回のゴール

RERUN

新しいウインドウで表示する

データの送信 HTMLのみでデータは送信できる。

データの送信はHTMLのみで出来る。
データは、GETまたは、POSTで送信する。

form要素
<form action="送信先" method="get（初期値） または post">
...
</form>

送信先： 空の場合は、自分自身のファイルに送信する
GETとPOSTの違い
GET POST
送信方法 URLの末尾にデータを付加
（Ex: http://dummy.com?key=1） 		HTTPのリクエストボディ部分にデータを不可
メリット フォームを利用せずにデータを送信できる データの中身が見えない
デメリット
  • 大量のデータは送信できない
  • データの中身が見える
 送信後にデータは消える
主な利用用途
  • サイト内検索
  • ページング
  • お問い合わせフォーム
  • 商品購入フォーム

いつでもデータにアクセスしたい時は GET。
ユーザーの情報を送信する時は POST を使う。

送信フォームを作成してみよう！

  1. 「chapter03」 › 「send」フォルダ内の「index.html」をテキストエディタで開く
  2. h1要素の下に、「get」で送信する入力フォームを作成
chapter03/send/index.html
<form action="receive.php">
  <p><label>お名前： <input type="text" name="your_name"></label></p>
  <p><input type="submit" value="送信"></p>
</form>
  1. 上書き保存
  2. 「chapter03」› 「send」フォルダ内の「index.html」にアクセス
    （http://localhost/php-lessons/chapter03/send/）
ブラウザでの表示例

RERUN

新しいウインドウで表示する

データの受信 「 get」は、「$_GET」、
「post」は、「$_POST」。

データの受け取りは、送信したフォームの method属性 に合わせて、
$_GETまたは、$_POSTというPHPが予め用意している変数を使う。
このようにPHPが予め用意している変数のことを スーパーグローバル変数と呼ぶ。
スーパーグローバル変数の変数名は、「_」から始まり全て大文字になっている。

データの受け取り
// GET（クエリ情報）の受け取り 
$_GET[name属性の属性値]

// POST（ポストデータ）の受け取り 
$_POST[name属性の属性値]

データを受け取ってみよう。

  1. 「chapter03」 › 「send」フォルダ内の「receive.php」をテキストエディタで開く
  2. h1要素の下に、$_GETで受け取った値を表示
chapter03/send/receive.php
<?php
  // GETの受け取り
  echo 'こんにちは'. $_GET['your_name'] .'さん';
?>
  1. 上書き保存
  2. ブラウザで「chapter03」 › 「send」フォルダ内の「index.html」にアクセスしデータを送信
    （http://localhost/php-lessons/chapter03/send/）
  3. URLにGETパラメータ（入力した内容が）付加されているかを確認

POSTも使ってみよう。

  1. 「chapter03」› 「send」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に form要素 に　method="post"属性 を追加
chapter03/send/index.html
<form action="receive.php" method="post">
  <p><label>お名前： <input type="text" name="your_name"></label></p>
  <p><input type="submit" value="送信"></p>
</form>
  1. 上書き保存
  2. 「chapter03」› 「send」フォルダ内の「receive.php」をテキストエディタで開く
  3. 下記を参考に $_GET での受け取り部分をコメントにし、
    $_POSTで受け取った値を表示
chapter03/send/receive.php
<?php
  // GETの受け取り
  // echo 'こんにちは'. $_GET['your_name'] .'さん';

  // POSTの受け取り
  echo 'こんにちは'. $_POST['your_name'] .'さん';
?>
  1. 上書き保存
  2. ブラウザで「chapter03」› 「send」フォルダ内の「index.html」にアクセスしデータを送信
    （http://localhost/php-lessons/chapter03/send/）

ただし、上記のコードにはXSSという脆弱性がある。

XSS （ Cross （クロス） Site （サイト） Scripting （スクリプティング） ）
他人のサイトに、悪意のあるJavaScriptなどのスクリプトを埋め込む攻撃方法のこと 。

このままでは、下記のコードを入力するときちんとJavaScriptが実行されます。
（Google Chromeなど、一部のブラウザは実行されません。）

<script>alert('XSS');</script>

JavaScriptが実行できるということは、JavaScriptで出来ることはなんでも出来ます。

XSS対策 ユーザーが入力する内容は、
悪意がないとは限らない。

ユーザーが入力した内容はそのまま出力しない。
出力する前に、「<」や、「>」などの文字列を文字参照に変換する必要がある。
PHPでは、htmlspecialchars という関数を使うことで無害化してから出力できる。

htmlspecialchars関数 ・・・ HTMLの特殊文字を文字参照に変換する関数
htmlspecialchars(無害化する文字列, クォートなどの扱い, 文字コード)
                                           省略可

引数の詳細はPHPマニュアルを参照

XSS対策をしてみよう。

  1. 「chapter03」 › 「send」フォルダ内の「receive.php」をテキストエディタで開く
  2. 下記を参考に $_POSTによる受け取り部分をコメントにし、
    htmlspecialchars() 関数を使った$_POSTの出力を追記
chapter03/send/receive.php
<?php
  // GETの受け取り
  // echo 'こんにちは'. $_GET['your_name'] .'さん';

  // POSTの受け取り
  // echo 'こんにちは'. $_POST['your_name'] .'さん';

  // XSS対策
  echo 'こんにちは'. htmlspecialchars( $_POST['your_name'], ENT_QUOTES, 'utf-8' ) .'さん';
?>
  1. 上書き保存
  2. ブラウザで「chapter03」 › 「send」フォルダ内の「index.html」にアクセス
    （http://localhost/php-lessons/chapter03/send/）
  3. HTMLやJavaScriptを送信しても文字列として表示されることを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題 今回の理解度をチェック。

「training」フォルダ内の「index.html」と「receive.php」を開き
下記の問題を解いて下さい。

ブラウザでの完成例

RERUN

新しいウインドウで表示する

「index.html」の問題

    • データの送信先： "receive.php"
    • データの送信方法： "post"
    • ラベル「金額」
      • コントロール部品の種類： "1行分のテキストフィールド"
    • ラベル「消費税」
      • コントロール部品の種類： "ラジオボタン"
      • 選択肢："5%"、"8%"、"10%"
      • コントロール部品の初期値： "8%"
    • 文字列「計算する」

「receive.php」の問題

解答例
chapter03/training/index.html
  <form action="receive.php" method="post">
    <dl>
      <dt><label for="plice">金額</label></dt>
      <dd>
        &yen; <input type="text" name="price" id="plice">
      </dd>
      <dt>消費税</dt>
      <dd>
        <ul>
          <li><label><input type="radio" name="tax" value="1.05"> 5%</label></li>
          <li><label><input type="radio" name="tax" value="1.08" checked> 8%</label></li>
          <li><label><input type="radio" name="tax" value="1.1"> 10%</label></li>
        </ul>
      </dd>
    </dl>
    <p><input type="submit" value="計算する"></p>
  </form>

解答例は全問題のチェックボックスが on になるとご覧いただけます。

chapter03/training/receive.php
<?php
  $result = $_POST['price'] * $_POST['tax'];
?>
  <p>&yen; <?php echo htmlspecialchars( $result, ENT_QUOTES, 'utf-8' ); ?></p>

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめ データの送信はHTMLのみで可能。
受け取ったデータの無害化を忘れずに。

データの受け取りには$_GETや、$_POSTといったスーパーグローバル変数を使う。
ただし画面に出力する際は、必ず無害化すること。

  • get で送信したデータは、$_GETを使う
  • post で送信したデータは、$_POSTを使う
  • 画面に出力する前は、htmlspesialchars関数で無害化する