未経験からのITエンジニア学習ブログ

主にIT系のブログを書きます。

PHP　学び 問い合わせフォームの作成　part4

バリデーションの記述方法

全体コード

【input.php】

<?php


session_start(); //←この設定でsessionを使うことができる


require 'validation.php';



// クリックジャッキング対策
header('X-FRAME-OPTIONS:DENY');


// your_nameが？の後に入っていない場合、
Noticeのエラー文が出てしまうので、それを消す
if(!empty($_POST)){
// GET(POST)の中身を見る方法
echo '<pre>';
var_dump($_POST); //←にキーを入力すると中身が見られる
echo '</pre>';
// $_で書いている変数をスーパーグローバル変数と呼ぶ
// phpの場合は9種類ある
// 連想配列になっている
// 今回の場合、name="your_name"がキーになっていて
// 入力された値がvalue="送信"
}


//XSS(Cross-Site Scripting)対策
function h($str)
{
return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');
}


// 入力、確認、完了画面の作成
// 3つを分ける場合→input.php, confirm.php, thanks.php
// input.php←今回は一つのファイルで全てを入れる
// CSRF 偽物のinput.php 悪意のあるページにアクセスするとことになる。
// 自分が意図しない操作を勝手に行なってしまう。


$pageFlag = 0;
$errors = validation($_POST);



if(!empty($_POST['btn_confirm']) && empty($errors)){
$pageFlag = 1;
}
if(!empty($_POST['btn_submit'])){
$pageFlag = 2;
}


?>


<!DOCTYPE html>
<meta charser="utf-8">
<head></head>
<body>


<?php if($pageFlag === 1) : ?>
<?php if($_POST['csrf'] === $_SESSION['csrfToken']) :
//↑合言葉(トークンが合っているかの判定) ?>
<form method="POST" action="input.php">
氏名
<?php echo h($_POST['your_name']) ;?>
<br>
メールアドレス
<?php echo h($_POST['email']) ;?>
<br>
ホームページ
<?php echo h($_POST['url']) ;?>
<br>
性別
<?php
if($_POST['gender'] === '0'){ echo '男性'; }
if($_POST['gender'] === '1'){ echo '女性'; }
?>
<br>
年齢
<?php
if($_POST['age'] === '1'){ echo '〜19歳'; }
if($_POST['age'] === '2'){ echo '20歳〜29歳'; }
if($_POST['age'] === '3'){ echo '30歳〜39歳'; }
if($_POST['age'] === '4'){ echo '40歳〜49歳'; }
if($_POST['age'] === '5'){ echo '50歳〜59歳'; }
if($_POST['age'] === '6'){ echo '60歳〜'; }
?>
<br>
お問い合わせ内容
<?php echo h($_POST['contact']) ;?>
<br>


<input type="submit" name="back" value="戻る">
<input type="submit" name="btn_submit" value="送信する">
<input type="hidden" name="your_name"
value="<?php echo h($_POST['your_name']) ;?>">
<input type="hidden" name="email"
value="<?php echo h($_POST['email']) ;?>">
<input type="hidden" name="url"
value="<?php echo h($_POST['url']) ;?>">
<input type="hidden" name="gender"
value="<?php echo h($_POST['gender']) ;?>">
<input type="hidden" name="age"
value="<?php echo h($_POST['age']) ;?>">
<input type="hidden" name="contact"
value="<?php echo h($_POST['contact']) ;?>">
<input type="hidden" name="csrf"
value="<?php echo h($_POST['csrf']) ;?>">
</form>
<?php endif; ?>
<?php endif; ?>



<?php if($pageFlag === 2) : ?>
<?php if($_POST['csrf'] === $_SESSION['csrfToken']) :?>
送信が完了しました。


<?php unset($_SESSION['csrfToken']);
//↑合言葉(トークン)の削除 ?>
<?php endif; ?>
<?php endif; ?>



<?php if($pageFlag === 0) : ?>
<?php
if(!isset($_SESSION[('csrfToken')])){
//issetは中身があるか判定する
$csrfToken = bin2hex(random_bytes(32));
//引数の数字は24でもOK。bin2hexを入れることで
16進数に変換できうまく表記ができるようになる。
$_SESSION['csrfToken'] = $csrfToken;
}


$token = $_SESSION['csrfToken'];
?>


<?php if(!empty($errors) && !empty($_POST['btn_confirm'])) : ?>
<?php echo '<ul>' ;?>
<?php
foreach($errors as $error) {
echo '<li>' . $error . '</li>' ;
}
?>
<?php echo '</ul>' ;?>
<?php endif ;?>


