I am having problems with two functions to encrypt and decrypt text in JavaScript.
I am currently using CryptoJS
I need to understand how the encryptation works to use it in a bigger project
JavaScript
x
19
19
1
var texto = document.getElementById("texto");2
3
var llave = "prueba";4
5
function encriptar(texto, llave) { 6
7
var textoEncriptado = String(CryptoJS.AES.encrypt(texto,llave));8
9
document.getElementById("textoEncriptado").innerHTML = textoEncriptado; 10
11
return textoEncriptado;12
}13
14
function desencriptar(textoEncriptado, llave) {15
var textoDesencriptado = String(CryptoJS.AES.decrypt(textoEncriptado, llave));16
document.getElementById("revelado").innerHTML = textoDesencriptado;17
console.log("El texto desencriptado es "+textoDesencriptado);18
return textoDesencriptado;19
}JavaScript
1
33
33
1
<!DOCTYPE html>2
<header>3
<script src="encriptacion.js"></script>4
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>5
</header>6
<head>Encriptacion</head>7
8
<meta charset="utf-8">9
10
11
</head>12
13
14
<body>15
<h1>Prueba de Encriptacion</h1>16
17
18
<form>19
<input type="text" id="texto">20
<p id="textoEncriptado"></p>21
<input type="button" value="Encriptacion" onclick="encriptar()"></input>22
23
<br>24
25
<p>Texto desencriptado</p>26
<input type="text" id="textoDesencriptado"></input>27
<input type="button" value="Desencriptacion" onclick="desencriptar()"></input>28
<p id="revelado"></p>29
</form>30
31
</body>32
33
</html>I would really appreciate it your help.
Advertisement
Answer
You made a few errors in your code:
- Like @Barmar said
encryptar()anddesencriptar()are both defined to take 2 parameters
so I set default values for these two functions equal to the values of the text fields.
JavaScript
1
16
16
1
var default_llave = "prueba";2
3
function encriptar(4
texto = document.getElementById("texto").value,5
llave = default_llave6
) {7
8
}9
10
function desencriptar(11
textoEncriptado = document.getElementById("textoDesencriptado").value,12
llave = default_llave13
) {14
15
}16
So when you don’t pass a value, these are the defaults.
I removed the conversion to and from the
CryptoJSobjects using theStringfunction.CryptoJSobjects have their own built in.toStringmethod which allows you to specify encoding.I also cleaned up some duplicate tags in the
htmlfile.
Full code:
JavaScript
1
27
27
1
var texto = document.getElementById("texto");2
3
var default_llave = "prueba";4
5
function encriptar(6
texto = document.getElementById("texto").value,7
llave = default_llave8
) {9
var textoEncriptado = CryptoJS.AES.encrypt(texto, llave).toString()10
console.log(textoEncriptado);11
12
document.getElementById("textoEncriptado").innerHTML = textoEncriptado;13
14
return textoEncriptado;15
}16
17
function desencriptar(18
textoEncriptado = document.getElementById("textoDesencriptado").value,19
llave = default_llave20
) {21
var textoDesencriptado = 22
CryptoJS.AES.decrypt(textoEncriptado, llave)23
.toString(CryptoJS.enc.Utf8);24
document.getElementById("revelado").innerHTML = textoDesencriptado;25
console.log("El texto desencriptado es " + textoDesencriptado);26
return textoDesencriptado;27
}JavaScript
1
27
27
1
<!DOCTYPE html>2
<html>3
<head>4
<script src="encriptacion.js"></script>5
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>6
<header>Encriptacion</header>7
8
<meta charset="utf-8" />9
</head>10
11
<body>12
<h1>Prueba de Encriptacion</h1>13
14
<form>15
<input type="text" id="texto" />16
<p id="textoEncriptado"></p>17
<input type="button" value="Encriptacion" onclick="encriptar()" />18
19
<br />20
21
<p>Texto desencriptado</p>22
<input type="text" id="textoDesencriptado" />23
<input type="button" value="Desencriptacion" onclick="desencriptar()" />24
<p id="revelado"></p>25
</form>26
</body>27
</html>