Protecting Browser Side User Data in JavaScript using Cryptography with secStore.js - secStore.js package blog

Because security should be approached in a layered model such as first configuring the use of an SSL connection with a valid signed certificate from a reputable certificate authority.

When presenting any of your users with a form which requests information regarding their name, email or any other personally identifiable information you should always use (at the very least) a secure communications method, which is what an SSL/TLS connection does.

Now that you have enveloped your websites with a secure communications channel next you should ensure that all areas of your code accommodates for additional flaws such as cross site request forgery, cross site scripting, cross site history manipulation, etc etc.

As a developer, from a purely ethical standpoint, you should be addressing these on each and every web site, application or piece of code you publish.

Because I am fully aware of these vectors and the inherent problems plaguing today’s Web applications I built a small library to help address securing data "at rest" within the browser.

If you currently working with personally identifiable information for your users and want to provide better protections go ahead and implement secStore.js.

Example of Usage of secStore.js

In these examples I will be using the AES feature providing transparent encryption and decryption, so we must include the Stanford Javascript Crypto Libraries first. If you are using git the easiest method of installation is like so...

 git clone --recursive https://github.com/jas-/secStore.js.git

That will create a clone of the the secStore.js repo as well as install the SJCL libraries within the 3rd-party folder as a dependency.

Next we simply need to create a new document and include the secStore.js file by embedding it into the head of our HTML document. Here is an example:

 <script src="path/to/secStore.js"></script>

Easy enough, right? Now we simply need to start saving and retrieving data.

This first example details how to save data transparently encrypting it using AES with the debug flag turned on while capturing the results of our operation and writing it to our document.

 <script><!--
 $(window).secStore({
   aes: true,
   debug: true,
   data: {foo: 'bar', ping: 'pong'},
   callback: function(results){
     document.write(results);
   }
 });
 // --></script>

Pretty simply right? At this point you have a cipher text version of the object we specified with the 'data' parameter shown in the example above.

Because in that example we enabled the 'debug' option if you open up your browsers console you can see verbose logging information regarding the operation.

Now that we have given an example of saving data lets now get that data back into plain text from the stored cipher text and print it to the screen.

 <script>
 $(window).secStore({
   aes: true,
   debug: true,
   callback: function(results){
     document.write( JSON.stringify( results));
   }
 });
 </script>

There you have it, your screen should now show the object in string format like so...

 {foo: 'bar', ping: 'pong'}

There are many more options available for this plugin that I suggest you read up on if you decide this is a plugin you wish to implement in your next development project.

Happy coding!