<form method="POST" action="input.php">
氏名
<input type="text" name="your_name"
value="<?php if(!empty($_POST['your_name']))
{echo h($_POST['your_name']) ;} ?>">
<br>
メールアドレス
<input type="email" name="email"
value="<?php if(!empty($_POST['email']))
{echo h($_POST['email']) ;} ?>">
<br>
ホームページ
<input type="url" name="url" v
alue="<?php if(!empty($_POST['url']))
{echo h($_POST['url']) ;}?>">
<br>
性別
<input type="radio" name="gender" value="0"
<?php if(isset($_POST['gender'])
&& $_POST['gender'] === '0' )
{ echo 'checked'; } ?>>男性
<input type="radio" name="gender" value="1"
<?php if(isset($_POST['gender'])
&& $_POST['gender'] === '1' )
{ echo 'checked'; } ?>>女性
<br>
年齢
<select name="age">
<option value="">選択してください</option>
<option value="1" selected>〜19歳</option>
<option value="2">20歳〜29歳</option>
<option value="3">30歳〜39歳</option>
<option value="4">40歳〜49歳</option>
<option value="5">50歳〜59歳</option>
<option value="6">60歳〜</option>
</select>
<br>
お問い合わせ内容
<textarea name="contact">
<?php if(!empty($_POST['contact']))
{echo h($_POST['contact']) ;} ?>
</textarea>
<br>
<input type='checkbox' name="caution"
value="1">注意事項のチェックする
<br>


<input type="submit" name="btn_confirm" value="確認する">
<input type="hidden" name="csrf"
value="<?php echo $token; ?>">


</form>
<?php endif; ?>



<body>
</html>

 

 

今回のバリデーション設定のために新たにvalidation.phpファイルを作成

【validation.php】

 
<?php

function validation($request){
// 変数には問い合わせフォームから送られる
// $POSTの連想配列が入ってくる
$errors = ;

if(empty($request['your_name'])
|| 20 < mb_strlen($request['your_name'])){
$errors = '「氏名」は必須です。20文字以内で入力してください。';
}

if(empty($request['email'])
|| !filter_var($request['email'], FILTER_VALIDATE_EMAIL)){
$errors = '「メールアドレス」は必須です。正しい形式で入力してください。';
}

if(!empty($request['url'])){
if(!filter_var($request['url'], FILTER_VALIDATE_URL)){
$errors = '「ホームページは」は正しい形式で入力してください。';
}
}

if(!isset($request['gender'])){
$errors = '「性別」は必須です。';
}

if(empty($request['age']) || 6 < $request['age']){
$errors = '「年齢」は必須です。';
}

if(empty($request['contact'])
|| 200 < mb_strlen($request['contact'])){
$errors = '「お問い合わせ内容」は必須です。200文字以内で入力してください。';
}

if(empty($request['caution'])){
$errors = '「注意事項」をご確認ください。';
}
return $errors;
}
?>

 

【追加(変更)したコード】

<?php

session_start(); //←この設定でsessionを使うことができる

require 'validation.php';

requireでvalidation.phpを呼び出せるように設定

 

 

$pageFlag = 0;
$errors = validation($_POST);

if(!empty($_POST['btn_confirm']) && empty($errors)){
$pageFlag = 1;
}
if(!empty($_POST['btn_submit'])){
$pageFlag = 2;
}

if部分を追加し、確認画面に行くには確認ボタンのリクエストかつ、エラーが空だったら遷移できるように設定

 

 

<?php if(!empty($errors) && !empty($_POST['btn_confirm'])) : ?>
<?php echo '<ul>' ;?>
<?php
foreach($errors as $error) {
echo '<li>' . $error . '</li>' ;
}
?>
<?php echo '</ul>' ;?>
<?php endif ;?>

エラー文を表示できるように設定。

if文を使い、エラーが入っていて、かつbtn_confirmの中身も入っている場合エラー文を表示できるように設定。

 

filter_varについて

if(empty($request['email']) ||
!filter_var($request['email'], FILTER_VALIDATE_EMAIL)){
$errors = '「メールアドレス」は必須です。正しい形式で入力してください。';
}

if(!empty($request['url'])){
if(!filter_var($request['url'], FILTER_VALIDATE_URL)){
$errors[] = '「ホームページは」は正しい形式で入力してください。';
}
}

詳しくはphp公式サイトで確認。PHP: filter_var - Manual

PHP: filter_var - Manualより引用

email、ホームページそれぞれの形式があっているかを確認する関数。

emailならFILTER_VALIDATE_EMAIL

ホームページならFILTER_VALIDATE_URL

 

そして以下のようなページになればOK

何も入力がない状態で確認を押す。

エラー文が表示される(ホームページに関しては空でもOKなのでバリデーションに引っかからない)

今日はバリデーションの記述でした!

 

 

 

 

 

 

 

PHP　学び 問い合わせフォームの作成　part3

HTML学び

htmlのtextareaにはvalue属性がなく、テキストエリアタグの中に書いたものがvalueになる

お問い合わせ内容
<textarea name="contact">
<?php if(!empty($_POST['contact'])){echo h($_POST['contact']) ;} ?>
</textarea>

 

htmlのcheckboxのnameの後に「[ ]」をつけておくと、複数のチェック項目がある場合配列として表示できる。

<br>
<input type='checkbox' name="caution[ ]" value="1">注意事項のチェックする
<br>

↑はてなブログで[ ]を空白入れずに書くと表示されなかったので空白を入れているが、本来は入れなくてOK。

 

php学び

お問い合わせフォームの入力画面で、情報として0なら男性、1なら女性とした場合、値としては0か1になり、中身を見た時にすぐには分からない。なので、確認画面ではif文使い、男性、女性という表示をさせる(年齢も同じ要領)。

入力画面のコード

性別
<input type="radio" name="gender" value="0">男性
<input type="radio" name="gender" value="1">女性
<br>
年齢
<select name="age">
<option value="">選択してください</option>
<option value="1">〜19歳</option>
<option value="2">20歳〜29歳</option>
<option value="3">30歳〜39歳</option>
<option value="4">40歳〜49歳</option>
<option value="5">50歳〜59歳</option>
<option value="6">60歳〜</option>
</select>

 

確認画面のコード

性別
<?php
if($_POST['gender'] === '0'){ echo '男性'; }
if($_POST['gender'] === '1'){ echo '女性'; }
?>
<br>
年齢
<?php
if($_POST['age'] === '1'){ echo '〜19歳'; }
if($_POST['age'] === '2'){ echo '20歳〜29歳'; }
if($_POST['age'] === '3'){ echo '30歳〜39歳'; }
if($_POST['age'] === '4'){ echo '40歳〜49歳'; }
if($_POST['age'] === '5'){ echo '50歳〜59歳'; }
if($_POST['age'] === '6'){ echo '60歳〜'; }
?>

確認画面のinputの内容も追加

<input type="submit" name="back" value="戻る">
<input type="submit" name="btn_submit" value="送信する">
<input type="hidden" name="your_name"
value="<?php echo h($_POST['your_name']) ;?>">
<input type="hidden" name="email"
value="<?php echo h($_POST['email']) ;?>">
<input type="hidden" name="url"
value="<?php echo h($_POST['url']) ;?>">
<input type="hidden" name="gender"
value="<?php echo h($_POST['gender']) ;?>">
<input type="hidden" name="age"
value="<?php echo h($_POST['age']) ;?>">
<input type="hidden" name="contact"
value="<?php echo h($_POST['contact']) ;?>">
<input type="hidden" name="csrf"
value="<?php echo h($_POST['csrf']) ;?>">
</form>

性別、年齢の表示が数字だけではなく文字表記されていればOK。

 

最初からラジオボタンや選択項目にチェックを入れておきたい場合

入力画面

性別
<input type="radio" name="gender" value="0" checked>男性
<input type="radio" name="gender" value="1">女性
<br>
年齢
<select name="age">
<option value="">選択してください</option>
<option value="1" selected>〜19歳</option>
<option value="2">20歳〜29歳</option>
<option value="3">30歳〜39歳</option>
<option value="4">40歳〜49歳</option>
<option value="5">50歳〜59歳</option>
<option value="6">60歳〜</option>
</select>

性別(input)の場合、valueの後ろにchecked。

年齢(select)の場合、valueの後ろにselected。

下記のようになっていればOK。

↑の応用

入力画面で性別にチェックを入れて確認画面に進み、その後戻るボタンを押して入力画面に戻った際、チェックが入力した時の情報で反映される方法。

入力画面

性別
<input type="radio" name="gender" value="0"
<?php if(isset($_POST['gender']) && $_POST['gender'] === '0' )
{ echo 'checked'; } ?>>男性
<input type="radio" name="gender" value="1"
<?php if(isset($_POST['gender']) && $_POST['gender'] === '1' )
{ echo 'checked'; } ?>>女性
<br>

if文を使い男性か女性かでチェックをどちらに入れるか判定する。

なお、emptyは0もtrueとしてしまうので、isset(空ではない状態ならtrue)をこの場合用いる。

女性でチェックを入れた後、戻るを押して女性のままチェックが残っていればOK

 

 

PHP　学び 問い合わせフォームの作成　part2

セキュリティ対策(XSS,クリックジャッキング,CSRF)

・XSS

クロスサイトスクリプティング（XSS）とは、Webサイトの脆弱性を利用し、記述言語であるHTMLに悪質なスクリプトを埋め込む攻撃です。クロスサイトスクリプティングの英語表記「Cross Site Scripting」の略称として「XSS」と表記する場合もあります。

