セキュリティ対策はフロントエンドだけではなくサーバーサイドでもすべきでしょうか？

Question

実現したいこと

新規登録｜ログイン画面を PHP と Javascript で作成したい。

発生している問題・分からないこと

JavaScriptでメールアドレスの入力チェックを行い、6桁の確認コードをメールで送信したいのですが、以前フロントエンドはユーザーが入力したことに対してのものなので、セキュリティ対策としては足りないとアドバイスを頂き PHP 側でも同様のチェックを行うべきか悩んでおります。

該当のソースコード

    <style>
        /* フォーカスが当たった時の青枠を表示しない */
        *:focus {
            outline: none;
        }

        /* 項目名用のラベル（今回はラベルなしデザイン）
        div.input-area label {
            display: inline-block;
            width: 8rem;
            text-align: right;
        } */

        /* エラーメッセージのスタイル */
        div.error-msg p {
            color: #e52d77;
            margin: 0 0 0 8rem;
        }

        /* 入力欄 */
        input[type="email"] {
            line-height: 2em;
        }

        /* 入力エラーがあった時のスタイル（エラーがあった時は枠の色は分かりずらいので変更せずエラー文のみ表示させる）
        .input-error {
            border: 1px solid #e52d77;
            border-radius: 3px;
            background-color: #FCC;
        }  */

        /* クリック時に枠の色を変更 */
        ○○○:hover {
            border: 2px solid #000;
        }
    </style>


    <div class="login-email">
        <form method="post" class="register_form">
            <div class="form_item">

                <div class="login-inputWrapper"></div>
                <!-- hiddenで生成したトークンを埋め込む -->
                <!-- oninputプロパティは一定時間操作が無かったら処理を実行させる関数 -->
                <input type="hidden" id="input-email" name="csrf_token" maxlength="15" oninput="value=value.replace(/[^\d]/g, '')" placeholder="メールアドレスを入力してください" value="<?= $csrf_token; ?>">
                <div id="error-msg-email" class="error-msg" style="display: none;"></div>

                <div class="login-email_vertical-line"></div>
                <div class="login-email-send clickable disabled">
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;">認証コードを取得する</font>
                    </font>
                </div>
            </div>


            <div class="form__separator-line"></div>
            <div class="form__item">
                <div>
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;">検証コード</font>
                    </font>
                </div><input placeholder="確認コードを入力してください" maxlength="6" oninput="value=value.replace(/[^\d]/g, '')">
            </div>
        </form>

        <script>
            // メールアドレスの入力チェック
            var inputEmail = document.getElementById('input-email');

            /**
             * フォーカスが外れた場合のイベントハンドラ
             */
            inputEmail.addEventListener('blur', function() {
                // 入力されたメールアドレスを取得してトリム（データの不要な部分を削除し、必要な部分だけを残して値を設定し直す）して値を設定し直す
                // 通常は値の設定前に文字列の先頭と末尾の空白を削除するためにトリムする必要があります。
                inputEmail.value = inputEmail.value.trim();

                // 入力チェック
                // カスタムバリデーション名
                validate_email();
            });

            /**
             * メールアドレスの入力チェック
             */
            function validate_email() {

                var val = inputEmail.value;

                // 必須チェック
                if (val == "") {
                    // エラーメッセージの作成
                    var err_msg = document.createElement('p');
                    err_msg.textContent = 'メールアドレスが入力されていません。';

                    // エラーメッセージの表示領域
                    // var err_msg_div = document.querySelectorAll('#error-msg-email');
                    var err_msg_div = document.getElementById('error-msg-email');

                    // エラーメッセージの表示領域を表示する
                    err_msg_div.style.display = "block";

                    // エラーメッセージの表示領域にエラーメッセージを追加
                    err_msg_div.appendChild(err_msg);

                    // 入力欄にinput-errorクラスを追加（入力フォームの色を変更）
                    // input_email.setAttribute('class', 'input-error');

                    return;
                }
                // メールアドレス形式チェック
                var regex = new RegExp(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/);
                if (!regex.test(val)) {
                    // エラーメッセージの作成
                    var err_msg = document.createElement('p');
                    err_msg.textContent = '無効なメールアドレスです。';

                    // エラーメッセージの表示領域
                    var err_msg_div = document.getElementById('error-msg-email');

                    // エラーメッセージの表示領域を表示する
                    err_msg_div.style.display = "block";

                    // エラーメッセージの表示領域にエラーメッセージを追加
                    err_msg_div.appendChild(err_msg);

                    // 入力欄にinput-errorクラスを追加（入力フォームの色を変更）
                    // input_email.setAttribute('class', 'input-error');

                    return;
                }
            }

            /**
             * フォーカスが当たった場合のイベントハンドラ
             */
            input_email.addEventListener('focus', function() {

                // input-errorクラスを削除
                input_email.classList.remove('input-error');

                // エラーメッセージの表示領域を非表示にする
                document.getElementById('error-msg-email').style.display = "none";

                // エラーメッセージを削除
                document.getElementById('error-msg-email').children[0].remove();
            });
        </script>

