AES decryption with cipher using CryptoJS returns a blank value

CryptoJS has two slightly different encryption/decryption types.

when using it

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

then you are using password based encryption which is not the same as plain key/IV based encryption. This means that the password and randomly generated salt will be run through a single MD5 call to generate the key and IV for the actual encryption. This is OpenSSL compatible encryption. This encryptedobject stores the random salt used to generate the key and IV.

When you encryptedcast to a string (e.g. add it to localStorage) it will be converted to an OpenSSL compatible string encoding that includes the salt. In order to decrypt it again, you don't need to mess with the IV or salt, as CryptoJS does this for you automatically:

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

Remember, this decryptedis an WordArrayobject, and when you force it to a string, it encodes the content to hex by default. If you don't want to do this, you need to specify the encoding yourself, e.g. UTF-8.

A blank value is usually returned when decryption fails for some reason (such as wrong key, wrong ciphertext, or wrong encoding). CryptoJS doesn't throw custom error messages, but will try to continue since 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">