アンケートサイトやサイト内検索、ブログ、掲示板などユーザーからの入力内容をもとにWebページを生成するサイトや、FacebookやTwitterのようなWebアプリケーションはクロスサイトスクリプティングの対象になりやすいです。サイトに設置されたフォームにユーザーが情報を入力・送信する際に、埋められた悪質なHTMLスクリプトが実行され、入力された情報に加えCookie情報なども攻撃者に送られます。

クロスサイトスクリプティング（XSS）とは？わかりやすく解説 | クラウド型WAF 攻撃遮断くん より引用

 

対策

htmlspecialcharsを使いサニタイズ(消毒)を行う

//XSS(Cross-Site Scripting)対策
function h($str)
{
return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');
}

 

<?php if($pageFlag === 1) : ?>
<form method="POST" action="input.php">
氏名
<?php echo h($_POST['your_name']) ;?>
<br>
メールアドレス
<?php echo h($_POST['email']) ;?>
<br>

 

htmlspecialcharsを設定することで、<>などの文字が変換されるので、JavaScriptなどのコードを無効化することができる。

PHP: htmlspecialchars - Manual より引用

 

 

・クリックジャッキング

クリックジャッキングとは、Webブラウザを悪用して、ユーザーに不利益をもたらすセキュリティ上の攻撃手法の一つです。

具体的な特徴としては、ボタンやリンクなどを透明で見えない状態にして、通常のWebページの上にかぶせてしまうというもの。最近はこういった攻撃の一つ一つが巧妙化し、私たちコンピュータの利用者や企業、官公庁などにとって、脅威となっています。

Webブラウザはインターネットの閲覧に必ず使うものであり、利用者は世界中の老若男女となり非常に多くなります。そのため被害が発生した場合の影響が非常に大きいものとなるため、悪意を持つ者にとっては格好の標的となっています。

最も簡単なクリックジャッキングの手法として、下記のようにiframeで表示させたページを透過させるような形で、悪意あるサイトを見えないようにして、クリックさせる手口があります。
クリックジャッキング

このように透明にしたサイトを重ねて表示させて、知らないうちにクリックさせるような手口になります。

具体的にクリックジャッキングに引っかかってしまうと、下記のようなことが起こってしまいます。

このようなことを起こさせ、マルウェアの感染によって、情報を搾取したりパソコンなどの端末を乗っ取るなどの攻撃を行います。

そのほかにも、例えばウィンドウ無限表示型と呼ばれるブラウザでWebページを開くと、無限にウィンドウが開き続けるものや、CD-ROMアタックのようなCD-ROMドライブの開閉を無限に行わせてハードウェアの損傷を招くもの、JavaScriptループ型のようにJavaScriptを無限ループとして実行させることでCPUやメモリリソースを食いつぶしてパソコンの動作を非常に遅くするものなどがあります。

 

クリックジャッキングとは？その攻撃の概要と対策方法を解説｜サイバーセキュリティ.com から引用

 

 

対策

header(X-FRAME-OPTIONS: DENY)を使いサニタイズ(消毒)を行う

 

PHPファイルに直接記述する方法。
header関数でheader(X-FRAME-OPTIONS: DENY)を指定してHTTPヘッダーに送る。そうすると重ねて表示することができなくなる。

 

// クリックジャッキング対策
header('X-FRAME-OPTIONS:DENY');

 

このようにGoogleChromeなら検証→Network→Headresに表示されていたらOK。

 

 

・CSRF(シーサーフ)

CSRF（Cross-Site Request Forgeries、クロスサイトリクエストフォージェリーズ）は、Webシステムを悪用したサイバー攻撃の一種です。

CSRFの手口は、ユーザーが悪意のあるURLにアクセスしてしまった場合に、意図しないリクエストを特定のWebサービスに送られてしまうというものです。Webサイトのリンクやメールに記載されたリンクをクリックして、URLのアドレスにアクセスすることで特定のWebサービスへのリクエストが送られてしまいます。

 

特定のWebサービスへのリクエストは、Webサービスによって内容は変わるものの、Webサービスの設定変更や値の入力、操作の実行などに繋がります。また、WebサービスがSNSや掲示板の場合には、悪意のあるURLに設定した内容を投稿してしまうことになります。

 

ユーザーの意図しない情報・リクエストが送信されてしまうためリクエスト強要とも呼ばれます。ユーザー側は何が起きたのか気が付くことはなく、後から被害にあったことに気が付くのもその特徴です。

 

CSRFによる攻撃では、いくつかのパターンが確認されています。

 

一つはサービスにログインした状態のユーザーを狙った攻撃です。ログイン中の状態で、悪意あるURLにアクセスしてしまうと、サービスに対して任意の操作のリクエストを行うことができる場合があります。

