I’m doing a small software in JavaScript for encrypting and decrypting files directly on the browser. All right but when I try to decrypt files… it’s impossible. I think it’s all related to codification of text, but I don’t know, I need a good coder for review this code
<!DOCTYPE html>
<html>
<head>
<title>Formulario de cifrado y descifrado de archivos</title>
<meta charset="utf-8">
<link rel="stylesheet" href="resetcss.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</head>
<body>
<h1> Cifrado y descifrado de ficheros </h1>
<hr>
<h2>CIFRADO DE FICHERO</h2>
<div>
<table>
<tr>
<th>Fichero</th>
<th>Semilla aleatoria</th>
</tr>
<tr>
<td><input type="file" id="filetocypher" placeholder="Fichero" /></td>
<td><input type="text" id="cypherpass" placeholder="Semilla aleatoria"></td>
</tr>
<tr>
<td><button id="efi" disabled>Encriptar fichero</button></td>
<td></td>
</tr>
</table>
<div id="resultado_cif"></div>
</div>
<br />
<h2>DES-CIFRADO DE FICHERO</h2>
<div>
<table>
<tr>
<th>Fichero</th>
<th>KEY</th>
<th>IV</th>
<th>SALT</th>
</tr>
<tr>
<td><input type="file" id="filetodescypher" placeholder="Fichero" /></td>
<td><input type="text" id="key" placeholder="Pegue aquí la KEY" value=""></td>
<td><input type="text" id="iv" placeholder="Pegue aquí la IV" value=""></td>
<td><input type="text" id="salt" placeholder="Pegue aquí la SALT" value=""></td>
</tr>
<tr>
<td><button id="defi" disabled>Descifrar fichero</button></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div id="resultado_dcif"></div>
</div>
<script type="text/javascript">
const mode = CryptoJS.mode.CBC;
var Password={_pattern:/[a-zA-Z0-9_-+.]/,_getRandomByte:function(){if(window.crypto&&window.crypto.getRandomValues){var t=new Uint8Array(1);return window.crypto.getRandomValues(t),t[0]}if(!window.msCrypto||!window.msCrypto.getRandomValues)return Math.floor(256*Math.random());var t=new Uint8Array(1);return window.msCrypto.getRandomValues(t),t[0]},generate:function(t){return Array.apply(null,{length:t}).map(function(){for(var t;;)if(t=String.fromCharCode(this._getRandomByte()),this._pattern.test(t))return t},this).join("")}};
$( document ).ready(function() {
$("#filetocypher").on("change", function(e) {
$("#efi").removeAttr("disabled")
});
$("#filetodescypher").on("change", function(e) {
$("#defi").removeAttr("disabled")
});
const leerFichero = (f) =>
new Promise(resolve => Object.assign(new FileReader(), {onload(){
resolve(this.result)}}).readAsText(f));
$("#cypherpass").val(Password.generate(16));
$("#efi").on("click", function(e) {
$("#resultado_cif").html("Procesando ...");
leerFichero(document.querySelector('#filetocypher').files[0])
.then(function(contenido) {
var fichero = document.querySelector('#filetocypher').files[0];
var fichero_p_array = [fichero.name,fichero.type,contenido];
var fichero_p_json = JSON.stringify(fichero_p_array);
var encrypted = CryptoJS.AES.encrypt(fichero_p_json, $("#cypherpass").val(), {mode:mode});
var blob = new Blob([encrypted], { type: 'text/plain' });
var urlCBlob = URL.createObjectURL(blob);
$("#resultado_cif").html('Su fichero seguro ha sido generado, no es necesario recordar la semilla aleatoria, se usó para generar las credenciales, por favor guarde en un lugar seguro las siguientes credenciales generadas, las necesitará para volver a desencriptar su fichero: <br /><br/> KEY: ' + $("#cypherpass").val() + '<br />IV: ' + encrypted.iv + '<br />SALT: ' + encrypted.salt + '<br/><br/>Descarga del fichero: <a href="'+urlCBlob+'" download="'+fichero.name+'.crypto">Descargar</a>');
});
});
$("#defi").on("click", function(e) {
$("#resultado_dcif").html("Procesando ...");
leerFichero(document.querySelector('#filetodescypher').files[0])
.then(function(contenido) {
var fichero = document.querySelector('#filetodescypher').files[0];
var ckey = $("#key").val();
var civ = $("#iv").val();
var csalt = $("#salt").val();
var des = CryptoJS.AES.decrypt(contenido, ckey, { iv: civ, mode: mode, salt: csalt });
var dcontenido = des.toString(CryptoJS.enc.Utf8); //json
var dcontenido_array = JSON.parse(dcontenido); //array
var blob = new Blob([dcontenido_array[2]], { type: dcontenido_array[1] });
var urlDBlob = URL.createObjectURL(blob);
$("#resultado_dcif").html('Descarga del fichero original: <a href="'+urlDBlob+'" download="'+dcontenido_array[0]+'">Descargar</a>');
});
});
});
</script>
</body>
</html>
Please, I need a possible solution!
I can do it with PHP, but I would love do it with JavaScript.
