メインコンテンツまでスキップ

フォーム & バリデーション

アプローチ方法（JavaScript + PHP使用）​

目標: クライアント側バリデーション機能（JavaScript）を持つフォームを構築し、PHPMailer（SMTP）を使用してセキュアなメール送信処理を実装する。

リソース​

ソース構造​

/form-training/
│
├── index.php
├── confirm.php
├── thanks.php
├── sendmail.php
├── /assets/
│   ├── style.css
│   └── validate.js
└── /vendor/

処理フロー​

index.php → (validate.js) → confirm.php → sendmail.php → thanks.php

実装要件​

  1. サンプルデザインに従ってindex.phpでフォームUIを構築する
  2. ComposerでPHPMailerライブラリをインストールする
  3. form action、form methodの機能について学習する
  4. POSTメソッドでフォームを送信する（絶対にGETを使用しない）
  5. JavaScript でバリデーションを構築する（フォーム送信前のチェック）
  6. バリデーションが有効な場合、confirm.phpにリダイレクトし、ユーザーが入力した全ての情報を再表示する（レイアウトは自作）
  7. confirm.phpページで、ユーザーが送信を確認した際、sendmail.phpでメール送信処理を実行する
  8. メール送信が成功した場合、thanks.phpにリダイレクトする
  9. メール送信が失敗した場合、入力済みデータを保持する（フォームをクリアしない）
  10. PHPMailerのSMTP設定で実際のアカウントを使用してメールを送信する
  11. 送信されるメール内容にフォームの全データフィールドが含まれていることを確認する

セキュリティ設定​

1. CSRFトークン​

偽装リクエスト（Cross-Site Request Forgery）を防ぐためのトークンを生成・検証する。

2. サーバーサイドバリデーション​

メール送信前にconfirm.phpでPHPを使用して全データを再検証する（ユーザーがJavaScriptをバイパスした場合に備える）。

3. ハニーポットフィールド​

自動フォーム送信ボットを検出するための非表示入力フィールドを追加する。

4. タイムトラップ​

フォーム入力開始時間を記録し、送信者が有効かどうかを判定する（ボットの高速送信を防ぐ）。

5. 出力データのエスケープとエンコード​

HTML に表示されるすべてのユーザーデータ（confirm.php、thanks.php、メールなど）はhtmlspecialchars()で処理する必要がある。

6. reCAPTCHA設定​

Google reCAPTCHAを統合して自動フォーム送信ボットを防ぐ。