例えばオンラインバンキングのサービスにログインした状態で、送金の操作を行うCSRFが行われ、それがサービス側で受理されてしまうことを想定するとその恐ろしさが分かります。

サービスにおける設定の変更（例えばパスワードの変更）のリクエストを行わせ、そこから攻撃を拡げるパターンも起き得るでしょう。

 

また、別の形のCSRFを利用した攻撃として、ユーザーの意図しない情報発信を行わせるものもあります。SNSや掲示板などに対するリクエストをCSRFにより行われることで、ユーザーの意図しない投稿が行われてしまいます。投稿の内容が問題のあるものであれば、ユーザーの被害に直結してしまいます。上記のログイン状態とも組み合わせて利用されることが想定されます。

 

CSRFの恐ろしいところは、リクエストを強要させられてしまうことです。サイバー犯罪者は、ユーザーのログインしている状態やサービスを利用しているかどうかの有無を区別せず、広い範囲で罠を作って置きます。複数の種類のオンラインサービスに対しての罠を作っておくことで、被害に遭うユーザーを拡げる手口がとられています。

 

また、罠が設置してあるWebページへの誘導では、不安を煽るような文言や言葉巧みな文章が利用されます。ユーザーを騙し、心理的不安にさせることで、リクエスト強要に誘導する傾向が見られます。

CSRF（クロスサイトリクエストフォージェリーズ）とは？被害と対策も | セキュリティ対策 | CyberSecurityTIMES から引用

 

 

対策

本来の正しいページからの情報なのかを見分けてから処理をする。

$_SESSIONを使った合言葉(トークン)のやり取りをする

合言葉の設定はrandom_bytesを使う(PHP: random_bytes - Manual 参照)

random_bytes — 暗号学的にセキュアな、ランダムなバイト列を生成する

 

関数の設定

<?php

session_start(); //←この設定でsessionを使うことができる

 

入力画面の設定

<?php if($pageFlag === 0) : ?>
<?php
if(!isset($_SESSION[('csrfToken')])){
//issetは中身があるか判定する
$csrfToken = bin2hex(random_bytes(32));
//bin2hexを入れることで16進数に変換できうまく表記ができるようになる。
$_SESSION['csrfToken'] = $csrfToken;
}

$token = $_SESSION['csrfToken'];
?>

<form method="POST" action="input.php">
氏名
<input type="text" name="your_name"
value="<?php if(!empty($_POST['your_name']))
{echo h($_POST['your_name']) ;} ?>">
<br>
メールアドレス
<input type="email" name="email"
value="<?php if(!empty($_POST['email']))
{echo h($_POST['email']) ;} ?>">
<br>
<input type="submit" name="btn_confirm" value="確認する">
<input type="hidden" name="csrf" value="<?php echo $token; ?>">

 

確認画面の設定

<?php if($pageFlag === 1) : ?>
<?php if($_POST['csrf'] === $_SESSION['csrfToken']) :
//↑合言葉(トークンが合っているかの判定) ?>
<form method="POST" action="input.php">
氏名
<?php echo h($_POST['your_name']) ;?>
<br>
メールアドレス
<?php echo h($_POST['email']) ;?>
<br>
<input type="submit" name="back" value="戻る">
<input type="submit" name="btn_submit" value="送信する">
<input type="hidden" name="your_name"
value="<?php echo h($_POST['your_name']) ;?>">
<input type="hidden" name="email"
value="<?php echo h($_POST['email']) ;?>">
<input type="hidden" name="csrf"
value="<?php echo h($_POST['csrf']) ;?>">
</form>
<?php endif; ?>
<?php endif; ?>

 

送信完了画面

<?php if($pageFlag === 2) : ?>
<?php if($_POST['csrf'] === $_SESSION['csrfToken']) :?>
送信が完了しました。

<?php unset($_SESSION['csrfToken']);
//↑合言葉(トークン)の削除 ?>
<?php endif; ?>
<?php endif; ?>

 

 

問い合わせフォーム全コード

<?php

session_start(); //←この設定でsessionを使うことができる

// クリックジャッキング対策
header('X-FRAME-OPTIONS:DENY');

// your_nameが？の後に入っていない場合、
Noticeのエラー文が出てしまうので、それを消す
if(!empty($_SESSION)){
// GET(POST)の中身を見る方法
echo '<pre>';
var_dump($_SESSION); //←にキーを入力すると中身が見られる
echo '</pre>';
// $_で書いている変数をスーパーグローバル変数と呼ぶ
// phpの場合は9種類ある
// 連想配列になっている
// 今回の場合、name="your_name"がキーになっていて
// 入力された値がvalue="送信"
}

//XSS(Cross-Site Scripting)対策
function h($str)
{
return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');
}


