AjaxとreCAPTCHAを使ったお問い合わせフォーム（後編）
※このページにはプロモーションが含まれています。
JavaScriptを学習するためのお問い合わせフォームを作ろうと思いました。前回は自分で作るろうとしたものの成功せず、動くコードを探してセキュリティ対策について調べました。
AjaxとreCAPTCHAについて
確認画面と完了画面を別のページで表示させるお問い合わせフォームではなく、1ページで終わらせるために使うのがAjaxです。AjaxはJavaScriptを使うので勉強に良いのではと考えました。
reCAPTCHAも同じくJavaScriptを使っていて、人かどうかを判断してくれます。v2ではチェックを入れたり横断歩道の場所をクリックしたりしますがv3だと人はアクションを取る必要がありません。
Amazon セールとイベント
冬の味覚ポイント高還元カニ特集 【期間限定】ダブルポイント祭りバリデーションという言葉を覚える
お問い合わせフォームからメールが来ても、メールアドレスを記入するのを忘れていて返信ができなかったり、英語だけのスパムが山ほど届いたりすると困ります。
お問い合わせフォームの場合は、フォームに入力された情報をふるいにかけて、フォームとして機能させることをバリデーションと言うそうです。
導入してみたバリデーションの条件は以下のとおりです。
必須の入力欄に未入力がないか
if ( $_POST['name'] = "" && $_POST['mail']= "" && $_POST['content']= "" ) {}メールアドレスの形式があっているか
if ( !preg_match( '/^[0-9a-z_.\/?-]+@([0-9a-z-]+\.)+[0-9a-z-]+$/ ', $email ) ) {}本文に日本語が含まれているか
if ( $message !== '' && !preg_match( '/[ぁ-ん]/u ', $message ) ) {}最後の日本語を含まない場合の判定はreCAPTCHAを使うことで不要だと思うのですが、念の為に入れてみました。
メールヘッダーとGmail
バグ取りをしてからCSSを追加し、テスト用のサイトで動かしたところ、上手く動作しているように見え、送信しましたと表示されるにも関わらず、メールが届きません。
バグのせいだと思い試行錯誤したのですが、正解は別のところにありました。
メールの送付先をGmailにしていたのですが、Gmailはヘッダーの情報が少ないと信頼性の低いアドレスからの送信とみなし、メールの受取を拒否するようです。
下のように情報を増やすことで受信が可能となりました。
$header = [
'MIME-Version'=>'1.0',
'Content-Transfer-Encoding'=>'7bit',
'Content-Type'=>'text/plain; UTF-8',
'Return-Path'=>'xxxx@yyyy.com>',
'From'=>'yyyy.com <xxxx@yyyy.com>',
'Sender'=>'yyyy.com <xxxx@yyyy.com>',
'Reply-To'=>'xxxx@yyyy.com',
'Organization'=>'OrganizationName',
'X-Sender'=>'xxxx@yyyy.com',
'X-Mailer'=>'Postfix/2.10.1',
'X-Priority'=>'3'
]メールアドレスはWordPressに登録しているものでないと偽装メールとみなされ、やはり届くことはないようです。
今回のお問い合わせフォームの作成でJavaScript入口程度が分かりました。また、不完全なメールフォームは危険だと言うことも知ることができました。
前編で紹介したコードではreCAPTCHAはお問い合わせフォームのページにしか適応されませんが、Google社の説明によるとサイト全体に適応することで本来の力が発揮されるようです。
ウェブページを作るにはセキュリティの知識が必要なことを知ったのが、一番の収穫だったのかもしれません。
最後までお読みくださり、誠にありがとうございます。
週間アクセスランキング
このブログを書いている人
ほんだ
数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。