AES Crypto-JS的加密和解密无法正常工作

Question

我有两个不同的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>

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

Answer 1

要解码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);
}