<?php
session_start();

// 変数の宣言
// $error_message = '';
$mail = '';

// エラーが発生している時の処理
/* if (!empty($_SESSION['error_message'])) {
    $error_message = $_SESSION['error_message'];
    unset($_SESSION['error_message']);
} */

// それぞれの変数に値を代入
// PHPの値が空であれば
if (!empty($_SESSION['mail'])) {
    $mail = $_SESSION['mail'];
    // セッション変数を削除
    unset($_SESSION['mail']);
}

// 確認コードをメールで送信（6桁）
if (!empty($_SESSION['code'])) {
    $_SESSION['code'] = rand(100000, 999999);
    // セッション変数を削除
    unset($_SESSION['code']);
}

// テンプレートとなるhtmlファイルを読み込む
// $html = file_get_contents('user_regist.html');

// htmlファイルの変更したい部分を変換する
// $html = str_replace('#error_message#', htmlspecialchars($error_message), $html);
// $html = str_replace('#mail#', htmlspecialchars($mail), $html);

// 変換したhtmlを表示する
// print($html);
?>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

メール送信に関するコードを調べたところ PHP側でもチェックされているものが多く、未入力チェックとメールアドレスチェック（preg_match）は必要なのではないかと思いました。

補足

※ 参考サイト
https://blog.take-it-easy.site/web-develop/validate-input-of-name/

Comments

[TakaiY]

> JavaScriptでメールアドレスの入力チェック
ここで何をチェックしていますか？

> セキュリティ対策
ここで言うセキュリティ対策とはどのようなものを指していますか？

> PHP 側でも同様のチェック
ここではどのような「チェック」を行なうつもりでしょうか。

[homepage-site]

TakaiY さん回答ありがとうございます。
JavaScriptでメールアドレスの入力チェックはフォーカスが外れた場合の処理になります。
PHP 側では未入力チェック、メールアドレスの型を正規表現で判定、危険文字列置換の3点を行う予定です。

※ 参考サイト
https://ok-engineering.net/article/9

https://qiita.com/wakahara3/items/ec8c9b6cbdfef78d3a64

[TakaiY]

入力されたメールアドレスの文字列に対してサニタイズ等を行なうにあたって、サーバ側でも実施する必要があるかどうか？という質問でしょうか？
であれば、既についている回答にあるとおりだと思います。

[homepage-site]

TakaiY さん回答ありがとうございます。
サーバーサイドでも実装してみます。

[tezcello]

> JavaScriptでメールアドレスの入力チェックを行い（略）セキュリティ対策としては足りないと
既に指摘もされていますが、入力チェックは単なるバリデーションでセキュリティ対策の一環ではありません。

それと、正規表現でメールアドレスを表す文字列として適切かを判断するのはとても難しいと読んだ記憶があります。
その正規表現で大丈夫ですか？
＿＿更に日本ではRFC違反のメールアドレスが横行していたはずですが、終息したのかなぁ？

