CODEWITHSUNDEEP
javascriptencryptioncryptographycryptojs
Stubborn
Stubborn

Reputation: 968

AES decryption with password using CryptoJS returns a blank value

Scenario

I've got the following code:

<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
<div id="decrypted">Please wait...</div>
Insert new note:<input type="text" id="new_note"><input type="button" id="enc_button" value="Save">
<script>
    var password = "testpassword";
    var encrypted_text = localStorage.getItem("encrypted");
    var rawData = atob(encrypted_text);
    var iv = rawData.substring(0,16);
    var crypttext = rawData.substring(16);
    var plaintextArray = CryptoJS.AES.decrypt(
      { ciphertext: CryptoJS.enc.Latin1.parse(crypttext) },
      CryptoJS.enc.Hex.parse(password),
      { iv: CryptoJS.enc.Latin1.parse(iv) }
    );
    var decrypted = CryptoJS.enc.Latin1.stringify(plaintextArray);
    document.getElementById("decrypted").innerHTML = decrypted;
    document.getElementById("enc_button").onclick = function(){
    	var text = document.getElementById("new_note").value;
    	var encrypted = CryptoJS.AES.encrypt(text, password);
    	localStorage.setItem("encrypted",encrypted);
    }
</script>

What my code should do

Encrypt a string with AES using CryptoJS; decrypt encrypted text saved in local storage and show the result in a div

What is not working

While the string seems to get encrypted, the variable decrypt is empty. No errors are triggered in the chrome console.

My question

How can I successfully encrypt and decrypt my text?

Upvotes: 9

Views: 13361

Answers (4)

Bennacer Mohamed Akram
Bennacer Mohamed Akram

Reputation: 1

For anyone who had the problem while building an api, GO CHECK THE BODY U ARE SENDING TO TEST MAKE SURE THE BODY OBJECT PROPERTIES ARE WELL NAMED xD took me 1h to realize that

Upvotes: 0

Zibri
Zibri

Reputation: 9857

You could just check the source code... there are examples.
Any way the easiest way to make it generate key, iv and salt from passphrase,
is the normal way CryptoJS.AES.encrypt("attack at dawn!","passphrase")
But you can set the parameters before by using for example:

CryptoJS.algo.AES.keySize=32
CryptoJS.algo.AES.blockSize=8
CryptoJS.algo.AES.ivSize=16
CryptoJS.algo.EvpKDF.cfg.iterations=100
CryptoJS.algo.EvpKDF.cfg.keySize=32

etc etc

Upvotes: -2

Artjom B.
Artjom B.

Reputation: 61952

CryptoJS has two slightly different types of encryption/decryption.

When you use 

var encrypted = CryptoJS.AES.encrypt(text, password);

then you're using password-based encryption which is not the same as pure key/IV-based encryption. This means that the password and a randomly generated salt are run through one MD5 invocation to produce the key and IV for the actual encryption. This is an OpenSSL compatible way to encrypt something. The encrypted object stores the random salt which was used to generate the key and IV.

When you force encrypted to be converted to string (like adding it to localStorage), then it is converted into an OpenSSL compatible string encoding which includes the salt. In order to decrypt it again, you don't need to mess around with the key, IV or salt yourself, because CryptoJS automatically does that for you:

var decrypted = CryptoJS.AES.decrypt(encrypted, password);

Keep in mind that decrypted is a WordArray object and when you force it to be converted to string it will encode the contents into Hex by default. If you don't want that then you need to specify the encoding such as UTF-8 yourself.

A blank value is usually returned when the decryption failed for some reason such as wrong key, wrong ciphertext or wrong encoding. CryptoJS won't throw custom error messages, but will try to continue, because you should know what you're doing.

Full code:

var password = "testpassword";

document.getElementById("enc_button").onclick = function(){
  var text = document.getElementById("new_note").value;
  
  var encrypted = CryptoJS.AES.encrypt(text, password);
  encrypted = encrypted.toString();
  
  var decrypted = CryptoJS.AES.decrypt(encrypted, password);
  decrypted = decrypted.toString(CryptoJS.enc.Utf8)
  
  document.getElementById("decrypted").innerHTML = decrypted;
}
<script src="https://cdn.rawgit.com/CryptoStore/crypto-js/3.1.2/build/rollups/aes.js"></script>
<div id="decrypted">Please wait...</div>
Insert new note:<input type="text" id="new_note"><input type="button" id="enc_button" value="Encrypt & Decrypt">

Upvotes: 10

James Jithin
James Jithin

Reputation: 10555

I tired debugging your code by placing the script in try-catch and looks like document.getElementById is returned undefined. This is because the method is being called before the element is being created. The following steps make this work:

Head:

var password = "testpassword";
var encrypted_text = localStorage.getItem("encrypted");
var rawData = atob(encrypted_text);
var iv = rawData.substring(0,16);
var crypttext = rawData.substring(16);
var plaintextArray = CryptoJS.AES.decrypt(
  { ciphertext: CryptoJS.enc.Latin1.parse(crypttext) },
  CryptoJS.enc.Hex.parse(password),
  { iv: CryptoJS.enc.Latin1.parse(iv) }
);
var decrypted = CryptoJS.enc.Latin1.stringify(plaintextArray);

function setComponents() {
    try {
        document.getElementById("decrypted").innerHTML = decrypted;
        document.getElementById("enc_button").onclick = function(){
            var text = document.getElementById("new_note").value;
            var encrypted = CryptoJS.AES.encrypt(text, password);
            localStorage.setItem("encrypted",encrypted);
            alert(encrypted);
        };
    } catch(e) {
        alert(e);
    }
}

Body:

<body onload="setComponents()">
<div id="decrypted">Please wait...</div>
Insert new note:<input type="text" id="new_note"/><input type="button" id="enc_button" value="Save"/>
</body>

Upvotes: 0

Related Questions