// 解説
// inputに </input>と書いているのですが、
// 実は </input>は不要になります。
// 当時、クセで書いていたと思うのですが、
先の講座では不要と解説させていただいております。
// チェックボックスで複数選択できるようなフォームの場合に、
// 配列として受け取る場合はnameにをつける形になります。
// []をつけないと1つの値しかとれなかったと思います。


// 入力、確認、完了画面の作成
// 3つを分ける場合→input.php, confirm.php, thanks.php
// input.php←今回は一つのファイルで全てを入れる
// CSRF 偽物のinput.php 悪意のあるページにアクセスするとことになる。
// 自分が意図しない操作を勝手に行なってしまう。

$pageFlag = 0;

if(!empty($_POST['btn_confirm'])){
$pageFlag = 1;
}
if(!empty($_POST['btn_submit'])){
$pageFlag = 2;
}

?>

<!DOCTYPE html>
<meta charser="utf-8">
<head></head>
<body>

<?php if($pageFlag === 1) : ?>
<?php if($_POST['csrf'] === $_SESSION['csrfToken']) :
//↑合言葉(トークンが合っているかの判定) ?>
<form method="POST" action="input.php">
氏名
<?php echo h($_POST['your_name']) ;?>
<br>
メールアドレス
<?php echo h($_POST['email']) ;?>
<br>
<input type="submit" name="back" value="戻る">
<input type="submit" name="btn_submit" value="送信する">
<input type="hidden" name="your_name"
value="<?php echo h($_POST['your_name']) ;?>">
<input type="hidden" name="email"
value="<?php echo h($_POST['email']) ;?>">
<input type="hidden" name="csrf"
value="<?php echo h($_POST['csrf']) ;?>">
</form>
<?php endif; ?>
<?php endif; ?>


<?php if($pageFlag === 2) : ?>
<?php if($_POST['csrf'] === $_SESSION['csrfToken']) :?>
送信が完了しました。

<?php unset($_SESSION['csrfToken']);
//↑合言葉(トークン)の削除 ?>
<?php endif; ?>
<?php endif; ?>


<?php if($pageFlag === 0) : ?>
<?php
if(!isset($_SESSION[('csrfToken')])){
//issetは中身があるか判定する
$csrfToken = bin2hex(random_bytes(32));
//引数の数字は24でもOK。
bin2hexを入れることで16進数に変換できうまく表記ができるようになる。
$_SESSION['csrfToken'] = $csrfToken;
}

$token = $_SESSION['csrfToken'];
?>

<form method="POST" action="input.php">
氏名
<input type="text" name="your_name"
value="<?php if(!empty($_POST['your_name']))
{echo h($_POST['your_name']) ;} ?>">
<br>
メールアドレス
<input type="email" name="email"
value="<?php if(!empty($_POST['email']))
{echo h($_POST['email']) ;} ?>">
<br>
<input type="submit" name="btn_confirm" value="確認する">
<input type="hidden" name="csrf" value="<?php echo $token; ?>">

</form>
<?php endif; ?>


<body>
</html>

 

ただ作って終わりじゃなくてその後のリスクのことも考えて作るのが大切ですね。

PHP　学び 問い合わせフォームの作成　part1

備忘録として残します。

今回はPHPを使った問い合わせフォームを作りました。

コメントアウトでメモ代わりにしているところもあり読みづらいですが、

入力画面、確認画面、送信完了画面それぞれが出るようになっています。

<?php

// your_nameが？の後に入っていない場合、Noticeのエラー文が出てしまうので、それを消す
if(!empty($_POST)){
// GET(POST)の中身を見る方法
echo '<pre>';
var_dump($_POST); //←にキーを入力すると中身が見られる
echo '</pre>';
// $_で書いている変数をスーパーグローバル変数と呼ぶ
// phpの場合は9種類ある
// 連想配列になっている
// 今回の場合、name="your_name"がキーになっていて
// 入力された値がvalue="送信"
}

// 解説
// inputに </input>と書いているのですが、
// 実は </input>は不要になります。
// 当時、クセで書いていたと思うのですが、先の講座では不要と解説させていただいております。
// チェックボックスで複数選択できるようなフォームの場合に、
// 配列として受け取る場合はnameにをつける形になります。
// []をつけないと1つの値しかとれなかったと思います。


// 入力、確認、完了画面の作成
// 3つを分ける場合→input.php, confirm.php, thanks.php
// input.php←今回は一つのファイルで全てを入れる

$pageFlag = 0;

if(!empty($_POST['btn_confirm'])){
$pageFlag = 1;
}
if(!empty($_POST['btn_submit'])){
$pageFlag = 2;
}

?>

<!DOCTYPE html>
<meta charser="utf-8">
<head></head>
<body>