ご提示の正規表現が有効かの議論は脇に置くとして...
与えられた文字列がメールアドレスとして使えるモノであるかの判定をしたいのではなく、連絡先として使える有効な（＝生きている）メールアドレスを取得したいのではありませんか？
個人的には前者は意味が無いと考えます。
メールアドレスを手入力させる方法は、他者に無関係のメールを送り付ける事が可能だし、コピペせずに本当に手入力すると一定の割合で（自身のメールアドレスなのに）入力ミスをします。
なので、メールアドレスを取得する際は実際にメールをやり取りして取得するのが最適だと考えています。
＿＿空メールへの返信として登録用URLを返信するとか
＿＿その場でメールを送信して（メール内に書いた）トークンを入力させるとか...

[homepage-site]

tezcello さん回答ありがとうございます。
JavaScript はバリデーションということで覚えておきます。

その場でメールを送信して（メール内に書いた）トークンを入力させる方法で考えており、認証コードを取得するボタンを押すことでトークンを送信するように進めております。

// 確認コードをメールで送信（6桁）
if (!empty($_SESSION['code'])) {
$_SESSION['code'] = rand(100000, 999999);
// セッション変数を削除
unset($_SESSION['code']);
}

[TakaiY]

いろいろやりとりが行なわれていますが、まだ質問の内容は解決していないのでしょうか？

[homepage-site]

TakaiY さん回答ありがとうございます。
申し訳ありません、解決いたしました。

[tezcello]

> JavaScript はバリデーションということで覚えておきます。
JavaScriptでやっているクライアント上でのチェックはバリデーションではなくて、無駄な（サーバ側で明らかに拒否されてしまう）データ送信を防いでくれる単なる「お助け機能」って思っています。
クライアント側でやってもサーバ側で省略する事は出来ない訳だし、それを「バリデーション」なんて呼ぶとホントにバリデーション出来ているみたいに感じてしまいますから。

「お助け機能」は、無駄な送受信やサーバ側での処理が無くなるとか、入力の手間が無くなる（減る）とか、見栄えが良くなるとか、操作がし易くなるとかの利用者の利便性を高めるモノで、セキュリティとかバリデーションとかとは別物と考えるべきだろうなと。
＿＿重複送信を回避するとかはセキュリティと言えなくもない気もするけど...

[homepage-site]

tezcello さん回答ありがとうございます。
セキュリティではなくお助け機能という認識で覚えておきます。

[otn]

> JavaScript はバリデーションということで覚えておきます。
とか、
> セキュリティではなくお助け機能という認識で覚えておきます。
とか、何故そんなに意味ないレベルにまで話を単純化したいのでしょうか？

単純化せずにそのまま理解しましょう。もしかすると「回答やコメントの内容が理解できないので、単純化して覚えるしかない」と最初から諦めてませんか？ブラウザのJavaScriptでは何をやり、サーバーサイドでは何をやるのかというのは、きちんと理解していないと設計できないです。

[homepage-site]

otn さん回答ありがとうございます。
言葉足らずで申し訳ありません。
Javacript はユーザーの利便性を向上するものであり、セキュリティ対策の一環ではないという認識で覚えておきます。

[TakaiY]

www

> Javacript はユーザーの利便性を向上するものであり、セキュリティ対策の一環ではないという認識で覚えておきます。

違います。

[utm.]

うーん。
おそらく質問者さん的に、
サイト運営者が意図していない行為や投稿はセキュリティの問題と考えているのでしょうが、それをセキュリティと呼ぶと文脈の誤解を誘発しやすく、意図的に使っているのであれば控えたほうがよさそうです。

例えば、入力は100文字までですという入力フィールドに101文字入れた人がいたらこれはセキュリティ的な問題、攻撃であるということを思っているのかもしれません。
それも考えとしては一理あるかもしれないのですが、ニュアンスとして「セキュリティ(?)」になってしまって、コミュニケーションが難しいなって感じもします。

