GSoC 17 : Client Side File Crypto : week 8

Note: This is a repost of the original Blog post during GSoC ’17. As my AWS instance went down, I’ve been migrating my old blog posts here.
Originally posted in July 2017

This blog post summarises the eighth week of writing open-source code for Drupal with Google Summer of Code.

This week I nearly completed the final encryption JS script and moved to the decryption part of the module that is the last major functional component

File Encryption Updates

I added a custom field on the form to take file inputs that would accept all file types for the user file input that is to be encrypted by this module.

There were several limitations on using the default fileinput field as it would require additional configuration from the system administrator, the file types that can be uploaded are also limited and there are JS methods that are bound to the change event of those fields not overridden by event.preventDefault().

I also added new AJAX methods that would send the file asynchronously to the backend leveraging the FormData() API and BLOB objects in JavaScript to mock a form field which is better and a more elegant method than what I was using before :

Before:
var body = ‘ — ‘ + boundary + ‘\r\n’

// Parameter name is “file” and local filename is “temp.txt”

+ ‘Content-Disposition: form-data; name=”file”;’

+ ‘filename=”’ + file_name + ‘“\r\n’

// Add the file’s mime-type

+ ‘Content-type: ‘ + file.type + ‘\r\n\r\n’

// Add your data:

+ encrypted + ‘\r\n’

+ ‘ — ‘+ boundary + ‘ — ‘;

Now:

var formData = new FormData();

formData.append(‘file’, new File([new Blob([encrypted])], file_name));

formData.append(‘another-form-field’, ‘some value’);

File Decryption Sandbox

I started off testing my decryption scripts inside a decryption sandbox. For testing purposes I added a download method on the event when the file is selected on the new node page. I also added another file field on the same page to test out the decryption on the same page.

So now, once you select file on the “Encrypted file” field, it would download the ciphertext file with the name encrypted_filename.extension and that file can then be dragged to the “Decrypt file” field and that would decrypt that file and download the cleartext file for that file. This worked as expected for plain text files but didn’t quite work initially for binary files like images.

Result with binaries:

Trouble with binaries!

As mentioned in the previous image, the binary files (eg: images) were not working with the JS code I wrote. It turned out that I was using the wrong decoding while decrypting the file as the encrypting was just fine. The CryptoJS library automatically handles base64 encoding though.

Here is what the original image looked like when opened in a text editor:

But the file output I was getting was in a different character-set:

Base64:

Base64 not converted using .toString(CryptoJS.enc.Latin1)

After a while of looking around on the internet I figured I had to download the binary files using the “data:application/octet-stream” MIME type on an anchor with the “download” tag and trigger clicking on it using JS.

Also, I could add an image preview to the page seeing how this website works during the “investigation”.

After a bit more modification, I could make this work with all MIME types and tested it with plain-text, images and pdf files and then moved this code to the js_decrypt branch to attach it to all the pages where these encrypted files would be displayed.

Youtube screen-recording video demonstrating the decryption sandbox.

https://www.youtube.com/watch?v=I-eDFPVlAGc

Also, the second phase evaluations would be this week and this week would be the end of the second month of the coding period in Google Summer of Code. As most of the time has elapsed, so is development for most major parts of the module. The only parts left to be done are for customisability of the implemented features so far and writing tests and documentation. I’ve started looking into writing tests which I’m going to continue this week along with altering the file preview methods on the view article pages.[More things to add to do after tomorrow’s meeting]

Thanks for reading!

Like what you read? Give Tameesh Biswas a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.