<?php if($pageFlag === 1) : ?>
<form method="POST" action="input.php">
氏名
<?php echo $_POST['your_name'] ;?>
<br>
メールアドレス
<?php echo $_POST['email'] ;?>
<br>
<input type="submit" name="back" value="戻る">
<input type="submit" name="btn_submit" value="送信する">
<input type="hidden" name="your_name" value="<?php echo
$_POST['your_name'] ;?>">
<input type="hidden" name="email" value="<?php echo $_POST['email'] ;?>">
</form>
<?php endif; ?>

<?php if($pageFlag === 2) : ?>
送信が完了しました。
<?php endif; ?>


<?php if($pageFlag === 0) : ?>

<form method="POST" action="input.php">
氏名
<input type="text" name="your_name" value="<?php if(!empty($_POST
['your_name'])){echo $_POST['your_name'] ;} ?>">
<br>
メールアドレス
<input type="email" name="email" value="<?php if(!empty($_POST['email']))
{echo $_POST['email'] ;} ?>">
<br>
<input type="submit" name="btn_confirm" value="確認する">

</form>
<?php endif; ?>

<body>
</html>
 

 

実際の画面遷移

【入力画面】

 

【確認画面】

 

 

 

【送信完了画面】

 

【戻るを押した場合も入力データが残るように設定】

氏名
<input type="text" name="your_name" value="<?php if
(!empty($_POST['your_name'])){echo $_POST['your_name'] ;} ?>">
<br>
メールアドレス
<input type="email" name="email" value="<?php if
(!empty($_POST['email'])){echo $_POST['email'] ;} ?>">
<br>

valueにデータを表示するように記述

 

まだまだ初歩ですが今後も頑張っていきます！

ITエンジニア向け　ショートカットキー

ITエンジニア向け　使えるショートカットキー

こちらの動画のショートカットキーまとめさせてもらいました！

プログラミング始めるなら必須のショートカットキー72選 #エンジニア #VSCode - YouTube

普段マウス操作が多かったけどこんなに便利だったとは...。

備忘録として残そうと思います。

 

ショートカットキー一覧 

No. 

全ソフトウェア共通 

1 

コピー 

(Mac) command + C 

(Win) ctrl + C 

2 

ペースト 

(Mac) command + Ⅴ 

(Win) ctrl + V 

3 

切り取り 

(Mac) command + X 

(Win) ctrl + X 

4 

全選択 

(Mac) command + A 

(Win) ctrl + A 

5 

新規ファイル 

(Mac) command + N 

(Win) ctrl + N 

6 

保存 

(Mac) command + S 

(Win) ctrl + S 

7 

名前を付けて保存 

(Mac) command + shift + S 

(Win) ctrl + shift + S 

8 

ファイルを開く 

(Mac) command + O 

(Win) ctrl + O 

9 

新規ウィンドウ 

(Mac) command + shift + N 

(Win) ctrl + shift + N 

10 

アプリケーションを切り替え 

(Mac) command + Tab 

(Win) ctrl + Tab 

11 

アプリケーションを閉じる 

(Mac) command + Q 

(Win) alt + F4 

12 

Spotlight/ファイル名を指定して実行 

(Mac) command + space 

(Win) windowsキー + R 

13 

言語入力の切り替え 

(Mac) ctrl + space 

(Win) windowsキー + space 

14 

文字を大きくする 

(Mac) command + “+” 

(Win) ctrl + “+” 

15 

文字を小さくする 

(Mac) command + “-” 

(Win) ctrl + “-” 

16 

行の先頭に移動 

(Mac) command + ← 

(Win) home 

17 

行の後尾に移動 

(Mac) command + → 

(Win) end 

18 

ページの最前列へ移動 

(Mac) command + ↑ 

(Win) pg + up 

19 

ページの最後尾へ移動 

(Mac) command + ↓ 

(Win) pg + down 

20 

単語の先頭へ移動 

(Mac) option + ← 

(Win) ctrl + ← 

21 

単語の後尾へ移動 

(Mac) option + → 

(Win) ctrl + → 

22 

選択 

(Mac) shift + ↑/↓/←/→ 

(Win) shift + ↑/↓/←/→ 

23 

行を選択 

(Mac) command + shift + ↑/↓/←/→ 

(Win) ctrl + home 　or 　shift + end 

24 

単語を選択 

(Mac) option + shift + ←/→ 

(Win) ctrl + shift + ←/→ 

25 

単語を選択(マウス動作) 

(Mac) ダブルクリック 

(Win) ダブルクリック 

26 

1つ前の状態に戻す 

(Mac) command + Z 

(Win) ctrl + Z 

27 

1つ後の状態に戻す 

(Mac) command + shift + Z 

(Win) ctrl + shift + Z 

28 

キャンセル 

(Mac) esc 

(Win) esc 

29 

ファイル名の変更 

