AjaxとreCAPTCHAを使ったお問い合わせフォーム（前編）
※このページにはプロモーションが含まれています。
WordPressを使ったブログを作ってみて以前に覚えたHTMLとCSSを思い出し、ブログを作る程度はPHPを理解できたので次はJavaScriptです。
すべてを自分で作るのは無理なので、公開されているコードを参考にします。
できるだけセキュリティとスパム対策にも気をつかって、安全性を高められたらと思います。
作りたいお問い合わせフォーム
- 移動させずに1ページだけ
- reCAPTCHAでスパム対策
- 自動返答なし
Ajax
HTMLのformタグはsubmitを押下するとページを移動をいどうする仕様になっています。次のページを作るのが面倒なのでJavaScriptを使うとページを移動させずに、お問い合わせページの書き換えができるらしいです。
そのための技術をAjax（エージャックス）（Asynchronous JavaScript XML）（非同期通信）と呼びます。
reCAPTCHA
reCAPTCHAは人間とBotを識別して、Botによるスパムを減少させます。JavaScriptで記述され、Google社によって開発されています。
現在はv3まで開発されており、使えるのはv2とv3となっています。
v2はチェックを入れるものが主流になっていて、Botの疑いが強いと画像による認証が加えられます。v3はアクセスの振る舞いを分析してBotの判断をするので、人間による操作は不要になっています。
メールによる自動返答
多くの問い合わせページには、記入後に確認画面が表示され確認を終えると完了画面が表示されます。
同時に管理者と投稿者にメールが自動で送られますが、投稿者にメールを送る機能が悪用されスパムを撒き散らすことに利用される恐れがあるようです。
今回は管理者だけにメールを送ることで、迷惑を掛けないようにします。
Amazon セールとイベント
冬の味覚ポイント高還元カニ特集 【期間限定】ダブルポイント祭り試行錯誤を重ねる
ここまで調べてみて初めてJavaScriptを扱うに者には難しい課題だと分かりました。
1つのシステムを理解するのも大変なのに、2つを組み合わせるのは難易度が高すぎました。
Ajaxを使う場合、reCAPTCHAを導入したページ移動する場合は別々に作ることができたのですが、2つを一緒にすることはできませんでした。
自力では作れないので答えを探す
学習の効果はあった点は良かったのですが、どうすれば思ったようなものができるのか知りたくて探してみることにしました。
reCAPTCHA v2を使ったものが多くあり、v3がなかなか見つからなかったのですが、ぴったりのものを見つけることができました。
コードを公開してくれるだけでなくファイルを用意してくれており、ありがたく思います。
How To Add reCAPTCHA v3 to PHP Form and Submit Using Ajax – 1stWebDesigner
コードを見てみるとなるほどこう書くのかと思えたのは試行錯誤した結果少しは学習ができたのでしょう。
ファイルをダウンロードするとファイルが3つあり、1つはスタイルシート、1つはお問い合わせフォームのテンプレート用のHTMLファイル、1つはメール送信用のphpファイルです。
コードを使用するならば固定ページのpage.phpでテンプレートファイルを作り、そこに展開したindex.htmlの内容を貼り付けます。
次にお問い合わせ用のテンプレートファイルと同じディレクトリにcontent.phpを配置します。
以下の説明のためにお問い合わせ用のテンプレートファイルをテンプレファイルとします。
できるだけ実用化したい
上のコードにメール送信機能を追加すればお問い合わせフォームは使えるようになりますが、このままだと多くの不都合が起こる可能性があるようです。
他の人に迷惑を掛けず、スパムメールを受け取らず実用化に近づけたいと思います。
ここからは素人がウェブを調べてまとめただけのものです。間違った情報が含まれている可能性があります。間違った情報に基づきフォームを設置するとスパムの踏み台に利用される恐れがあります。その旨ご注意ください。
CSRF
CSRF（クロスサイトリクエストフォージェリ）対策はお問い合わせフォームの場合、メール送信システムの仕組みを外部から操作し、管理者が意図しないメールを送信することです。
知らないうちにスパムメールの踏み台に利用される可能性をできるだけ小さくします。
お問い合わせフォームで入力した際にトークンを発行し、メール送信システムに送り、元のトークンと送られたトークンが同じ場合のみメールを送信します。
当然トークンが空の場合はアクセスを拒否する必要があります。
テンプレファイルに
<?php
session_start();
$token = bin2hex(random_bytes(32));
$_SESSION['key'] = $token;
?>テンプレファイルのformタグの中に下のコードを記入することでsubmitする時にトークンが生成されます。
<input type="hidden" name="token" value="<?= $token ?>"> content.phpに下のコードを加えるとトークンが空の場合に処理を終わらせます。
<?php
session_start();
if(!isset($_POST['token'])){
echo'何か問題が発生しました。';
exit;
}次のコードをcontent.php加えトークンとキーが一致しない場合は処理を止めます。
if($_SESSION['key']!==$_POST['token']){
}XSS
XSS（クロスサイトスクリプティング）は入力欄にphpやJavaScriptを入力し実行させること。
コードの実行に必要な「”」などの特殊文字をhtmlspecialchars関数を使って文字列に変換します。
content.phpに下のコードを追加します
$name=htmlspecialchars($_POST['name']);
$mail=htmlspecialchars($_POST['mail']);
$content=htmlspecialchars($_POST['content']);クリックジャッキング
お問い合わせフォームに必要事項を記入して送信ボタンを押したと思ったら、高額な商品を購入させられていたというのクリックジャッキングと言うそうです。
送信ボタンの上に透明な別のボタンをかぶせ商品の購入以外にも、よきせぬ操作を実行させられます。
テンプレファイルとcontent.phpの両方に下のコードを記入します。
<? php header('X-Frame-Options: DENY');?>メールヘッダーインジェクション
メールタイトルに改行コードを使用して返信用のメールアドレスのヘッダーを改ざんする行為です。
お問い合わせ内容に記入された名前・メールアドレス。内容などすべてを本文に記載することでヘッダーの改ざんを防ぎます。
後編に続きます。メール発送方法・Gmailにメールを着信させる方法・バリデーションの色々についてです。
最後までお読みくださり、誠にありがとうございます。
週間アクセスランキング
このブログを書いている人
ほんだ
数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。