为什么 JQuery 不能与 CryptoJS 一起使用？

Question

我有一个编码程序，允许用户输入一些文本和密码以安全地发送消息。

但是，当我尝试运行以下代码时，JQuery 无法正常工作：

text = CryptoJS.AES.encrypt(text, pass);
$("#encodedText").html(text);

<!DOCTYPE html>

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
  <link rel="icon" sizes="192x192" href="http://www.tdat.byethost10.com/web_images/favicon.ico">
  <link rel="apple-touch-startup-image" href="http://www.tdat.byethost10.com/web_images/favicon.ico">
  <link rel="shortcut icon" href="" type="image/icon">
  <link rel="icon" href="http://www.tdat.byethost10.com/web_images/favicon.ico" type="image/icon">
  <meta name="viewport" content="width = device-width">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <meta name="mobile-web-app-capable" content="yes">
  <title>ENCRYPT</title>
  <meta charset="UTF-8">
</head>

<style>
  #first {
    font-family: "courier";
    text-align: center;
    color: #00FF04;
  }
  #second {
    color: white;
  }
  #myDIV {
    border: 1px solid green;
    margin-bottom: 10px;
  }
  button {
    border-radius: 50%;
    background-color: #00FF04;
    border-color: #00FF04;
    color: white;
    font-size: 40px;
    transition-duration: 0.4s;
    width: 25%;
    height: 80px;
  }
  button:hover {
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    background-color: red;
    border-color: red;
  }
  .searchTxt {
    color: #00FF04;
    font-family: "courier";
    border: solid #00FF04;
    border-radius: 5px;
    background-color: black;
  }
  .heading {
    font-size: 80px
  }
</style>

<body bgcolor="black" id="first">

  <p class="heading">ENCODE TEXT</p>
  <p>
    Your text:
  </p>
  <br>
  <input class="searchTxt" size="50" id="textToEncode">
  <br>
  <p>Your password:</p>
  <br>
  <input class="searchTxt" size="50" id="textToRedact">
  <br>
  <br>
  <br>
  <button id="encodeButton">Encode!</button>
  <br>
  <br>
  <br>
  <br>
  <p id="encodedText"></p>


  <p class="heading">DECODE TEXT</p>
  <p>Text:</p>
  <br>
  <input class="searchTxt" size="50" id="textToDecode">
  <br>
  <p>Key:</p>
  <br>
  <input class="searchTxt" size="50" id="keyForDecode">
  <br>
  <br>
  <br>
  <button id="decodeButton">Decode!</button>
  <br>
  <br>
  <br>
  <br>
  <p id="decodedText"></p>


  <script>
    var text = "";
    var word = "";
    var redacted = "";
    var encodedInfo = [];
    var key = "";
    var pass = "";

    $("#encodeButton").on("click", function() {
      $("#key").html("");
      $("#encodedText").html("");
      encodedInfo = [];
      redacted = "";
      text = $("#textToEncode").val();
      pass = $("#textToRedact").val();
      text = CryptoJS.AES.encrypt(text, pass);
      alert("Your encrypted message is as such: " + text);
      $("#encodedText").html(text);
    });


    $("#decodeButton").on("click", function() {
      $("#decodedText").html("");
      redacted = "";
      word = "REDACTED";
      text = $("#textToDecode").val();
      key = $("#keyForDecode").val();
      decrypted = CryptoJS.AES.decrypt(text, key);
      decrypted = decrypted.toString(CryptoJS.enc.Utf8);
      if (decrypted === "") {
        alert("FAIL!!! Wrong password.");
      } else {
        $("#decodedText").html(decrypted);
        alert("The message is: " + decrypted);
      }

    });
  </script>
</body>

</html>

正如您在代码片段中看到的那样，它会正确提醒您编码的消息，但不会更改 #encodedText 的值。为什么会这样？

现场演示：redacted.ga/advance.html

Answer 1

检查后我发现 CryptoJS.AES.encrypt() 函数 returns object 而不是 string。因此 $.html() 不起作用。因此，要使其正常工作，您必须将其称为 $("#encodedText").html(text.toString()); 或者您可以像 $("#encodedText").text(text); 那样调用。后者将 object 隐式转换为 string，然后再将其分配给 DOM。

