Decryption a Picture using CryptoJS and Inserting it into a Page

Question

For a slew of complicated reasons. we need to send images over the network in encrypted state and decrypt them on the other side using AES. On the server side here is what happens:

openssl aes-256-cbc -in pup.jpg -out pup.jpg.enc
base64 pup.jpg.enc > pup.jpg.enc.b64

On the client side here is the JavaScript we are using:

<img id="picture"/>
<script>
    var picture = document.getElementById("picture");
    var data = new XMLHttpRequest();
    data.open('GET', 'http://server.com/pup.jpg.enc.b64', true);
    data.onreadystatechange = function(){
        if(this.readyState == 4 && this.status==200){
            var dec = CryptoJS.AES.decrypt(data.responseText, "password");
            var plain = CryptoJS.enc.Base64.stringify( dec );
        picture.src = "data:image/jpeg;base64,"+plain;
        }
    };
    data.send(null);
</script>

I am getting a deviation in the input and output, and I can not figure out why, for the life of me. Here is the input and output:

In:  /9j/4RLKRXhpZgAATU0AKgAAAAgADAEAAAMAAAABBADJx...
Out: /9j/4RLKRXhpZgAATU0AKgAAAAgADAEAAAMAAAABBAAAA...
                                               ^-- deviation

Do I have to specify to the CryptoJS that I am using 256bit encryption?

Answer 1

The problem appears to be with a bug in CryptoJS that causes the library to not work if input string contains new lines. Encoding the file like this:

openssl enc -aes-256-cbc -in pup.jpg -pass pass:"password" | base64 | tr -d '\n' > pup.enc

fixes the issue. The problem want with the javascript, but with the encoding. Well, and with javascript, because there is a bug in cryptojs: https://code.google.com/p/crypto-js/issues/detail?id=38