バリデーションには二つの種類があります。
これはデータがただの状態であるケースがあるためです。
重複のバリデーションはまさにこれで、状態として成立しているかしていないかというものです。
逆に8文字以上入力できません。みたいなバリデーションは状態に関係なく常に行えます。
そのような観点から、入力時にクライアントPC(javascript)で検証できるもの、データの登録などに際してサーバーサイドで検証しなければならないものというのが発生し、どちらもバリデーションと呼ぶために誤解を受けやすいワードにもなっています。
(また、アプリサーバーの設計としてそもそも検証しなくてもDBがエラーしてくれることを信頼するとかいうのもあるので更に面倒。まあデータの登録が目的なAPIであれば役割としては理にかなっていると考えられますけども。)

根本的に質問者さんが理解できればすっといけそうなのは、通信だとかがただのデータのやり取りで、HTMLだのはただの見せかけでしかないということ。
裏側とか最小としてどういうことが起きるのかということを勉強することで質問内容もすっきりして、疑問の内容もすっきりして、自分で考えて結論を導く力がわくと思います。
最終的に何を目指しているのか分かりませんが、詰まるたびに対処療法的にやっていってもほんとにこの時しか使えないので、ちゃんと知識として蓄えていくことを目標にした方が健全な気もしています。
よく質問されているので実際に困っているとは思うのですがこういった情報からうまく学んでいくという意欲的な部分は少なめなんでしょうか。

これだけたくさんの人がご協力している形で
CSRFやメールでの認証というそこまで難しくない概念で詰まるという状況がなんか不自然です。

[TakaiY]

同感です。
用語だけなのかもしれませんが、1つ前のポストの「Javacript はユーザーの利便性を向上するもの」などのように主語が大きくて大雑把で、同様の傾向は質問にもあって、アドバイスしようとしている人たちとの認識のギャップがなかなか埋まらない感じがしますね。

Answer 1

PHP 側でも同様のチェックを行うべきか悩んでおります。

むしろ、入力制限についてセキュリティ的な意味を持つのは、サーバサイドだけです。

攻撃者はフォームを無視してデータを送信することも可能ですので、HTMLやJavaScriptでは対策しきれません。

Comments

[homepage-site]

アドバイスありがとうございます。
サーバサイド側でのセキュリティ対策は必須ということで進めていきます。

Answer 2

セキュリティ対策という意味では、フロントとバックエンドの両方で対策することが必要です。ただし、フロントエンドの対策は、バイパスされる可能性があるため、バックエンドの対策こそが重要になります。

フロントと同じ対策をバックエンドで行うだけでは不十分で、より厳格に対応するべきです。また、入力をサニタイズ（無害化）するようにしましょう。

Comments

[homepage-site]

Umeeeh さん回答ありがとうございます。
バックエンドでしっかり対策を練り、入力を無害化致します。

Answer 3

セキュリティ対策はフロントエンドだけではなくサーバーサイドでもすべきでしょうか？

というタイトルにある一般論については、他の方の回答と重なりますが、
・セキュリティー対策はサーバーサイドで行う
・サーバーサイドの処理に対してのセキュリティー対策をブラウザ側だけで行うのは不可能（攻撃者は普通のブラウザで手操作で送信すると限らない）

今回の質問はメールアドレス限定ということで一般論ではないですが、

JavaScriptでメールアドレスの入力チェックを行い、6桁の確認コードをメールで送信したいのですが、以前フロントエンドはユーザーが入力したことに対してのものなので、セキュリティ対策としては足りないとアドバイスを頂き PHP 側でも同様のチェックを行うべきか悩んでおります。

と言うことで、一体何のセキュリティーを気にしているのか不明です。

<ケース1＞
いたずら行為として、「赤の他人のメールアドレスを入力して、その人にあなたのサイトからの確認コードメールを送りつける。相手からすると『意味不明のメールが届く』という迷惑行為になるが、いたずら者自身のの身元は相手にはばれない」というのはあり得ますが、これをプログラムで防ぐのは不可能でしょう。せいぜい、「同じメールアドレスへの確認コード送付は1日にN回まで」的な程度。

