Practical uses of client side encryption

  Encryption, PHP
Important : We’ve just launched  UserEncrypted.com , a free client side encryption service to securely store passwords or notes. The peculiarirty of the system is that your clear data never leaves your browser, and only encrypted data is sent to our server.

I recently happened to work on a web application whose commissioner was a society hosting sensitive data for its customers. Data needed to be accessible only by the respective owner and noone else at any level, database included. The platform was LAMPJ (Linux, Apache,Mysql,PHP and some Java webservices accessed by the PHP layer), and password protected AES encryption was required by the commissioner.

Proposals
The 2 proposed solutions were:

  1. database encryption using mysql aes_encrypt function
  2. client side encryption

Database encryption was discarded immediately because the approach would have meant that the PHP level had access to unencrypted data, so only client encryption being left, a second choice needed be done between:

  1. a java applet using the bouncycastle library
  2. pure javascript encryption

Although I’m quite accustomed to encryption, digital signature and timestamping with Java, I (initially) decided, due to strong encryption export issues, to give a try to the Javascript approach. Obviously I wasn’t going to implement aes in javascript by myself, and found the right code at Movable Type Scripts, where you can find the complete source code.
The code is clear and really easy to use. We have two methods we need to get the work done: AESEncryptCtr and AESDecryptCtr.
Practical use
At this point it was just a matter of how to deal with sensitive data.
For simplicity’s sake, let’s imagine an html form with one hidden input field containing encrypted data and a text area for the unencrypted text. On the server side we’ll keep our data in a plain file.
We’re using php, but this doesn’t affect the result.
One last thing, to avoid charset or special character problems, we’ll also base64 encode/decode the encrypted text, again on the client side. To achieve this we’ll use Tyler Akins’ javascript code, kindly released to the public domain.
That said, our files will be:

  1. base64.js – here are the base64 encoding/decoding functions
  2. encrypt.js – here is code downloaded from Movable Type Scripts
  3. encrypt.txt – our content file. It will contain our encrypted data and will be created by the php file
  4. encrypt.php – here we’ll (horribly) mix some php code and html

And here is the encrypt.php code:

   1:<?php
   2:        
   3:        
   4:        $filePath=$_SERVER['DOCUMENT_ROOT']."/demo/encryption/encryption.txt";
   5:        if(isset($_POST['encrypted_data'])){
   6:                file_put_contents($filePath,$_POST['encrypted_data']);
   7:        }
   8:        $text=(file_exists($filePath)) ? file_get_contents($filePath): "";
   9:?>
  10:<html>
  11:<script src="base64.js"></script>
  12:<script src="encryption.js"></script>
  13:<body onload="getPassword();decryptData();">
  14:        <form method=POST name=myform>
  15:                <input type=hidden name=encrypted_data id=encrypted_data value="<?php echo $text;?>">
  16:        </form>
  17:        <textarea id=datafield name=datafield rows=20 cols=50></textarea>
  18:        <input type=button onclick="return encryptData();" value="submit" >
  19:        
  20:        
  21:<script language=javascript>
  22:        var hiddenfield=document.getElementById("encrypted_data");
  23:        var textarea=document.getElementById("datafield");
  24:        var password="";
  25:        function decryptData(){
  26:                if(hiddenfield.value !=''){
  27:                        textarea.value=AESDecryptCtr(decode64(hiddenfield.value), password ,128);
  28:                }
  29:        }
  30:        
  31:        function encryptData(){
  32:                hiddenfield.value=encode64(AESEncryptCtr(textarea.value, password ,128));
  33:                document.forms.myform.submit();
  34:        }
  35:        
  36:        function getPassword(){
  37:                password=prompt("Password");
  38:        }
  39:        
  40:</script>
  41:</body>
  42:</html>

First the php part:
On line 4 we set the path for the file which will contain our encrypted data on the server( change it to fit your needs). This is the simplest case. A more real world case would be reading/writing from/to a database, but this is not influential now.
In lines 5-8 we check if something has been submitted and eventually save it on our text file.
On line 8 we read the encrypted text from the file (if some) and put it on our html hidden field(see below).

Now the html/javascript part.
We include base64.js and encryption.js , create a form with a hidden field, which will contain incoming/outgoing encrypted text, and out of the form a textarea for showing/updating unencrypted text.

As we can see on line 13, when the page is loaded (event onload) we first call the getPassword function, which prompts for a password, then we call decryptData. This will take the value of the hidden field, base64 decode it and , using the provided password, try to decrypt the data and put it in our textarea. The third parameter in AESDecryptCtr is the number of bits of the encryption key (128,192 and 256 are supported).
Now, if we edit the textarea content and push the submit button, the text in the textarea will be encrypted, again using the provided password, base64 encoded and put in the hidden field (by the function encryptData). Then the form will be submitted, and so only encrypted text will be sent back to the server (the textarea, containing clear text, is not part of the form, and so it doesn’t get submitted).

Easy, does it? Just a couple of notes:
1) if your server php version is old, you may not have file_get_contents and file_put_contents functions available. In this case you can find them in this PEAR package.
2) Make sure you have write privileges for the text file you’re going to use.

That’s all folks.

P.S.: in the end, for my project, the commissioner asked for PKI and smart card certificate encryption, so I had to implement a Java applet using BouncyCastle’s library and IAIK’s pkcs11 layer. So now clients can encrypt with the public keys of all those they want to be able to decrypt their data…..
Maybe I’ll write about this soon.

 

LEAVE A COMMENT