{"id":36,"date":"2016-05-06T08:52:44","date_gmt":"2016-05-06T08:52:44","guid":{"rendered":"http:\/\/symbioticindia.in\/docu\/?p=36"},"modified":"2016-05-06T08:52:44","modified_gmt":"2016-05-06T08:52:44","slug":"practical-uses-of-client-side-encryption","status":"publish","type":"post","link":"http:\/\/symbioticindia.in\/docu\/2016\/05\/06\/practical-uses-of-client-side-encryption\/","title":{"rendered":"Practical uses of client side encryption"},"content":{"rendered":"\n\n\n
Important<\/strong> : We’ve just launched\u00a0 UserEncrypted.com<\/a> , 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.<\/p>\n

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.<\/p>\n

Proposals<\/strong>
\nThe 2 proposed solutions were:<\/p>\n

    \n
  1. database encryption using mysql aes_encrypt function<\/li>\n
  2. client side encryption<\/li>\n<\/ol>\n

    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:<\/p>\n

      \n
    1. a java applet using the bouncycastle library<\/li>\n
    2. pure javascript encryption<\/li>\n<\/ol>\n

      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<\/a>, where you can find the complete source code.
      \nThe code is clear and really easy to use. We have two methods we need to get the work done: AESEncryptCtr<\/em> and AESDecryptCtr<\/em>.
      \nPractical use<\/strong>
      \nAt this point it was just a matter of how to deal with sensitive data.
      \nFor 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.
      \nWe’re using php, but this doesn’t affect the result.
      \nOne 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’<\/a> javascript code, kindly released to the public domain.
      \nThat said, our files will be:<\/p>\n

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

        And here is the encrypt.php<\/em> code:<\/p>\n

           1:<\/span><?php<\/span>\r\n   2:<\/span>        \r\n   3:<\/span>        \r\n   4:<\/span>        $<\/span>filePath<\/span>=<\/span>$<\/span>_SERVER<\/span>[<\/span>'<\/span>DOCUMENT_ROOT<\/span>'<\/span>]<\/span>.<\/span>\"<\/span>\/<\/span>demo<\/span>\/<\/span>encryption<\/span>\/<\/span>encryption<\/span>.<\/span>txt<\/span>\"<\/span>;<\/span>\r\n   5:<\/span>        if<\/span>(isset<\/span>($<\/span>_POST<\/span>[<\/span>'<\/span>encrypted_data<\/span>'<\/span>]<\/span>)){<\/span>\r\n   6:<\/span>                file_put_contents<\/span>($<\/span>filePath<\/span>,<\/span>$<\/span>_POST<\/span>[<\/span>'<\/span>encrypted_data<\/span>'<\/span>]<\/span>);<\/span>\r\n   7:<\/span>        }<\/span>\r\n   8:<\/span>        $<\/span>text<\/span>=<\/span>(file_exists<\/span>($<\/span>filePath<\/span>)) ?<\/span> file_get_contents<\/span>($<\/span>filePath<\/span>):<\/span> \"<\/span>\"<\/span>;<\/span>\r\n   9:<\/span>?><\/span>\r\n  10:<\/span><<\/span>html<\/span>><\/span>\r\n  11:<\/span><script<\/span> src<\/span>=<\/span>\"<\/span>base64<\/span>.<\/span>js<\/span>\"<\/span>><\/span><\/script><\/span>\r\n  12:<\/span><script<\/span> src<\/span>=<\/span>\"<\/span>encryption<\/span>.<\/span>js<\/span>\"<\/span>><\/span><\/script><\/span>\r\n  13:<\/span><<\/span>body<\/span> onload<\/span>=<\/span>\"<\/span>getPassword<\/span>(<\/span>)<\/span>;<\/span>decryptData<\/span>(<\/span>)<\/span>;<\/span>\"<\/span>><\/span>\r\n  14:<\/span>        <<\/span>form<\/span> method<\/span>=<\/span>POST<\/span> name<\/span>=<\/span>myform<\/span>><\/span>\r\n  15:<\/span>                <<\/span>input<\/span> type<\/span>=<\/span>hidden<\/span> name<\/span>=<\/span>encrypted_data<\/span> id<\/span>=<\/span>encrypted_data<\/span> value<\/span>=<\/span>\"<\/span><?php<\/span> echo<\/span> $<\/span>text<\/span>;<\/span>?><\/span>\"<\/span>><\/span>\r\n  16:<\/span>        <<\/span>\/<\/span>form<\/span>><\/span>\r\n  17:<\/span>        <<\/span>textarea<\/span> id<\/span>=<\/span>datafield<\/span> name<\/span>=<\/span>datafield<\/span> rows<\/span>=<\/span>20<\/span> cols<\/span>=<\/span>50<\/span>><\/span><<\/span>\/<\/span>textarea<\/span>><\/span>\r\n  18:<\/span>        <<\/span>input<\/span> type<\/span>=<\/span>button<\/span> onclick<\/span>=<\/span>\"<\/span>return<\/span> encryptData<\/span>(<\/span>)<\/span>;<\/span>\"<\/span> value<\/span>=<\/span>\"<\/span>submit<\/span>\"<\/span> ><\/span>\r\n  19:<\/span>        \r\n  20:<\/span>        \r\n  21:<\/span><script<\/span> language<\/span>=<\/span>javascript<\/span>><\/span>\r\n  22:<\/span>        var<\/span> hiddenfield<\/span>=<\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>\"<\/span>encrypted_data<\/span>\"<\/span>)<\/span>;<\/span>\r\n  23:<\/span>        var<\/span> textarea<\/span>=<\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>\"<\/span>datafield<\/span>\"<\/span>)<\/span>;<\/span>\r\n  24:<\/span>        var<\/span> password<\/span>=<\/span>\"<\/span>\"<\/span>;<\/span>\r\n  25:<\/span>        function<\/span> decryptData<\/span>(<\/span>)<\/span>{<\/span>\r\n  26:<\/span>                if<\/span>(<\/span>hiddenfield<\/span>.<\/span>value<\/span> !<\/span>=<\/span>'<\/span>'<\/span>)<\/span>{<\/span>\r\n  27:<\/span>                        textarea<\/span>.<\/span>value<\/span>=<\/span>AESDecryptCtr<\/span>(<\/span>decode64<\/span>(<\/span>hiddenfield<\/span>.<\/span>value<\/span>)<\/span>,<\/span> password<\/span> ,<\/span>128<\/span>)<\/span>;<\/span>\r\n  28:<\/span>                }<\/span>\r\n  29:<\/span>        }<\/span>\r\n  30:<\/span>        \r\n  31:<\/span>        function<\/span> encryptData<\/span>(<\/span>)<\/span>{<\/span>\r\n  32:<\/span>                hiddenfield<\/span>.<\/span>value<\/span>=<\/span>encode64<\/span>(<\/span>AESEncryptCtr<\/span>(<\/span>textarea<\/span>.<\/span>value<\/span>,<\/span> password<\/span> ,<\/span>128<\/span>)<\/span>)<\/span>;<\/span>\r\n  33:<\/span>                document<\/span>.<\/span>forms<\/span>.<\/span>myform<\/span>.<\/span>submit<\/span>(<\/span>)<\/span>;<\/span>\r\n  34:<\/span>        }<\/span>\r\n  35:<\/span>        \r\n  36:<\/span>        function<\/span> getPassword<\/span>(<\/span>)<\/span>{<\/span>\r\n  37:<\/span>                password<\/span>=<\/span>prompt<\/span>(<\/span>\"<\/span>Password<\/span>\"<\/span>)<\/span>;<\/span>\r\n  38:<\/span>        }<\/span>\r\n  39:<\/span>        \r\n  40:<\/span><\/script><\/span>\r\n  41:<\/span><<\/span>\/<\/span>body<\/span>><\/span>\r\n  42:<\/span><<\/span>\/<\/span>html<\/span>><\/span> <\/span><\/pre>\n
        First the php part:
        \nOn 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.
        \nIn lines 5-8 we check if something has been submitted and eventually save it on our text file.
        \nOn line 8 we read the encrypted text from the file (if some) and put it on our html hidden field(see below).<\/p>\n
        Now the html\/javascript part.
        \nWe 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.<\/p>\n
        As we can see on line 13, when the page is loaded (event onload<\/em>) we first call the getPassword<\/em> function, which prompts for a password, then we call decryptData<\/em>. 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).
        \nNow, 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<\/em>). 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).<\/p>\n
        Easy, does it? Just a couple of notes:
        \n1) if your server php version is old, you may not have file_get_contents<\/em> and file_put_contents<\/em> functions available. In this case you can find them in         this<\/a> PEAR package.
        \n2) Make sure you have write privileges for the text file you’re going to use.<\/p>\n
        That’s all folks.<\/p>\n
        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…..
        \nMaybe I’ll write about this soon.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
        \u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
        Important : We’ve just launched\u00a0 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 ..<\/p>\n
        <\/div>\n
        Read more<\/a><\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,6],"tags":[],"class_list":["post-36","post","type-post","status-publish","format-standard","hentry","category-encryption","category-php"],"_links":{"self":[{"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/posts\/36","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/comments?post=36"}],"version-history":[{"count":1,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/posts\/36\/revisions"}],"predecessor-version":[{"id":37,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/posts\/36\/revisions\/37"}],"wp:attachment":[{"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/media?parent=36"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/categories?post=36"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/tags?post=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}