＜ケース2＞
入力された文字列を、そのままメールアドレスとして送信に使った際に、「意図しないコードが実行される」的な脆弱性があり事前にチェックが必要か？というと、具体的な送信方法によっては何かバリデーションやクォートを考える必要があるかも知れません。言語のメール送信ライブラリーを使うのならライブラリー側でチェックしてくれそうな気がしますが。

＜ケース3＞
メール送信時の話ではなくて、メールアドレスを画面に表示する際のHTML的な意味でのことであれば、「ユーザー入力文字列をHTMLに埋め込む場合」の一般的な普通の対応で良いです。PHPならhtmlspecialchars的な話ですね。メールアドレス固有の特殊性は無いので、単に「ユーザーが自由に入力した文字列（そのまま出力すると危険）」として扱えば良いだけ。

＜本題＞
「メールアドレスとして正当か？」＝「入力者自身が受け取ることの出来るメールアドレスか？」を確認するのであれば、メールを送るしかない。それ以外のチェックはあまり意味が無いです。
初期の携帯メールアドレスのローカルパート（ユーザー名部分）がRFC的に間違っていたものがあるというのは有名です。また、逆に、RFC的に正しいメールアドレスならかならず届くとも限りません（RFC的に正しいがPostfixが扱えない物がある）。
つまり、「入力された文字列がRFC的に正しいかどうかを正規表現でチェックする」ことは、「入力者自身が受け取ることの出来るメールアドレスか？」とはあまり関係の無い話になってしまいます。

ということで「入力者自身が受け取ることの出来るメールアドレスか？」のチェックは実際に送るしかない。その前に正規表現でのチェックは無意味ではないですが、あくまで「タイプミスがあれば早めに教えてあげる」的な意味しか無いでしょうね。タイプミスチェックということならお書きの正規表現で、ほとんどの場合は問題ないと思いますが、中途半端なチェックをするのが良いのかどうか。（上記ケース2の考慮は別途必要）

Comments

[homepage-site]

回答ありがとうございます。
ケース1は全く想定しておりませんでした勉強になります。
今回の質問はケース2に該当しております、PHP（サーバーサイド）で行うように修正致します。
メール送信に関する脆弱性ばかり考えておりメールアドレス（ケース3）は後回しにしておりました申し訳ありません。

1点お聞きしたいのですが、認証コードを送らせてログインするよりも送らないほうがメールアドレスが流出するリスクは下がりますでしょうか？

[otn]

> 今回の質問はケース2に該当しております、PHP（サーバーサイド）で行うように修正致します。
メール送信に関する脆弱性ばかり考えておりメールアドレス（ケース3）は後回しにしておりました申し訳ありません。

「メール送信処理」はサーバーサイドで行う訳なので、「メール送信処理の際に脆弱性が無いようにする」もサーバーサイドで行うのは最初から自明な気がします。

> メールアドレス（ケース3）は後回しにしておりました申し訳ありません。

質問へのコメントで書かれていた「※ 参考サイト」の2つめが、まさに「ケース3に限定した対策の説明」のページなので、ケース3も質問の範囲内なのかと思っていました。

> 1点お聞きしたいのですが、認証コードを送らせてログインするよりも送らないほうがメールアドレスが流出するリスクは下がりますでしょうか？

これは一体どこから出てきた話ですかね？
・誰のメールアドレスが誰に流出するというリスクの話でしょうか？
・「認証コードを送らせて」とは、誰が誰に送る話でしょうか？
・「送らないほうが」というのはどういう処理をしようとしている話ですか？

アカウントを新規作成しようとしている利用者が入力したメールアドレスが、確かにその利用者のメールアドレスであるのかを確認しないと駄目だというのは前回の質問への回答で書きましたが、その回答が理解できていないわけではないですよね？

[homepage-site]

回答ありがとうございます。
参考サイトで挙げさせていただく場合は質問の内容に含まれていると考えられるのが自然ですね失礼いたしました。

登録の際に同じメールアドレスで会員登録の際に認証コードを送られてしまうと攻撃されてメールアドレスが流出するリスクが上がるのではないかと勘違いしておりました。
調べたところ重複登録の場合はエラーをメールで返すことで防ぐことが出来ると知りました。

