Uncaught TypeError: can't access property "words", key is undefined

Uncaught TypeError: can't access property "words", key is undefined

我在 JavaScript.

中加密和解密文本的两个函数有问题

我目前正在使用 CryptoJS

我需要了解加密的工作原理才能在更大的项目中使用它

var texto = document.getElementById("texto");

var llave = "prueba";

function encriptar(texto, llave) {    

    var textoEncriptado = String(CryptoJS.AES.encrypt(texto,llave));

    document.getElementById("textoEncriptado").innerHTML = textoEncriptado;    
    
    return textoEncriptado;
}

function desencriptar(textoEncriptado, llave) {
    var textoDesencriptado = String(CryptoJS.AES.decrypt(textoEncriptado, llave));
    document.getElementById("revelado").innerHTML = textoDesencriptado;
    console.log("El texto desencriptado es "+textoDesencriptado);
    return textoDesencriptado;
}
<!DOCTYPE html>
<header>
<script src="encriptacion.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>
</header>
<head>Encriptacion</head>

<meta charset="utf-8">


</head>


<body>
    <h1>Prueba de Encriptacion</h1>


<form>
<input type="text" id="texto">
<p id="textoEncriptado"></p>
<input type="button" value="Encriptacion" onclick="encriptar()"></input>

<br>

<p>Texto desencriptado</p>
<input type="text" id="textoDesencriptado"></input>
<input type="button" value="Desencriptacion" onclick="desencriptar()"></input>
<p id="revelado"></p>
</form>

</body>

</html>

非常感谢你的帮助。

您在代码中犯了一些错误:

encryptar() and desencriptar() are both defined to take 2 parameters

所以我将这两个函数的默认值设置为等于文本字段的值。

var default_llave = "prueba";

function encriptar(
  texto = document.getElementById("texto").value,
  llave = default_llave
) {
...
}

function desencriptar(
  textoEncriptado = document.getElementById("textoDesencriptado").value,
  llave = default_llave
) {
...
}

所以当您不传递值时,这些是默认值。

  • 我使用 String 函数删除了与 CryptoJS 对象之间的转换。 CryptoJS 对象有自己的内置 .toString 方法,允许您指定编码。

  • 我还清理了 html 文件中的一些重复标签。

完整代码:

var texto = document.getElementById("texto");

var default_llave = "prueba";

function encriptar(
  texto = document.getElementById("texto").value,
  llave = default_llave
) {
  var textoEncriptado = CryptoJS.AES.encrypt(texto, llave).toString()
  console.log(textoEncriptado);

  document.getElementById("textoEncriptado").innerHTML = textoEncriptado;

  return textoEncriptado;
}

function desencriptar(
  textoEncriptado = document.getElementById("textoDesencriptado").value,
  llave = default_llave
) {
  var textoDesencriptado = 
    CryptoJS.AES.decrypt(textoEncriptado, llave)
  .toString(CryptoJS.enc.Utf8);
  document.getElementById("revelado").innerHTML = textoDesencriptado;
  console.log("El texto desencriptado es " + textoDesencriptado);
  return textoDesencriptado;
}
<!DOCTYPE html>
<html>
  <head>
    <script src="encriptacion.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>
    <header>Encriptacion</header>

    <meta charset="utf-8" />
  </head>

  <body>
    <h1>Prueba de Encriptacion</h1>

    <form>
      <input type="text" id="texto" />
      <p id="textoEncriptado"></p>
      <input type="button" value="Encriptacion" onclick="encriptar()" />

      <br />

      <p>Texto desencriptado</p>
      <input type="text" id="textoDesencriptado" />
      <input type="button" value="Desencriptacion" onclick="desencriptar()" />
      <p id="revelado"></p>
    </form>
  </body>
</html>