使用AES Crypto-JS进行加密和解密并不能正常工作

时间:2018-04-07 15:29:54

标签: javascript html encryption aes cryptojs

我有两个不同的html页面,在第一个有一个表单上提交调用一个Javascript函数加密两个不同的参数后,这两个参数被发送到第二页,按照第一个的代码html页面:

                               

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Test Encrypt</title>

    <script type="text/javascript">


    /**
    Function to encrypt in AES tex
    **/
    function encText(plainText){

        var salt = CryptoJS.enc.Utf8.parse("12345678");

        var password = "test";
        var keyBits = CryptoJS.PBKDF2(password, salt, {
            hasher: CryptoJS.algo.SHA1,
            keySize: 8,
            iterations: 2048
        });
        console.log(keyBits.toString(CryptoJS.enc.Base64));

        var iv = CryptoJS.enc.Base64.parse("dGVzdGFhYTAxMjM1Njc4OQ==");

        var encrypted = CryptoJS.AES.encrypt(plainText, keyBits, {
            iv: iv,
            padding: CryptoJS.pad.Pkcs7,
            mode: CryptoJS.mode.CBC
        });

        //var decrypted = CryptoJS.AES.decrypt(encrypted, key).toString(CryptoJS.enc.Utf8);
        //var decrypted = encrypted.toString(CryptoJS.enc.Utf8)

        //var decrypted = CryptoJS.enc.Utf8.stringify(encrypted);
        return encrypted.toString();


    }

    function formEncrypt(){
        var name = document.getElementById("name").value;
        var surname = document.getElementById("surname").value;

        var encName = encText(name);
        var encSurname = encText(surname);

        document.getElementById("name").value = encName;
        document.getElementById("surname").value = encSurname;

    }

    </script>
</head>


<form action="/decrypt.php"  method="get" name="myForm">
    name: <input type="text" name="name" id="name"><br>
    surname: <input type="text" name="surname" id="surname"><br>
<input type="submit" value="Submit" onclick="formEncrypt()">

在使用JavaScript函数的第二页中,我尝试按照第二页的代码解密两个参数值:

                                        

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Decrypt</title>

    <?php
    echo '<script type="text/javascript">';
    echo 'var encName = \'' . base64_encode ( $_GET['name'] ). '\';';
    echo 'var encSurname = \'' . base64_encode ( $_GET['surname'] ) . '\';';
    echo '</script>';
    ?>

    <script type="text/javascript">

        function decText(encryptedText){

            //var message = CryptoJS.enc.Base64.parse(encryptedText);

            var salt = CryptoJS.enc.Utf8.parse("12345678");

            var password = "test";
            var keyBits = CryptoJS.PBKDF2(password, salt, {
                hasher: CryptoJS.algo.SHA1,
                keySize: 8,
                iterations: 2048
            });
            console.log(keyBits.toString(CryptoJS.enc.Base64));

            var iv = CryptoJS.enc.Base64.parse("dGVzdGFhYTAxMjM1Njc4OQ==");

            var result = CryptoJS.AES.decrypt(CryptoJS.enc.Base64.parse(encryptedText), keyBits, {
                iv: iv,
                padding: CryptoJS.pad.Pkcs7,
                mode: CryptoJS.mode.CBC
            });

            console.log(result.toString(CryptoJS.enc.Utf8));

            return result.toString(CryptoJS.enc.Utf8)
        }

        function yoo(){
            console.log(encName);
            console.log(encSurname);
            var name = decText(encName);
            var surname = decText(encSurname);
            $('#pName').text(name);
            $('#pSurname').text(surname);
            //document.getElementById("pName").value += name;
            //document.getElementById("pSurname").value += surname;
        }


    </script>


</head>
<body>

    <p>Yooooo</p>

    <p id="pName"> </p>
    <p id="pSurname"> </p>

    <button onclick="yoo()">clearText</button>

</body>

但结果总是一个空白字符串,我认为有一个错误,但我找不到。

1 个答案:

答案 0 :(得分:2)

要解码base64字符串,请将包含字数组的已解析对象传递给Utf8编码器的stringify函数。 即。 CryptoJS.enc.Utf8.stringify(parsedObjectContainingWordArray)

const encName = '<?php echo base64_encode($_POST["surname"]); ?>';
const encSurname = '<?php echo base64_encode($_POST["name"]); ?>';

function decText(encryptedText) {
  const salt = CryptoJS.enc.Utf8.parse("12345678");
  const password = "test";
  const keyBits = CryptoJS.PBKDF2(password, salt, {
    hasher: CryptoJS.algo.SHA1,
    keySize: 8,
    iterations: 2048
  });
  const iv = CryptoJS.enc.Base64.parse("dGVzdGFhYTAxMjM1Njc4OQ==");
  const result = CryptoJS.AES.decrypt(
    // This here is where the action is. If the wrong value gets passed,
    // result turns out to be empty string.
    CryptoJS.enc.Utf8.stringify(CryptoJS.enc.Base64.parse(encryptedText)),
    keyBits, {
      iv: iv,
      padding: CryptoJS.pad.Pkcs7,
      mode: CryptoJS.mode.CBC
    }
  );

  return result.toString(CryptoJS.enc.Utf8)
}

function yoo() {
  const nameNode = document.getElementById("pName");
  const surnameNode = document.getElementById("pSurname");
  nameNode.textContent = decText(encName);
  surnameNode.textContent = decText(encSurname);
}