<!DOCTYPE html>

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
  <link rel="icon" sizes="192x192" href="http://www.tdat.byethost10.com/web_images/favicon.ico">
  <link rel="apple-touch-startup-image" href="http://www.tdat.byethost10.com/web_images/favicon.ico">
  <link rel="shortcut icon" href="" type="image/icon">
  <link rel="icon" href="http://www.tdat.byethost10.com/web_images/favicon.ico" type="image/icon">
  <meta name="viewport" content="width = device-width">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <meta name="mobile-web-app-capable" content="yes">
  <title>ENCRYPT</title>
  <meta charset="UTF-8">
</head>

<style>
  #first {
    font-family: "courier";
    text-align: center;
    color: #00FF04;
  }
  #second {
    color: white;
  }
  #myDIV {
    border: 1px solid green;
    margin-bottom: 10px;
  }
  button {
    border-radius: 50%;
    background-color: #00FF04;
    border-color: #00FF04;
    color: white;
    font-size: 40px;
    transition-duration: 0.4s;
    width: 25%;
    height: 80px;
  }
  button:hover {
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    background-color: red;
    border-color: red;
  }
  .searchTxt {
    color: #00FF04;
    font-family: "courier";
    border: solid #00FF04;
    border-radius: 5px;
    background-color: black;
  }
  .heading {
    font-size: 80px
  }
</style>

<body bgcolor="black" id="first">

  <p class="heading">ENCODE TEXT</p>
  <p>
    Your text:
  </p>
  <br>
  <input class="searchTxt" size="50" id="textToEncode">
  <br>
  <p>Your password:</p>
  <br>
  <input class="searchTxt" size="50" id="textToRedact">
  <br>
  <br>
  <br>
  <button id="encodeButton">Encode!</button>
  <br>
  <br>
  <br>
  <br>
  <p id="encodedText"></p>


  <p class="heading">DECODE TEXT</p>
  <p>Text:</p>
  <br>
  <input class="searchTxt" size="50" id="textToDecode">
  <br>
  <p>Key:</p>
  <br>
  <input class="searchTxt" size="50" id="keyForDecode">
  <br>
  <br>
  <br>
  <button id="decodeButton">Decode!</button>
  <br>
  <br>
  <br>
  <br>
  <p id="decodedText"></p>


  <script>
    var text = "";
    var word = "";
    var redacted = "";
    var encodedInfo = [];
    var key = "";
    var pass = "";

    $("#encodeButton").on("click", function() {
      $("#key").html("");
      $("#encodedText").text("");
      encodedInfo = [];
      redacted = "";
      text = $("#textToEncode").val();
      pass = $("#textToRedact").val();
      text = CryptoJS.AES.encrypt(text, pass);
   alert("Your encrypted message is as such: " + text);
      $("#encodedText").html(text.toString());
    });


    $("#decodeButton").on("click", function() {
      $("#decodedText").text("");
      redacted = "";
      word = "REDACTED";
      text = $("#textToDecode").val();
      key = $("#keyForDecode").val();
      decrypted = CryptoJS.AES.decrypt(text, key);
      decrypted = decrypted.toString(CryptoJS.enc.Utf8);
      if (decrypted === "") {
        alert("FAIL!!! Wrong password.");
      } else {
        $("#decodedText").text(decrypted);
        alert("The message is: " + decrypted);
      }

    });
  </script>
</body>

</html>

Answer 2

因为CryptoJS.AES.encrypt不是return带有HTML的字符串，而是一个对象，如果你使用浏览器控制台就可以看到：

console.log(text);

Object { $super={...}, ciphertext={...}, key={...}, más...}

该对象具有正确定义的 toString() 方法：

console.log(text.toString());

U2FsdGVkX1+r/YSe+2AafmlH+fLkrfUoioilEJ3qay0=

...所以很容易获得散列的纯文本表示，您不需要处理原始二进制输出。但是你仍然需要按原样操作它，纯文本：

$("#encodedText").text(text);

为什么 JQuery 不能与 CryptoJS 一起使用？

Why doesn't JQuery work with CryptoJS?

jquery

cryptojs