javascript - 无法阻止点击登录后密码在密码字段中自动延长

Question

我有一个表单，其中密码在客户端进行加密，并在单击登录后以“发布”形式发送。但是，我无法阻止单击登录时输入的密码延伸为随机字符串。我希望加密在幕后发生。基本上，我的意思是，当我输入密码并单击“登录”时，密码大小会增加，因为它现在描述了加密密码并提交了表单。

这是我的表单部分:-

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

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