(Mac) Enter 

(Win) Fn + F2 

30 

フォーカス(進む) 

※フォームの入力欄で次にいきたいときなど 

(Mac) Tab 

(Win) Tab 

31 

チェック 

※チェックボックスにチェックを入れるとき 

(Mac) space 

(Win) space 

32 

フォーカス(戻る) 

※フォームの入力欄で前に戻りたいときなど 

(Mac) Tab + shift 

(Win) Tab + shift 

33 

ページ内検索 

(Mac) command + F 

(Win) ctrl + F 

34 

ページ内検索でフォーカス(進む) 

(Mac) command + F → Enter 

(Win) ctrl + F → Enter 

35 

ページ内検索でフォーカス(戻る) 

(Mac) command + F → shift + Enter 

(Win) ctrl + F → shift + Enter 

36 

ダウンロードページを開く 

(Mac) command + shift + j 

(Win) ctrl + j 

37 

履歴ページを開く 

(Mac) command + Y 

(Win) ctrl + H 

38 

設定画面 

(Mac) command + , 

(Win) ctrl + , 

39 

新規タブ 

(Mac) command + T 

(Win) ctrl + T 

40 

タブを閉じる 

(Mac) command + W 

(Win) ctrl + W 

41 

タブの切り替え(戻る) 

(Mac) command + shift + Tab 

(Win) ctrl + shift + Tab 

42 

タブの切り替え(進む) 

(Mac) ctrl + Tab 

(Win) ctrl + Tab 

43 

リロード 

(Mac) command + R 

(Win) F5/ ctrl + R 

44 

スーパーリロード 

(Mac) command + shift + R 

(Win) ctrl + F5 

45 

プリントアウト 

(Mac) command + P 

(Win) ctrl + P 

46 

ウィンドウを最小化する 

(Mac) command + M 

(Win) alt + space → N 

47 

ウィンドウを最大化する 

(Mac) なし 

(Win) alt + space → X 

48 

不可視ファイルを表示 

※Winの場合の操作方法↓ 

(https://pc-karuma.net/windows-10-show-hidden-files-folders/) 

(Mac) command + shift + . 

(Win) なし 

49 

スクリーンショットの撮影 

(Mac) command + shift + 3/4/5 

(Win) windowsキー + shift + S 

VSコードで使えるショートカットキー 

50 

インデント（追加） 

(Mac) Tab 

(Win) Tab 

51 

インデント（戻す） 

(Mac) Tab + shift 

(Win) Tab + shift 

52 

コメントアウト/解除 

(Mac) command + / 

(Win) ctrl + / 

53 

複数選択1 

(Mac) option + click(ドラッグ) 

(Win) alt + click(ドラッグ) 

54 

複数選択2 

(Mac) command + D 

(Win) ctrl + D 

55 

複数選択スキップ 

(Mac) command + K 

(Win) ctrl + K 

56 

サイドバーの切り替え 

(Mac) command + B 

(Win) ctrl + B 

57 

クイックオープン(今開いているファイル内の検索) 

(Mac) command + P 

(Win) ctrl + P 

58 

コマンドパレット 

(Mac) command + shift + P 

(Win) ctrl + shift + P 

59 

ファイル内検索 

(Mac) command + F 

(Win) ctrl + F 

60 

ファイル検索 

(Mac) command + shift + F 

(Win) ctrl + shift + F 

61 

プロジェクト内置換 

(Mac) command + shift + H 

(Win) ctrl + shift + H 

62 

フォーマット整形 

(Mac) shift + option + F 

(Win) shift + alt + F 

63 

コマンドライン 

(Mac) command + J 

(Win) ctrl + J 

64 

別タブで開く 

(Mac) command + ダブルclick 

(Win) ctrl + ダブルclick 

コマンドラインで使えるショートカットキー 

65 

過去のコマンドを呼び出し 

(Mac) ↑/↓ 

(Win) ↑/↓ 

66 

先頭に移動 

(Mac) ctrl + A 

(Win) ctrl + A 

67 

末尾に移動 

(Mac) ctrl + E 

(Win) ctrl + E 

68 

行を削除 

(Mac) ctrl + U 

(Win) ctrl + U 

69 

ログのクリア 

(Mac) ctrl + I 

(Win) Alt + F7 

70 

管理者権限 

(Mac) sudo + 任意のコマンド 

(Win) 管理者権限で開く 

ctrl + shift + Enter 

71 

パスをコピー 

(Mac) 任意のファイル/ディレクトリをドラッグ＆ドロップ 

(Win) なし　代わりに以下の操作で近いことができる 

任意のファイル/ディレクトリをshiftキー 

+ 右クリック → パスのコピー 

72 

キャンセル 

(Mac) ctrl + C 

(Win) ctrl + C