无法阻止密码在登录单击后自动在密码字段中伸展 - Unable to prevent password from automatically stretching out in password field after login click

>我有一个表单，其中密码在客户端被加密，并在单击登录后作为"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();
        }

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

<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 属性，因此不会随表单一起提交。

更好的做法是在服务器端进行哈希处理。如果你试图防止客户端和服务器之间的中间人攻击，你应该实现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
    })
}

您可以简单地从隐藏输入发送密码。你的代码是这样的

   <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();
        }