Decrypted file is very close to the original one but not quite

Hello there,

First of all, great work making this library and thank you for making it available !

I saw that the demo with file upload/download on your website was not working so I tried to make one that would work and couldn’t get it to. The closest I got with a few modification was generating a file which hexdump is very close to the original file’s but not exactly the same. Here is my code :

Worker.js

this.importScripts('lib/aes.js');
this.importScripts('lib/aes-ctr.js');

this.onmessage = function(msg) {
    switch (msg.data.op) {
        case 'encrypt':
            var reader = new FileReaderSync();
            var plaintext = reader.readAsText(msg.data.file, 'utf-8');
            var ciphertext = AesCtr.encrypt(plaintext, msg.data.password, msg.data.bits);
            // return encrypted file as Blob; UI thread can then use saveAs()
            var blob = new Blob([ciphertext], { type: 'text/plain' });
            self.postMessage({ progress: 'complete', ciphertext: blob });
            break;
        case 'decrypt':
            var reader = new FileReaderSync();
            var ciphertext = reader.readAsText(msg.data.file, 'iso-8859-1');
            var plaintext = AesCtr.decrypt(ciphertext, msg.data.password, msg.data.bits);
            // return decrypted file as Blob; UI thread can then use saveAs()
            var blob = new Blob([plaintext], { type: 'application/octet-stream' });
            self.postMessage({ progress: 'complete', plaintext: blob });
            break;
    }
};

and index.html

<script src="lib/aes.js"></script>
<script src="lib/aes-ctr.js"></script>
<script src="lib/FileSaver.js"></script>
<script>
window.addEventListener('load', function() {
    document.getElementById("form_encrypt").addEventListener('submit', function(e) {
        e.preventDefault();
        console.dir(e);
        var worker = new Worker('test.js');
        var file = document.getElementById("clearfile").files[0];
        var key = document.getElementById("encryption_key").value;
        worker.postMessage({ op:'encrypt', file:file, password:key, bits:256 });
        worker.onmessage = function(msg) {
            if (msg.data.progress == 'complete') {
                saveAs(msg.data.ciphertext, file.name+'.encrypted'); // save encrypted file
            }
        }
    });
    document.getElementById("form_decrypt").addEventListener('submit', function(e) {
        e.preventDefault();
        console.dir(e);
        var worker = new Worker('test.js');
        var file = document.getElementById("cipherfile").files[0];
        var key = document.getElementById("decryption_key").value;
        worker.postMessage({ op:'decrypt', file:file, password:key, bits:256 });
        worker.onmessage = function(msg) {
            if (msg.data.progress == 'complete') {
                saveAs(msg.data.plaintext, file.name+'.decrypted'); // save encrypted file
            }
        }
    });
});
</script>

<form id="form_encrypt">
    <input type="file" name="clearfile" id="clearfile" />
    <input type="text" name="encryption_key" id="encryption_key" />
    <input type="submit" />
</form>
<form id="form_decrypt">
    <input type="file" name="cipherfile" id="cipherfile" />
    <input type="text" name="decryption_key" id="decryption_key" />
    <input type="submit" />
</form>

At first glance, the decrypted file seemed corrupted. After dumping in hex both files I noticed the differences were small :

MBP-de-Mourad% hexdump -C ~/.code/so/kokoroe_profile.jpg | head
00000000  ff d8 ff e0 00 10 4a 46  49 46 00 01 01 01 00 60  |......JFIF.....`|
00000010  00 60 00 00 ff fe 00 3b  43 52 45 41 54 4f 52 3a  |.`.....;CREATOR:|
00000020  20 67 64 2d 6a 70 65 67  20 76 31 2e 30 20 28 75  | gd-jpeg v1.0 (u|
00000030  73 69 6e 67 20 49 4a 47  20 4a 50 45 47 20 76 38  |sing IJG JPEG v8|
00000040  30 29 2c 20 71 75 61 6c  69 74 79 20 3d 20 39 30  |0), quality = 90|
00000050  0a ff db 00 43 00 03 02  02 03 02 02 03 03 03 03  |....C...........|
00000060  04 03 03 04 05 08 05 05  04 04 05 0a 07 07 06 08  |................|
00000070  0c 0a 0c 0c 0b 0a 0b 0b  0d 0e 12 10 0d 0e 11 0e  |................|
00000080  0b 0b 10 16 10 11 13 14  15 15 15 0c 0f 17 18 16  |................|
00000090  14 18 12 14 15 14 ff db  00 43 01 03 04 04 05 04  |.........C......|

MBP-de-Mourad% hexdump -C ~/.code/so/kokoroe_profile.jpg.encrypted.decrypted.jpg | head
00000000  ef bf bd ef bf bd ef bf  bd ef bf bd 00 10 4a 46  |..............JF|
00000010  49 46 00 01 01 01 00 60  00 60 00 00 ef bf bd ef  |IF.....`.`......|
00000020  bf bd 00 3b 43 52 45 41  54 4f 52 3a 20 67 64 2d  |...;CREATOR: gd-|
00000030  6a 70 65 67 20 76 31 2e  30 20 28 75 73 69 6e 67  |jpeg v1.0 (using|
00000040  20 49 4a 47 20 4a 50 45  47 20 76 38 30 29 2c 20  | IJG JPEG v80), |
00000050  71 75 61 6c 69 74 79 20  3d 20 39 30 0a ef bf bd  |quality = 90....|
00000060  ef bf bd 00 43 00 03 02  02 03 02 02 03 03 03 03  |....C...........|
00000070  04 03 03 04 05 08 05 05  04 04 05 0a 07 07 06 08  |................|
00000080  0c 0a 0c 0c 0b 0a 0b 0b  0d 0e 12 10 0d 0e 11 0e  |................|
00000090  0b 0b 10 16 10 11 13 14  15 15 15 0c 0f 17 18 16  |................|

As you would notice there are just a few extra non-printable characters in the encrypted then decrypted version. I wonder where they come from.

[chrisveness]

Adding some console.log debug into AesCtr in www.movable-type.co.uk/dev/aes-ww, I see that before and after encryption, the plaintext is 379kb, which is the size of the original mc.png – whereas the saved file is much larger, so I think the problem is in the file handling somewhere.

Hope that helps, Chris

[chrisveness]

It looks to me as if all non-ASCII characters are being replaced by UTF-8 equivalents.

I will look into whether this is happening in AesCtr or whether it’s a file-handling issue.