Cifrado de archivos de aplicaciones con JavaScript
Cifrado de archivos de aplicaciones con JavaScript
La seguridad y la privacidad son temas candentes en la actualidad. Esta es una oportunidad para nosotros para tomar una mirada introspectiva en la forma en que nos acercamos a la seguridad. Es todo una cuestión de compromiso – conveniencia frente total de bloqueo hacia abajo. El tutorial de hoy es un intento de mezclar un poco de ambos.
La aplicación que vamos a construir hoy en día es un experimento que permitirá a las personas a elegir los archivos de sus ordenadores y a cifrar el lado del cliente con una frase de acceso. Sin código del lado del servidor será necesario, y ninguna información será transferida entre el cliente y el servidor. Para que esto sea posible vamos a utilizar el HTML5 API FileReader , y una biblioteca de cifrado de JavaScript – CryptoJS.
Tenga en cuenta que la aplicación no cifra el archivo real, sino una copia de la misma, por lo que no perderá el original. Pero antes de empezar, aquí hay algunos problemas y limitaciones:
Problemas y limitaciones
El límite de 1 MB
Si juegas con la demo, se dará cuenta de que no le permite encriptar archivos de más de 1 MB. Coloqué el límite, porque el HTML5 downloadatributo, que utilizo para ofrecer el archivo cifrado para su descarga, no juega bien con grandes cantidades de datos. De lo contrario, haría que la pestaña se bloquee en Chrome, y todo el navegador se bloquee al usar Firefox. La forma de evitar esto sería el uso de la API del sistema de archivos y escribir los datos binarios reales allí, pero está apoyado sólo en Chrome por ahora. Este no es un problema con la velocidad de cifrado (que es bastante rápido), pero con el ofrecimiento del archivo para su descarga.
¿Qué pasa con HTTPS?
Cuando se trata de la encriptación de datos y la seguridad de la información, la gente naturalmente esperan que la página se carga a través de HTTPS. En este caso creo que no es necesario, ya que aparte de la descarga inicial del HTML y activos, no se transfiere datos entre el usuario y el servidor – todo se hace del lado del cliente con JavaScript. Si esto te molesta, puedes descargar la demo y abrirlo directamente desde el ordenador.
¿Qué tan seguro es?
La biblioteca que utilizo – CryptoJS – es de código abierto, por lo que creen que es digno de confianza. Yo uso el algoritmo AES de la colección, que se sabe que es segura. Para obtener los mejores resultados, utilice una frase de hace mucho tiempo que es difícil de adivinar.
JavaScript cifrado de archivos de aplicaciones
el HTML
El marcado de la aplicación consiste en un documento HTML5 regular y unos divs que separan la aplicación en varias pantallas individuales. Usted verá cómo éstos interactúan en las secciones de JavaScript y CSS de la guía de aprendizaje.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>JavaScript File Encryption App</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="http://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" />
<link href="assets/css/style.css" rel="stylesheet" />
</head>
<body>
<a class="back"></a>
<div id="stage">
<div id="step1">
<div class="content">
<h1>What do you want to do?</h1>
<a class="button encrypt green">Encrypt a file</a>
<a class="button decrypt magenta">Decrypt a file</a>
</div>
</div>
<div id="step2">
<div class="content if-encrypt">
<h1>Choose which file to encrypt</h1>
<h2>An encrypted copy of the file will be generated. No data is sent to our server.</h2>
<a class="button browse blue">Browse</a>
<input type="file" id="encrypt-input" />
</div>
<div class="content if-decrypt">
<h1>Choose which file to decrypt</h1>
<h2>Only files encrypted by this tool are accepted.</h2>
<a class="button browse blue">Browse</a>
<input type="file" id="decrypt-input" />
</div>
</div>
<div id="step3">
<div class="content if-encrypt">
<h1>Enter a pass phrase</h1>
<h2>This phrase will be used as an encryption key. Write it down or remember it; you won't be able to restore the file without it. </h2>
<input type="password" />
<a class="button process red">Encrypt!</a>
</div>
<div class="content if-decrypt">
<h1>Enter the pass phrase</h1>
<h2>Enter the pass phrase that was used to encrypt this file. It is not possible to decrypt it without it.</h2>
<input type="password" />
<a class="button process red">Decrypt!</a>
</div>
</div>
<div id="step4">
<div class="content">
<h1>Your file is ready!</h1>
<a class="button download green">Download</a>
</div>
</div>
</div>
</body>
<script src="assets/js/aes.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="assets/js/script.js"></script>
</html>Sólo uno de los divs paso es visible a la vez. Dependiendo de la elección del usuario – para cifrar o descifrar – un nombre de clase se encuentra en el elemento del cuerpo. Con CSS, este nombre de clase esconde los elementos en los que desarrolla la if-encrypto if-decryptlas clases. Este simple compuerta nos permite escribir JavaScript más limpio que está mínimamente involucrado con la interfaz de usuario.
El código JavaScript
Como ya he mencionado en la introducción, vamos a utilizar el HTML5 API FileReader ( soporte ) y elCryptoJS biblioteca juntos. El objeto FileReader nos permite leer el contenido de los archivos locales utilizando JavaScript, pero sólo de los archivos que se han seleccionado de manera explícita por el usuario a través de diálogo de búsqueda del archivo de entrada. Se puede ver cómo se hace esto en el código de abajo. Observe que la mayor parte del código controla las transiciones entre las diferentes pantallas de la aplicación, y la lectura real del archivo pasa de la línea 85.
activos / js / script.js
$(function(){
var body = $('body'),
stage = $('#stage'),
back = $('a.back');
/* Step 1 */
$('#step1 .encrypt').click(function(){
body.attr('class', 'encrypt');
// Go to step 2
step(2);
});
$('#step1 .decrypt').click(function(){
body.attr('class', 'decrypt');
step(2);
});
/* Step 2 */
$('#step2 .button').click(function(){
// Trigger the file browser dialog
$(this).parent().find('input').click();
});
// Set up events for the file inputs
var file = null;
$('#step2').on('change', '#encrypt-input', function(e){
// Has a file been selected?
if(e.target.files.length!=1){
alert('Please select a file to encrypt!');
return false;
}
file = e.target.files[0];
if(file.size > 1024*1024){
alert('Please choose files smaller than 1mb, otherwise you may crash your browser. \nThis is a known issue. See the tutorial.');
return;
}
step(3);
});
$('#step2').on('change', '#decrypt-input', function(e){
if(e.target.files.length!=1){
alert('Please select a file to decrypt!');
return false;
}
file = e.target.files[0];
step(3);
});
/* Step 3 */
$('a.button.process').click(function(){
var input = $(this).parent().find('input[type=password]'),
a = $('#step4 a.download'),
password = input.val();
input.val('');
if(password.length<5){
alert('Please choose a longer password!');
return;
}
// The HTML5 FileReader object will allow us to read the
// contents of the selected file.
var reader = new FileReader();
if(body.hasClass('encrypt')){
// Encrypt the file!
reader.onload = function(e){
// Use the CryptoJS library and the AES cypher to encrypt the
// contents of the file, held in e.target.result, with the password
var encrypted = CryptoJS.AES.encrypt(e.target.result, password);
// The download attribute will cause the contents of the href
// attribute to be downloaded when clicked. The download attribute
// also holds the name of the file that is offered for download.
a.attr('href', 'data:application/octet-stream,' + encrypted);
a.attr('download', file.name + '.encrypted');
step(4);
};
// This will encode the contents of the file into a data-uri.
// It will trigger the onload handler above, with the result
reader.readAsDataURL(file);
}
else {
// Decrypt it!
reader.onload = function(e){
var decrypted = CryptoJS.AES.decrypt(e.target.result, password)
.toString(CryptoJS.enc.Latin1);
if(!/^data:/.test(decrypted)){
alert("Invalid pass phrase or file! Please try again.");
return false;
}
a.attr('href', decrypted);
a.attr('download', file.name.replace('.encrypted',''));
step(4);
};
reader.readAsText(file);
}
});
/* The back button */
back.click(function(){
// Reinitialize the hidden file inputs,
// so that they don't hold the selection
// from last time
$('#step2 input[type=file]').replaceWith(function(){
return $(this).clone();
});
step(1);
});
// Helper function that moves the viewport to the correct step div
function step(i){
if(i == 1){
back.fadeOut();
}
else{
back.fadeIn();
}
// Move the #stage div. Changing the top property will trigger
// a css transition on the element. i-1 because we want the
// steps to start from 1:
stage.css('top',(-(i-1)*100)+'%');
}
});Puedo obtener el contenido de los archivos como un URI de datos de cadena ( de apoyo ). Los navegadores le permiten utilizar estos URI todas partes una dirección URL habitual iría.
La ventaja es que permiten almacenar el contenido del sitio directamente en el URI, por lo que puede, por ejemplo, colocar el contenido del archivo como el hrefde un enlace, y añadir el downloadatributo ( leer más ) a la misma, a la fuerza a que se descargue un archivo cuando se hace clic.
Yo uso el algoritmo AES para cifrar el URI de datos con la contraseña elegida, y ofrecerlo como una descarga. Lo contrario sucede cuando descifrarlo. No hay datos de que llegue el servidor.
Ni siquiera necesita un servidor para el caso, puede abrir el HTML directamente desde una carpeta de su ordenador y utilizarlo como es.
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros