登录后点击无法阻止密码在密码字段中自动伸出

时间:2016-02-05 22:47:27

标签: javascript php html5 encryption

我有一个表单,其中密码在客户端加密,并在点击登录后作为'post'发送。但是,我无法阻止密码输入在单击登录时拉伸到随机字符串。我想加密发生在幕后。基本上,我的意思是当我输入密码并单击登录时,密码大小会增加,因为它现在描述了加密密码并且表单提交了。

这是我的表格部分: -

<form action="/scripts/loginsql.php" method="post" id="user_login" onsubmit="submitLogin()" >
        <label for="textfield"></label>
        <input name="username" type="text" class="textfieldstyle" id="username" placeholder="Username" >
        <br>
        <br>
        <br>
        <input name="password" type="password" class="textfieldstyle" id="password" placeholder="Password" >
        <input name="Sign In" type="image" src="/images/signin.png" class="textfieldstyle" id="submit" />
        <?php
        $ipADDR = $_SERVER['REMOTE_ADDR'];
        $salt = exec("/opt/bin/createLoginSalt " . $ipADDR);
        echo '<input id="salt" value="' . $salt . '" readonly="readonly"  type="hidden">';
        ?>
    </form>

这是js部分: -

function submitLogin(){
            var sltElement    = document.getElementById("user_login").elements.namedItem("salt");
            var userElement   = document.getElementById("user_login").elements.namedItem("username");
            var passwdElement = document.getElementById("user_login").elements.namedItem("password");
            var passHash = Aes.Ctr.encrypt(passwdElement.value, sltElement.value, 256);
            passwdElement.value = passHash;
            sltElement.value    = " ";
            passwdElement.form.submit();
        }

这是php部分: -

$error='';

    if(!isset($_POST['username']) || !isset($_POST['password'])){
        $error = "Username or Password is invalid";
    }
    else
    {
        $username=$_POST['username'];
        $stringEncrypted=$_POST['password'];
        $ipADDR = $_SERVER['REMOTE_ADDR'];
        $username = stripslashes($username);
        $stringEncrypted = stripslashes($stringEncrypted); 
    $encryptionKey = exec("/opt/bin/getLoginSaltForSession " . $ipADDR);
    $password = AesCtr::decrypt($stringEncrypted, $encryptionKey, 256);

    $result = exec("/opt/bin/chkLignCrdntls " . $username . " " . $password . " " . $ipADDR);

    if ($result == 'false') {
            header("location: /scripts/login.php"); // Redirecting To Other Page
      exit();
        } else {
            header("location: /protected/main.html?tokn=" . $result); // Redirecting To Other Page
      $result = exec("/opt/bin/deleteLoginSalt " . $encryptionKey . " " . $ipADDR);

      exit();
        }

3 个答案:

答案 0 :(得分:1)

将发送到服务器的密码字段设置为表单中的隐藏字段。

<form action="/scripts/loginsql.php" method="post" id="user_login" onsubmit="submitLogin()" >
        <label for="textfield"></label>
        <input name="username" type="text" class="textfieldstyle" id="username" placeholder="Username" >
        <br>
        <br>
        <br>
        <input type="password" class="textfieldstyle" id="password" placeholder="Password" >
        <input name="password" type="hidden" id="hiddenpassword">
        <input name="Sign In" type="image" src="/images/signin.png" class="textfieldstyle" id="submit" />
        <?php
        $ipADDR = $_SERVER['REMOTE_ADDR'];
        $salt = exec("/opt/bin/createLoginSalt " . $ipADDR);
        echo '<input id="salt" value="' . $salt . '" readonly="readonly"  type="hidden">';
        ?>
</form>
然后,JS将从可见字段中获取密码并将其加密到隐藏字段中。

function submitLogin(){
    var sltElement    = document.getElementById("user_login").elements.namedItem("salt");
    var userElement   = document.getElementById("user_login").elements.namedItem("username");
    var passwdElement = document.getElementById("password");
    var hiddenPasswdElement = document.getElementById("hiddenpassword");
    var passHash = Aes.Ctr.encrypt(passwdElement.value, sltElement.value, 256);
    hiddenPasswdElement.value = passHash;
    sltElement.value    = " ";
    passwdElement.form.submit();
}

可见密码元素没有name属性,因此不会随表单一起提交。

答案 1 :(得分:0)

进行哈希服务器端更好的做法。如果您试图阻止客户端和服务器之间的中间人攻击,则应该实施HTTPS。

那就是说,如果你真的想这样使用AJAX。

使用jQuery

function submitLogin() {
    var sltElement = document.getElementById("user_login").elements.namedItem("salt");
    var userElement = document.getElementById("user_login").elements.namedItem("username");
    var passwdElement = document.getElementById("user_login").elements.namedItem("password");
    var passHash = Aes.Ctr.encrypt(passwdElement.value, sltElement.value, 256);
    sltElement.value = " ";

    var formData = {
        "username": userElement.value,
        "password":passHash
    }

    $.ajax({
        type: 'POST', 
        url: '/scripts/loginsql.php', 
        data: formData, 
        dataType: 'json', 
        encode: true
    })

}

答案 2 :(得分:0)

您只需从隐藏输入中发送密码即可。 你的代码就像这样

   <form action="/scripts/loginsql.php" method="post" id="user_login" onsubmit="submitLogin()" >
            <label for="textfield"></label>
            <input name="username" type="text" class="textfieldstyle" id="username" placeholder="Username" >
            <br>
            <br>
            <br>
            <input type="password" class="textfieldstyle" placeholder="Password" id="password">
    <input type="hidden" name="password" class="textfieldstyle" placeholder="Password" id="hiddenPassword">
                <input name="Sign In" type="image" src="/images/signin.png" class="textfieldstyle" id="submit" />
            <?php
            $ipADDR = $_SERVER['REMOTE_ADDR'];
            $salt = exec("/opt/bin/createLoginSalt " . $ipADDR);
            echo '<input id="salt" value="' . $salt . '" readonly="readonly"  type="hidden">';
            ?>
        </form>

和JS

function submitLogin(){
            var sltElement    = document.getElementById("user_login").elements.namedItem("salt");
            var userElement   = document.getElementById("user_login").elements.namedItem("username");
            var passwd = document.getElementById("password").value;
            var hiddenPasswdElement = document.getElementById("user_login").elements.namedItem("hiddenPassword");
            var passHash = Aes.Ctr.encrypt(passwd, sltElement.value, 256);
            hiddenPasswdElement.value = passHash;
            sltElement.value    = " ";
            passwdElement.form.submit();
        }