php - AJAX/PHP チャレンジ/レスポンスログイン

Question

私は新しい Web プロジェクトに取り組み始めました。今回は、ユーザー認証の処理方法についてもう少し考えてみようと思いました (以前は MD5 ハッシュ化されたパスワードのみを使用していました)。簡単でやり過ぎのない解決策を求めてウェブの隅々まで検索したような気がしますが、次のことを実装できるかどうか疑問に思っています。

クライアントはユーザー名とパスワードを入力し、「送信」を押します
送信時に、ランダムなトークン/ノンス/シークレット/パスフレーズを要求する AJAX 要求がサーバーに対して行われます。
サーバーはナンスをクライアントに返し、そこでパスワードとナンスでハッシュが作成されます
クライアントは、認証が行われるサーバーにユーザー名とハッシュ (パスワード + ノンス) を送信します。

私の質問は次のとおりです。

AJAX がサーバーにナンスを要求し、サーバーがハッシュが転送されるのを待機させることは可能ですか? ( async: false かもしれません? スニペット/例を自由に提供してください ) 私が見る唯一の他の代替手段は、 nonce を非表示フィールドに保存することであり、それはあまり好ましくないようです。
これにより、セキュリティのレベルが追加されますか?
そうでない場合、他にどのようなオプションがありますか? 以前のようにパスワードをクリアテキストで送信する必要がありますか?

注: 安全なサイトを実現する唯一の方法は HTTPS/SSL であると多くの人が言いたがるのも承知していますが、このプロジェクトでは少数のユーザーをすべて私が手動で作成することを想定していないため、金融取引やその他の機密データの交換などの安全な情報はありません。ログイン中のパスワード/データを保護するための合理的な手段が必要なだけです。この場合、MITM やその他すべての脅威は私にとって問題ではありません。なぜなら、a) そこにいるすべてのハッカーの大半は、私の小さな私的使用のみのプロジェクトに興味がないからです。b) 計算されたコストデータ損失またはセキュリティ違反は、SSL 証明書の購入を保証するのに十分ではありません

意見やアドバイスをいただければ幸いです (けちな新人であると私を叱りたい人からでも;))

score 0 · Accepted Answer

1 - はい、可能です。複数の AJAX リクエストを送信して、特定の条件が満たされた場合にのみ起動して応答するように少しのロジックを設定できます。おそらく、md5 などのサポートされている手法を使用して、クライアント側でランダムなソルトを作成することを検討できます。

2 - はい、機密情報のハッシュに関して md5 よりも優れているものは何でもあり、平文でテキストを送信することはまったく問題です。

3 - openwall から phpass を調べます。これは、簡単に実装できるオープンソースのパスワードハッシュフレームワークであり、仕事を正しく行うのに役立ちます。wordpress などを含むいくつかの大きな名前で使用されています。ajax を使用している場合は、独自の変更を加える必要があります。

score 0 · Accepted Answer

<?php

    // this is normally where you should include a connection to you database
    // to check user input against what is stored 
    if(isset($_POST["username"])) {
        $username = $_POST['username'];
        if ($username == "Joe Schmoe") {
            echo $username.' is taken';
            exit();
        } else {
            echo $username.' is available';
            exit();
        }
    }
?>
<?php

    // this is also where you should include a connection to you database
    // to check user input against what is stored 
    if(isset($_POST["submitIt"])) {
        $username = $_POST['submitIt'];
        if ($username == "Joe Schmoe") {
            echo 'Username is taken';
            exit();
        } else {
            echo 'Success!!';
            exit();
        }
    }
?>
<!DOCTYPE html>
<html>
<head>
    <script>
        function ajaxObj(meth, url) {
            var x = new XMLHttpRequest();
            x.open(meth, url, true);
            x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            return x;
        }
        function ajaxReturn(x){
            if(x.readyState == 4 && x.status == 200){
                return true;
            }
        }
    </script>
    <script>
        function username_availability() {
            var un_value  = document.getElementById("username_value").value;
            var un_error  = document.getElementById("username_error");
            var un_status = document.getElementById("username_status");
            if (un_value != "") {
                var ajax = ajaxObj("POST", "<?php echo $_SERVER['PHP_SELF']; ?>");
                ajax.onreadystatechange = function() {
                    if(ajaxReturn(ajax) == true) {
                        un_status.innerHTML = ajax.responseText;
                    }
                }
                ajax.send("username="+un_value);
            }
        }
        function submitIt() {
            var un_value  = document.getElementById("username_value").value;
            var un_status = document.getElementById("username_status");
            var sb_button = document.getElementById("submit_button");
            var r_message = document.getElementById("result_message");
            var un_form   = document.getElementById("username_form");
            if (un_value == "") {
                un_ststus.innerHTML = "Form data is missing";
            } else {
                un_status.innerHTML = 'processing...';
                var ajax = ajaxObj("POST", "<?php echo $_SERVER['PHP_SELF']; ?>");
                ajax.onreadystatechange = function() {
                    if(ajaxReturn(ajax) == true) {
                        if(ajax.responseText == "Username is taken") {
                            un_status.innerHTML = ajax.responseText;
                        } else {
                            window.scrollTo(0,0);
                            r_message.innerHTML = 'Username is yours!!!';
                            un_status.innerHTML = ajax.responseText;
                        }
                    }
                }
                ajax.send("submitIt=" + un_value);
            }
        }
    </script>
</head>
<body>
    <form name="username_form" id="username_form" onsubmit="return false;">
        <div>Username: </div>
        <input id="username_value" type="text" onkeyup="username_availability()" autofocus>
        <button id="submit_button" onclick="submitIt()">Submit</button>
        <div id="result_message">Submit Username</div>

        <div id="username_status"></div>
    </form>
</body>
</html>

php - AJAX/PHP チャレンジ/レスポンス ログイン

3 に答える 3

Related

Reference

php - AJAX/PHP チャレンジ/レスポンスログイン