otn さんにアドバイス頂いた内容を誤解しており、絶対条件ではないと勘違いしておりました申し訳ありません。

[otn]

「誰のメールアドレスが誰に流出するというリスクの話でしょうか？」への回答が無く、

> 登録の際に同じメールアドレスで会員登録の際に認証コードを送られてしまうと攻撃されてメールアドレスが流出するリスクが上がるのではないか

と、お書きの意味が分かりませんが、解決したのならよいです。

> otn さんにアドバイス頂いた内容を誤解しており、絶対条件ではないと勘違いしておりました申し訳ありません。

「私が絶対条件と言った」とか「私が出来ればした方が良いが必須ではないと言った」とかは関係なく、
「タイプミスした赤の他人のメールアドレスを登録してしまいその間違ったアドレスに今後ずっとメールを送る」うと言う事態を「あなた自身がどう考えるか」が問題です。
あなたが、「第三者に迷惑メールを送り続けることになるが、別にそれで気にしない。」という判断ならそれでいいです。そういうサイトも時々あります。
「自分で何も判断せず、他人の判断基準をそのまま自分の判断基準にする」のは駄目だということだけは言えます。自分で考えて自分で判断しましょう。「自分の考えに、考え漏れがないか？」が心配ならそのポイントを質問しましょう。

Answer 4

メールアドレスが本当に正しいかどうかは実際にメールを送信し、認証コードなどをユーザーに入力させるまで分かりません。
したがって、メールアドレスとして使用できない文字を弾く程度の簡単なバリデーションで十分と考えます。
またSNSアカウント認証ではなく、メールアドレスとパスワードによる認証の実装を想定されていると思いますが、アカウント登録、ログインともにメールアドレスと認証コードで行い、ユーザーには任意のパスワードを入力させない方式をおすすめします。
いやゆるワンタイムパスワード方式です。

アカウント登録時にまず認証コードを送信してそれが成功するまでは登録に進めないようにする事で、いたずらや存在しないメールアドレス、打ち間違いを防げます。

ログイン時に毎回認証コードを送る方式(ワンタイムパスワード)のメリット

• ログインのたびにメールを受信して認証コードを確認する必要があるが、ユーザーはパスワードを考えたり、覚えなくて良いのでトータルで考えたら一番楽。ユーザーも運営側も。「パスワードを忘れた方はこちら」みたいな機能の実装も不要。
• 有効期限を短く設定すれば漏洩リスクも減る(2-3分くらい)
• 認証に成功したコードは無効にする事でさらにセキュリティを高められる
• 一定回数認証コードを間違えたら一定時間ログインをブロックするのもあり

Comments

[homepage-site]

いたずら対策にワンタイムパスワードを導入する考えはありませんでした勉強になります。
パスワードを忘れた方のような機能について悩んでおりましたが、ワンタイムパスワードであれば解消できそうですね。
ユーザ―側として利用する際にパスワードを紛失することもあるのでログインの度に送信する方法が最適に感じます。

有効期限、認証コードの破棄、一定時間ログインをブロックは導入させていただきますアドバイスありがとうございます。

Answer 5

未入力チェックとメールアドレスチェック

それは入力の精度をあげたいのとバリデーションでありセキュリティとは関係ありません。
当然入力されたメールアドレスにサーバーからメールを送るのであればいたずらなどの被害に合う可能性があるのでCAPTCHAなどを行うほうがよいでしょう

参考

PHPでのEmailのバリデーション

<?PHP
$email=filter_input(INPUT_GET,"email",FILTER_VALIDATE_EMAIL);
var_dump($email);
?>
<form>
<input type="text" name="email">
<input type="submit" value="send">
</form>

Comments

[homepage-site]

回答ありがとうございます。
サーバサイド側でのセキュリティ対策を考慮せず DMM やビリビリ動画のような入力画面から確認画面を設けずにメール送信するデザインを参考にしてしまったので心配しております…
Email のバリデーション使わせていただきます。